The Tor Browser / file revision

 <?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>