11 files changed, 582 insertions, 0 deletions
diff --git a/toolkit/themes/osx/reftests/482681-ref.xul b/toolkit/themes/osx/reftests/482681-ref.xul
new file mode 100644
index 000000000..62fb4bb8d
--- /dev/null
+++ b/toolkit/themes/osx/reftests/482681-ref.xul
@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,
+vbox { height: 50px; }
+box {
+  -moz-appearance: button;
+}
+" type="text/css"?>
+
+<window title="Reference for mini, small and regular button sizes"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox>
+    <hbox><box width="79" height="16"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox><box width="79" height="19"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox><box width="79" height="22"/></hbox>
+  </vbox>
+</window>
diff --git a/toolkit/themes/osx/reftests/482681.xul b/toolkit/themes/osx/reftests/482681.xul
new file mode 100644
index 000000000..6cb9aaeae
--- /dev/null
+++ b/toolkit/themes/osx/reftests/482681.xul
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,
+vbox { height: 50px; }
+button {
+  color: transparent;
+  margin: 0;
+}
+" type="text/css"?>
+
+<window title="Buttons with mini, small and regular control font"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox style="font-size: 9px">
+    <hbox><button label="Mini"/></hbox>
+  </vbox>
+  <vbox style="font: message-box">
+    <hbox><button label="Small"/></hbox>
+  </vbox>
+  <vbox style="font: -moz-dialog">
+    <hbox><button label="Regular"/></hbox>
+  </vbox>
+</window>
diff --git a/toolkit/themes/osx/reftests/baseline.xul b/toolkit/themes/osx/reftests/baseline.xul
new file mode 100644
index 000000000..2ec6f5132
--- /dev/null
+++ b/toolkit/themes/osx/reftests/baseline.xul
@@ -0,0 +1,175 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<!--
+ * This is a complicated test.
+ * XUL authors like to place several different widgets on the same line by
+ * putting them in a <hbox align="center">. In order for this to look good,
+ * the baselines of the text contained in the widgets should line up.
+ * This is what this test is testing.
+ * The test passes if it's completely white.
+ *
+ * It works like this:
+ * For every combination of two different widgets (where widget is one of
+ * label, radio, checkbox, button, textbox, menulist, menulist[editable="true"] or
+ * filefield), there's a stack with two layers. The back layer in the stack is
+ * just a vertically centered label with a bunch of underscores. This is the
+ * baseline that the text on the widgets should hit.
+ * On the foreground layer in the stack we've placed the pair of widgets we're
+ * testing. They also have underscores in their labels.
+ *
+ * Now we want to test whether the underscores in the foreground layer are directly
+ * on top of those in the back layer. For that we use color-keying and a tricky
+ * SVG color transformation.
+ * The back layer of the stack has a red background; the underscores of the
+ * back label are in white (and have a white text-shadow in order to fill up the
+ * gaps between the individual letters).
+ * Now we want the foreground layer to be solid white, except for those pixels
+ * that make up the labels: These should be transparent.
+ * So if the baselines line up, everything is white, since at those pixels where
+ * the foreground is transparent, only the white pixels from the back layer shine
+ * through. If the baselines don't line up, red pixels from the background will
+ * shine through, and the comparison with about:blank (completely white) will fail.
+ *
+ * So how do we get the foreground white and transparent? That's the job of the
+ * SVG color transformation filter. It's a simple matrix that makes turns opaque
+ * yellow into transparent and all other colors into white.
+ * -->
+
+<window title="Baseline test"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        orient="vertical"
+        class="reftest-wait"
+        onload="loaded()">
+
+<html:style><![CDATA[
+window {
+  -moz-appearance: none;
+  background-color: white;
+}
+.regular {
+  font: -moz-dialog;
+}
+.small {
+  font: message-box;
+}
+.spacer {
+  height: 40px;
+}
+stack > hbox:first-child {
+  background: red;
+  color: white;
+  text-shadow: 5px 0 white, -5px 0 white;
+}
+stack > .foreground {
+  filter: url(#yellow2transparent);
+}
+stack > hbox:last-child > * {
+  color: yellow;
+}
+]]>
+</html:style>
+
+  <svg:svg style="visibility: collapse;">
+    <svg:filter id="yellow2transparent" color-interpolation-filters="sRGB">
+      <svg:feColorMatrix type="matrix"
+           values="0 0 0 0 1
+                   0 0 0 0 1
+                   0 0 0 0 1
+                   -100 -100 100 -100 300"/>
+    </svg:filter>
+  </svg:svg>
+
+<script type="application/javascript;version=1.8"><![CDATA[
+
+function cE(elem) {
+  return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
+}
+function elWithValue(elem, val) {
+  let e = cE(elem);
+  e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
+  return e;
+}
+
+function allPairs(set) {
+  let ps = [];
+  for(let i = 0; i < set.length; ++i) {
+    for (let j = i + 1; j < set.length; ++j) {
+      ps.push([set[i], set[j]]);
+    }
+  }
+  return ps;
+}
+
+function createLabel(v) {
+  return elWithValue("label", v);
+}
+function createRadio(v) {
+  return elWithValue("radio", v);
+}
+function createCheckbox(v) {
+  return elWithValue("checkbox", v);
+}
+function createButton(v) {
+  return elWithValue("button", v);
+}
+function createTextField(v) {
+  return elWithValue("textbox", v);
+}
+function createMenulist(v) {
+  let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
+  item.setAttribute("selected", "true");
+  popup.appendChild(item);
+  list.appendChild(popup);
+  return list;
+}
+function createEditableMenulist(v) {
+  let list = createMenulist(v);
+  list.setAttribute("editable", "true");
+  return list;
+}
+function createFileField(v) {
+  let field = elWithValue("filefield", v);
+  field.setAttribute("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrCaTT51nAoFAIBAIBAKB4MoCtVsCPjrGuiwAAAAASUVORK5CYII=");
+  return field;
+}
+function loaded() {
+  let template = document.getElementById("template");
+  ["regular", "small"].forEach(function(size) {
+    let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
+    allPairs([
+      createLabel, createRadio, createCheckbox, createButton, createMenulist, createTextField,
+       /* createEditableMenulist, createFileField, */ /* These don't inherit "color" properly */
+    ]).forEach(function(elemList) {
+      let newBox = template.cloneNode(true);
+      newBox.className = "spacer";
+      let foregroundRow = newBox.firstChild.lastChild;
+      elemList.forEach(function(creator) {
+        foregroundRow.appendChild(creator("______"));
+      });
+      wrapper.appendChild(newBox);
+    });
+  });
+  document.documentElement.className = "";
+}
+
+]]></script>
+    <vbox id="template">
+      <stack>
+        <hbox align="center">
+          <label value="______________________________________________"/>
+        </hbox>
+        <hbox align="center" class="foreground">
+        </hbox>
+      </stack>
+    </vbox>
+  <hbox id="wrapper">
+    <vbox class="regular" flex="1"/>
+    <vbox class="small" flex="1"/>
+  </hbox>
+
+  <spacer flex="1"/>
+
+</window>
diff --git a/toolkit/themes/osx/reftests/checkboxsize-ref.xul b/toolkit/themes/osx/reftests/checkboxsize-ref.xul
new file mode 100644
index 000000000..08d1e9a67
--- /dev/null
+++ b/toolkit/themes/osx/reftests/checkboxsize-ref.xul
@@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,
+vbox { height: 50px; }
+box {
+  -moz-appearance: checkbox;
+  margin-left: 2px;
+  margin-top: 1px;
+}
+" type="text/css"?>
+
+<window title="Reference for mini, small and regular checkbox sizes"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox>
+    <hbox><box width="11" height="11"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox><box width="13" height="13"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox><box width="16" height="16"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox checked="true"><box width="11" height="11"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox checked="true"><box width="13" height="13"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox checked="true"><box width="16" height="16"/></hbox>
+  </vbox>
+</window>
diff --git a/toolkit/themes/osx/reftests/checkboxsize.xul b/toolkit/themes/osx/reftests/checkboxsize.xul
new file mode 100644
index 000000000..55429ef8f
--- /dev/null
+++ b/toolkit/themes/osx/reftests/checkboxsize.xul
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,
+vbox { height: 50px; }
+checkbox {
+  color: transparent;
+  margin: 0;
+}
+" type="text/css"?>
+
+<window title="Checkboxes with mini, small and regular control font"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox style="font-size: 9px">
+    <hbox><checkbox label="Mini"/></hbox>
+  </vbox>
+  <vbox style="font: message-box">
+    <hbox><checkbox label="Small"/></hbox>
+  </vbox>
+  <vbox style="font: -moz-dialog">
+    <hbox><checkbox label="Regular"/></hbox>
+  </vbox>
+  <vbox style="font-size: 9px">
+    <hbox><checkbox label="Mini" checked="true"/></hbox>
+  </vbox>
+  <vbox style="font: message-box">
+    <hbox><checkbox label="Small" checked="true"/></hbox>
+  </vbox>
+  <vbox style="font: -moz-dialog">
+    <hbox><checkbox label="Regular" checked="true"/></hbox>
+  </vbox>
+</window>
diff --git a/toolkit/themes/osx/reftests/nostretch-ref.xul b/toolkit/themes/osx/reftests/nostretch-ref.xul
new file mode 100644
index 000000000..a1aee555e
--- /dev/null
+++ b/toolkit/themes/osx/reftests/nostretch-ref.xul
@@ -0,0 +1,107 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window title="Stretched controls test reference"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        orient="vertical"
+        class="reftest-wait"
+        onload="loaded()">
+
+<html:style><![CDATA[
+.regular {
+  font: -moz-dialog;
+}
+.small {
+  font: message-box;
+}
+.spacer {
+  height: 40px;
+}
+.foreground > :nth-child(2) {
+  display: none; /* <----- This is the only difference from nostretch.xul */
+}
+]]>
+</html:style>
+
+<script type="application/javascript;version=1.8"><![CDATA[
+
+function cE(elem) {
+  return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
+}
+function elWithValue(elem, val) {
+  let e = cE(elem);
+  e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
+  return e;
+}
+
+function allPairs(set) {
+  let ps = [];
+  for(let i = 0; i < set.length; ++i) {
+    for (let j = 0; j < set.length; ++j) {
+      if (i != j)
+        ps.push([set[i], set[j]]);
+    }
+  }
+  return ps;
+}
+
+function createLabel(v) {
+  return elWithValue("label", v);
+}
+function createRadio(v) {
+  return elWithValue("radio", v);
+}
+function createCheckbox(v) {
+  return elWithValue("checkbox", v);
+}
+function createButton(v) {
+  return elWithValue("button", v);
+}
+function createTextField(v) {
+  return elWithValue("textbox", v);
+}
+function createMenulist(v) {
+  let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
+  item.setAttribute("selected", "true");
+  popup.appendChild(item);
+  list.appendChild(popup);
+  return list;
+}
+function createEditableMenulist(v) {
+  let list = createMenulist(v);
+  list.setAttribute("editable", "true");
+  return list;
+}
+function loaded() {
+  let template = document.getElementById("template");
+  ["regular", "small"].forEach(function(size) {
+    let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
+    allPairs([
+      createButton, createMenulist, createTextField, createEditableMenulist,
+    ]).forEach(function(elemList) {
+      let newBox = template.cloneNode(true);
+      newBox.className = "spacer";
+      let foregroundRow = newBox.firstChild;
+      elemList.forEach(function(creator) {
+        foregroundRow.appendChild(creator("Label"));
+      });
+      wrapper.appendChild(newBox);
+    });
+  });
+  document.documentElement.className = "";
+}
+
+]]></script>
+    <vbox id="template">
+      <hbox class="foreground"/>
+    </vbox>
+  <hbox id="wrapper">
+    <vbox class="regular" width="500"/>
+    <vbox class="small" flex="1"/>
+  </hbox>
+
+  <spacer flex="1"/>
+
+</window>
diff --git a/toolkit/themes/osx/reftests/nostretch.xul b/toolkit/themes/osx/reftests/nostretch.xul
new file mode 100644
index 000000000..cd28fa1b7
--- /dev/null
+++ b/toolkit/themes/osx/reftests/nostretch.xul
@@ -0,0 +1,120 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<!--
+ * This test tests whether you can put different widgets in the same
+ * hbox without stretching them, even if you don't set align="center".
+ * I.e. prior to the fix that added this patch, having a button and a
+ * menulist in the same hbox next to each other would stretch the menulist
+ * vertically because the button had such a big vertical margin.
+ *
+ * The test works like this: Two widgets are placed in a hbox, and the second
+ * widget is visibility: hidden. In the reference (nostretch-ref.xul), the
+ * second widget is display: none. If test and reference look the same,
+ * adding the second widget hasn't affected the appearance of the first widget,
+ * and everything's fine.
+ * -->
+<window title="Stretched controls test"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        orient="vertical"
+        class="reftest-wait"
+        onload="loaded()">
+
+<html:style><![CDATA[
+.regular {
+  font: -moz-dialog;
+}
+.small {
+  font: message-box;
+}
+.spacer {
+  height: 40px;
+}
+.foreground > :nth-child(2) {
+  visibility: hidden;
+}
+]]>
+</html:style>
+
+<script type="application/javascript;version=1.8"><![CDATA[
+
+function cE(elem) {
+  return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
+}
+function elWithValue(elem, val) {
+  let e = cE(elem);
+  e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
+  return e;
+}
+
+function allPairs(set) {
+  let ps = [];
+  for(let i = 0; i < set.length; ++i) {
+    for (let j = 0; j < set.length; ++j) {
+      if (i != j)
+        ps.push([set[i], set[j]]);
+    }
+  }
+  return ps;
+}
+
+function createLabel(v) {
+  return elWithValue("label", v);
+}
+function createRadio(v) {
+  return elWithValue("radio", v);
+}
+function createCheckbox(v) {
+  return elWithValue("checkbox", v);
+}
+function createButton(v) {
+  return elWithValue("button", v);
+}
+function createTextField(v) {
+  return elWithValue("textbox", v);
+}
+function createMenulist(v) {
+  let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
+  item.setAttribute("selected", "true");
+  popup.appendChild(item);
+  list.appendChild(popup);
+  return list;
+}
+function createEditableMenulist(v) {
+  let list = createMenulist(v);
+  list.setAttribute("editable", "true");
+  return list;
+}
+function loaded() {
+  let template = document.getElementById("template");
+  ["regular", "small"].forEach(function(size) {
+    let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
+    allPairs([
+      createButton, createMenulist, createTextField, createEditableMenulist,
+    ]).forEach(function(elemList) {
+      let newBox = template.cloneNode(true);
+      newBox.className = "spacer";
+      let foregroundRow = newBox.firstChild;
+      elemList.forEach(function(creator) {
+        foregroundRow.appendChild(creator("Label"));
+      });
+      wrapper.appendChild(newBox);
+    });
+  });
+  document.documentElement.className = "";
+}
+
+]]></script>
+    <vbox id="template">
+      <hbox class="foreground"/>
+    </vbox>
+  <hbox id="wrapper">
+    <vbox class="regular" width="500"/>
+    <vbox class="small" flex="1"/>
+  </hbox>
+
+  <spacer flex="1"/>
+
+</window>
diff --git a/toolkit/themes/osx/reftests/radiosize-ref.xul b/toolkit/themes/osx/reftests/radiosize-ref.xul
new file mode 100644
index 000000000..632f39e41
--- /dev/null
+++ b/toolkit/themes/osx/reftests/radiosize-ref.xul
@@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,
+vbox { height: 50px; }
+box {
+  -moz-appearance: radio;
+  margin-left: 2px;
+  margin-top: 1px;
+}
+" type="text/css"?>
+
+<window title="Reference for mini, small and regular radio button sizes"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox>
+    <hbox><box width="11" height="11"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox><box width="13" height="13"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox><box width="16" height="16"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox selected="true"><box width="11" height="11"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox selected="true"><box width="13" height="13"/></hbox>
+  </vbox>
+  <vbox>
+    <hbox selected="true"><box width="16" height="16"/></hbox>
+  </vbox>
+</window>
diff --git a/toolkit/themes/osx/reftests/radiosize.xul b/toolkit/themes/osx/reftests/radiosize.xul
new file mode 100644
index 000000000..44f735db0
--- /dev/null
+++ b/toolkit/themes/osx/reftests/radiosize.xul
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,
+vbox { height: 50px; }
+radio {
+  color: transparent;
+  margin: 0;
+}
+" type="text/css"?>
+
+<window title="Radio buttons with mini, small and regular control font"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox style="font-size: 9px">
+    <hbox><radio label="Mini"/></hbox>
+  </vbox>
+  <vbox style="font: message-box">
+    <hbox><radio label="Small"/></hbox>
+  </vbox>
+  <vbox style="font: -moz-dialog">
+    <hbox><radio label="Regular"/></hbox>
+  </vbox>
+  <vbox style="font-size: 9px">
+    <hbox><radio label="Mini" selected="true"/></hbox>
+  </vbox>
+  <vbox style="font: message-box">
+    <hbox><radio label="Small" selected="true"/></hbox>
+  </vbox>
+  <vbox style="font: -moz-dialog">
+    <hbox><radio label="Regular" selected="true"/></hbox>
+  </vbox>
+</window>
diff --git a/toolkit/themes/osx/reftests/reftest-stylo.list b/toolkit/themes/osx/reftests/reftest-stylo.list
new file mode 100644
index 000000000..82df4273d
--- /dev/null
+++ b/toolkit/themes/osx/reftests/reftest-stylo.list
@@ -0,0 +1,6 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if(!cocoaWidget) == 482681.xul 482681.xul
+skip-if(!cocoaWidget) == radiosize.xul radiosize.xul
+skip-if(!cocoaWidget) == checkboxsize.xul checkboxsize.xul
+skip-if(!cocoaWidget) == baseline.xul baseline.xul
+skip-if(!cocoaWidget) == nostretch.xul nostretch.xul
diff --git a/toolkit/themes/osx/reftests/reftest.list b/toolkit/themes/osx/reftests/reftest.list
new file mode 100644
index 000000000..27034dd86
--- /dev/null
+++ b/toolkit/themes/osx/reftests/reftest.list
@@ -0,0 +1,5 @@
+skip-if(!cocoaWidget) == 482681.xul 482681-ref.xul
+skip-if(!cocoaWidget) == radiosize.xul radiosize-ref.xul
+skip-if(!cocoaWidget) == checkboxsize.xul checkboxsize-ref.xul
+skip-if(!cocoaWidget) == baseline.xul about:blank
+skip-if(!cocoaWidget) == nostretch.xul nostretch-ref.xul