1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/themes/osx/reftests/baseline.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,165 @@
1.4 +<?xml version="1.0"?>
1.5 +<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
1.6 +
1.7 +<!--
1.8 + * This is a complicated test.
1.9 + * XUL authors like to place several different widgets on the same line by
1.10 + * putting them in a <hbox align="center">. In order for this to look good,
1.11 + * the baselines of the text contained in the widgets should line up.
1.12 + * This is what this test is testing.
1.13 + * The test passes if it's completely white.
1.14 + *
1.15 + * It works like this:
1.16 + * For every combination of two different widgets (where widget is one of
1.17 + * label, radio, checkbox, button, textbox, menulist, menulist[editable="true"] or
1.18 + * filefield), there's a stack with two layers. The back layer in the stack is
1.19 + * just a vertically centered label with a bunch of underscores. This is the
1.20 + * baseline that the text on the widgets should hit.
1.21 + * On the foreground layer in the stack we've placed the pair of widgets we're
1.22 + * testing. They also have underscores in their labels.
1.23 + *
1.24 + * Now we want to test whether the underscores in the foreground layer are directly
1.25 + * on top of those in the back layer. For that we use color-keying and a tricky
1.26 + * SVG color transformation.
1.27 + * The back layer of the stack has a red background; the underscores of the
1.28 + * back label are in white (and have a white text-shadow in order to fill up the
1.29 + * gaps between the individual letters).
1.30 + * Now we want the foreground layer to be solid white, except for those pixels
1.31 + * that make up the labels: These should be transparent.
1.32 + * So if the baselines line up, everything is white, since at those pixels where
1.33 + * the foreground is transparent, only the white pixels from the back layer shine
1.34 + * through. If the baselines don't line up, red pixels from the background will
1.35 + * shine through, and the comparison with about:blank (completely white) will fail.
1.36 + *
1.37 + * So how do we get the foreground white and transparent? That's the job of the
1.38 + * SVG color transformation filter. It's a simple matrix that makes turns opaque
1.39 + * yellow into transparent and all other colors into white.
1.40 + * -->
1.41 +
1.42 +<window title="Baseline test"
1.43 + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
1.44 + xmlns:html="http://www.w3.org/1999/xhtml"
1.45 + xmlns:svg="http://www.w3.org/2000/svg"
1.46 + orient="vertical"
1.47 + class="reftest-wait"
1.48 + onload="loaded()">
1.49 +
1.50 +<html:style><![CDATA[
1.51 +window {
1.52 + -moz-appearance: none;
1.53 + background-color: white;
1.54 +}
1.55 +.regular {
1.56 + font: -moz-dialog;
1.57 +}
1.58 +.small {
1.59 + font: message-box;
1.60 +}
1.61 +.spacer {
1.62 + height: 40px;
1.63 +}
1.64 +stack > hbox:first-child {
1.65 + background: red;
1.66 + color: white;
1.67 + text-shadow: 5px 0 white, -5px 0 white;
1.68 +}
1.69 +stack > .foreground {
1.70 + filter: url(#yellow2transparent);
1.71 +}
1.72 +stack > hbox:last-child > * {
1.73 + color: yellow;
1.74 +}
1.75 +]]>
1.76 +</html:style>
1.77 +
1.78 + <svg:svg style="visibility: collapse;">
1.79 + <svg:filter id="yellow2transparent" color-interpolation-filters="sRGB">
1.80 + <svg:feColorMatrix type="matrix"
1.81 + values="0 0 0 0 1
1.82 + 0 0 0 0 1
1.83 + 0 0 0 0 1
1.84 + -100 -100 100 -100 300"/>
1.85 + </svg:filter>
1.86 + </svg:svg>
1.87 +
1.88 +<script type="application/javascript;version=1.8"><![CDATA[
1.89 +
1.90 +function cE(elem) {
1.91 + return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
1.92 +}
1.93 +function elWithValue(elem, val) {
1.94 + let e = cE(elem);
1.95 + e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
1.96 + return e;
1.97 +}
1.98 +
1.99 +function allPairs(set) {
1.100 + let ps = [];
1.101 + for(let i = 0; i < set.length; ++i) {
1.102 + for (let j = i + 1; j < set.length; ++j) {
1.103 + ps.push([set[i], set[j]]);
1.104 + }
1.105 + }
1.106 + return ps;
1.107 +}
1.108 +
1.109 +function createLabel(v) elWithValue("label", v)
1.110 +function createRadio(v) elWithValue("radio", v)
1.111 +function createCheckbox(v) elWithValue("checkbox", v)
1.112 +function createButton(v) elWithValue("button", v)
1.113 +function createTextField(v) elWithValue("textbox", v)
1.114 +function createMenulist(v) {
1.115 + let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
1.116 + item.setAttribute("selected", "true");
1.117 + popup.appendChild(item);
1.118 + list.appendChild(popup);
1.119 + return list;
1.120 +}
1.121 +function createEditableMenulist(v) {
1.122 + let list = createMenulist(v);
1.123 + list.setAttribute("editable", "true");
1.124 + return list;
1.125 +}
1.126 +function createFileField(v) {
1.127 + let field = elWithValue("filefield", v);
1.128 + field.setAttribute("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrCaTT51nAoFAIBAIBAKB4MoCtVsCPjrGuiwAAAAASUVORK5CYII=");
1.129 + return field;
1.130 +}
1.131 +function loaded() {
1.132 + let template = document.getElementById("template");
1.133 + ["regular", "small"].forEach(function(size) {
1.134 + let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
1.135 + allPairs([
1.136 + createLabel, createRadio, createCheckbox, createButton, createMenulist, createTextField,
1.137 + /* createEditableMenulist, createFileField, */ /* These don't inherit "color" properly */
1.138 + ]).forEach(function(elemList) {
1.139 + let newBox = template.cloneNode(true);
1.140 + newBox.className = "spacer";
1.141 + let foregroundRow = newBox.firstChild.lastChild;
1.142 + elemList.forEach(function(creator) {
1.143 + foregroundRow.appendChild(creator("______"));
1.144 + });
1.145 + wrapper.appendChild(newBox);
1.146 + });
1.147 + });
1.148 + document.documentElement.className = "";
1.149 +}
1.150 +
1.151 +]]></script>
1.152 + <vbox id="template">
1.153 + <stack>
1.154 + <hbox align="center">
1.155 + <label value="______________________________________________"/>
1.156 + </hbox>
1.157 + <hbox align="center" class="foreground">
1.158 + </hbox>
1.159 + </stack>
1.160 + </vbox>
1.161 + <hbox id="wrapper">
1.162 + <vbox class="regular" flex="1"/>
1.163 + <vbox class="small" flex="1"/>
1.164 + </hbox>
1.165 +
1.166 + <spacer flex="1"/>
1.167 +
1.168 +</window>
