michael@0: <?xml version="1.0"?>
michael@0: <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
michael@0: 
michael@0: <!--
michael@0:  * This is a complicated test.
michael@0:  * XUL authors like to place several different widgets on the same line by
michael@0:  * putting them in a <hbox align="center">. In order for this to look good,
michael@0:  * the baselines of the text contained in the widgets should line up.
michael@0:  * This is what this test is testing.
michael@0:  * The test passes if it's completely white.
michael@0:  *
michael@0:  * It works like this:
michael@0:  * For every combination of two different widgets (where widget is one of
michael@0:  * label, radio, checkbox, button, textbox, menulist, menulist[editable="true"] or
michael@0:  * filefield), there's a stack with two layers. The back layer in the stack is
michael@0:  * just a vertically centered label with a bunch of underscores. This is the
michael@0:  * baseline that the text on the widgets should hit.
michael@0:  * On the foreground layer in the stack we've placed the pair of widgets we're
michael@0:  * testing. They also have underscores in their labels.
michael@0:  *
michael@0:  * Now we want to test whether the underscores in the foreground layer are directly
michael@0:  * on top of those in the back layer. For that we use color-keying and a tricky
michael@0:  * SVG color transformation.
michael@0:  * The back layer of the stack has a red background; the underscores of the
michael@0:  * back label are in white (and have a white text-shadow in order to fill up the
michael@0:  * gaps between the individual letters).
michael@0:  * Now we want the foreground layer to be solid white, except for those pixels
michael@0:  * that make up the labels: These should be transparent.
michael@0:  * So if the baselines line up, everything is white, since at those pixels where
michael@0:  * the foreground is transparent, only the white pixels from the back layer shine
michael@0:  * through. If the baselines don't line up, red pixels from the background will
michael@0:  * shine through, and the comparison with about:blank (completely white) will fail.
michael@0:  *
michael@0:  * So how do we get the foreground white and transparent? That's the job of the
michael@0:  * SVG color transformation filter. It's a simple matrix that makes turns opaque
michael@0:  * yellow into transparent and all other colors into white.
michael@0:  * -->
michael@0: 
michael@0: <window title="Baseline test"
michael@0:         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0:         xmlns:html="http://www.w3.org/1999/xhtml"
michael@0:         xmlns:svg="http://www.w3.org/2000/svg"
michael@0:         orient="vertical"
michael@0:         class="reftest-wait"
michael@0:         onload="loaded()">
michael@0: 
michael@0: <html:style><![CDATA[
michael@0: window {
michael@0:   -moz-appearance: none;
michael@0:   background-color: white;
michael@0: }
michael@0: .regular {
michael@0:   font: -moz-dialog;
michael@0: }
michael@0: .small {
michael@0:   font: message-box;
michael@0: }
michael@0: .spacer {
michael@0:   height: 40px;
michael@0: }
michael@0: stack > hbox:first-child {
michael@0:   background: red;
michael@0:   color: white;
michael@0:   text-shadow: 5px 0 white, -5px 0 white;
michael@0: }
michael@0: stack > .foreground {
michael@0:   filter: url(#yellow2transparent);
michael@0: }
michael@0: stack > hbox:last-child > * {
michael@0:   color: yellow;
michael@0: }
michael@0: ]]>
michael@0: </html:style>
michael@0: 
michael@0:   <svg:svg style="visibility: collapse;">
michael@0:     <svg:filter id="yellow2transparent" color-interpolation-filters="sRGB">
michael@0:       <svg:feColorMatrix type="matrix"
michael@0:            values="0 0 0 0 1
michael@0:                    0 0 0 0 1
michael@0:                    0 0 0 0 1
michael@0:                    -100 -100 100 -100 300"/>
michael@0:     </svg:filter>
michael@0:   </svg:svg>
michael@0: 
michael@0: <script type="application/javascript;version=1.8"><![CDATA[
michael@0: 
michael@0: function cE(elem) {
michael@0:   return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
michael@0: }
michael@0: function elWithValue(elem, val) {
michael@0:   let e = cE(elem);
michael@0:   e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
michael@0:   return e;
michael@0: }
michael@0: 
michael@0: function allPairs(set) {
michael@0:   let ps = [];
michael@0:   for(let i = 0; i < set.length; ++i) {
michael@0:     for (let j = i + 1; j < set.length; ++j) {
michael@0:       ps.push([set[i], set[j]]);
michael@0:     }
michael@0:   }
michael@0:   return ps;
michael@0: }
michael@0: 
michael@0: function createLabel(v) elWithValue("label", v)
michael@0: function createRadio(v) elWithValue("radio", v)
michael@0: function createCheckbox(v) elWithValue("checkbox", v)
michael@0: function createButton(v) elWithValue("button", v)
michael@0: function createTextField(v) elWithValue("textbox", v)
michael@0: function createMenulist(v) {
michael@0:   let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
michael@0:   item.setAttribute("selected", "true");
michael@0:   popup.appendChild(item);
michael@0:   list.appendChild(popup);
michael@0:   return list;
michael@0: }
michael@0: function createEditableMenulist(v) {
michael@0:   let list = createMenulist(v);
michael@0:   list.setAttribute("editable", "true");
michael@0:   return list;
michael@0: }
michael@0: function createFileField(v) {
michael@0:   let field = elWithValue("filefield", v);
michael@0:   field.setAttribute("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrCaTT51nAoFAIBAIBAKB4MoCtVsCPjrGuiwAAAAASUVORK5CYII=");
michael@0:   return field;
michael@0: }
michael@0: function loaded() {
michael@0:   let template = document.getElementById("template");
michael@0:   ["regular", "small"].forEach(function(size) {
michael@0:     let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
michael@0:     allPairs([
michael@0:       createLabel, createRadio, createCheckbox, createButton, createMenulist, createTextField,
michael@0:        /* createEditableMenulist, createFileField, */ /* These don't inherit "color" properly */
michael@0:     ]).forEach(function(elemList) {
michael@0:       let newBox = template.cloneNode(true);
michael@0:       newBox.className = "spacer";
michael@0:       let foregroundRow = newBox.firstChild.lastChild;
michael@0:       elemList.forEach(function(creator) {
michael@0:         foregroundRow.appendChild(creator("______"));
michael@0:       });
michael@0:       wrapper.appendChild(newBox);
michael@0:     });
michael@0:   });
michael@0:   document.documentElement.className = "";
michael@0: }
michael@0: 
michael@0: ]]></script>
michael@0:     <vbox id="template">
michael@0:       <stack>
michael@0:         <hbox align="center">
michael@0:           <label value="______________________________________________"/>
michael@0:         </hbox>
michael@0:         <hbox align="center" class="foreground">
michael@0:         </hbox>
michael@0:       </stack>
michael@0:     </vbox>
michael@0:   <hbox id="wrapper">
michael@0:     <vbox class="regular" flex="1"/>
michael@0:     <vbox class="small" flex="1"/>
michael@0:   </hbox>
michael@0: 
michael@0:   <spacer flex="1"/>
michael@0: 
michael@0: </window>