gecko/toolkit/themes/pinstripe/reftests/baseline.xul

<?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) elWithValue("label", v)
function createRadio(v) elWithValue("radio", v)
function createCheckbox(v) elWithValue("checkbox", v)
function createButton(v) elWithValue("button", v)
function createTextField(v) 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>