diff options
Diffstat (limited to 'toolkit/themes/osx/reftests/baseline.xul')
| -rw-r--r-- | toolkit/themes/osx/reftests/baseline.xul | 175 |
1 files changed, 175 insertions, 0 deletions
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> |