Issue #1829 - Revert "Issue #1751"

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>