The Tor Browser / annotate

toolkit/themes/osx/reftests/baseline.xul@6474c204b198 (annotated)

toolkit/themes/osx/reftests/baseline.xul

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 <?xml version="1.0"?>
michael@0 2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
michael@0 3
michael@0 4 <!--
michael@0 5 * This is a complicated test.
michael@0 6 * XUL authors like to place several different widgets on the same line by
michael@0 7 * putting them in a <hbox align="center">. In order for this to look good,
michael@0 8 * the baselines of the text contained in the widgets should line up.
michael@0 9 * This is what this test is testing.
michael@0 10 * The test passes if it's completely white.
michael@0 11 *
michael@0 12 * It works like this:
michael@0 13 * For every combination of two different widgets (where widget is one of
michael@0 14 * label, radio, checkbox, button, textbox, menulist, menulist[editable="true"] or
michael@0 15 * filefield), there's a stack with two layers. The back layer in the stack is
michael@0 16 * just a vertically centered label with a bunch of underscores. This is the
michael@0 17 * baseline that the text on the widgets should hit.
michael@0 18 * On the foreground layer in the stack we've placed the pair of widgets we're
michael@0 19 * testing. They also have underscores in their labels.
michael@0 20 *
michael@0 21 * Now we want to test whether the underscores in the foreground layer are directly
michael@0 22 * on top of those in the back layer. For that we use color-keying and a tricky
michael@0 23 * SVG color transformation.
michael@0 24 * The back layer of the stack has a red background; the underscores of the
michael@0 25 * back label are in white (and have a white text-shadow in order to fill up the
michael@0 26 * gaps between the individual letters).
michael@0 27 * Now we want the foreground layer to be solid white, except for those pixels
michael@0 28 * that make up the labels: These should be transparent.
michael@0 29 * So if the baselines line up, everything is white, since at those pixels where
michael@0 30 * the foreground is transparent, only the white pixels from the back layer shine
michael@0 31 * through. If the baselines don't line up, red pixels from the background will
michael@0 32 * shine through, and the comparison with about:blank (completely white) will fail.
michael@0 33 *
michael@0 34 * So how do we get the foreground white and transparent? That's the job of the
michael@0 35 * SVG color transformation filter. It's a simple matrix that makes turns opaque
michael@0 36 * yellow into transparent and all other colors into white.
michael@0 37 * -->
michael@0 38
michael@0 39 <window title="Baseline test"
michael@0 40 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0 41 xmlns:html="http://www.w3.org/1999/xhtml"
michael@0 42 xmlns:svg="http://www.w3.org/2000/svg"
michael@0 43 orient="vertical"
michael@0 44 class="reftest-wait"
michael@0 45 onload="loaded()">
michael@0 46
michael@0 47 <html:style><![CDATA[
michael@0 48 window {
michael@0 49 -moz-appearance: none;
michael@0 50 background-color: white;
michael@0 51 }
michael@0 52 .regular {
michael@0 53 font: -moz-dialog;
michael@0 54 }
michael@0 55 .small {
michael@0 56 font: message-box;
michael@0 57 }
michael@0 58 .spacer {
michael@0 59 height: 40px;
michael@0 60 }
michael@0 61 stack > hbox:first-child {
michael@0 62 background: red;
michael@0 63 color: white;
michael@0 64 text-shadow: 5px 0 white, -5px 0 white;
michael@0 65 }
michael@0 66 stack > .foreground {
michael@0 67 filter: url(#yellow2transparent);
michael@0 68 }
michael@0 69 stack > hbox:last-child > * {
michael@0 70 color: yellow;
michael@0 71 }
michael@0 72 ]]>
michael@0 73 </html:style>
michael@0 74
michael@0 75 <svg:svg style="visibility: collapse;">
michael@0 76 <svg:filter id="yellow2transparent" color-interpolation-filters="sRGB">
michael@0 77 <svg:feColorMatrix type="matrix"
michael@0 78 values="0 0 0 0 1
michael@0 79 0 0 0 0 1
michael@0 80 0 0 0 0 1
michael@0 81 -100 -100 100 -100 300"/>
michael@0 82 </svg:filter>
michael@0 83 </svg:svg>
michael@0 84
michael@0 85 <script type="application/javascript;version=1.8"><![CDATA[
michael@0 86
michael@0 87 function cE(elem) {
michael@0 88 return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
michael@0 89 }
michael@0 90 function elWithValue(elem, val) {
michael@0 91 let e = cE(elem);
michael@0 92 e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
michael@0 93 return e;
michael@0 94 }
michael@0 95
michael@0 96 function allPairs(set) {
michael@0 97 let ps = [];
michael@0 98 for(let i = 0; i < set.length; ++i) {
michael@0 99 for (let j = i + 1; j < set.length; ++j) {
michael@0 100 ps.push([set[i], set[j]]);
michael@0 101 }
michael@0 102 }
michael@0 103 return ps;
michael@0 104 }
michael@0 105
michael@0 106 function createLabel(v) elWithValue("label", v)
michael@0 107 function createRadio(v) elWithValue("radio", v)
michael@0 108 function createCheckbox(v) elWithValue("checkbox", v)
michael@0 109 function createButton(v) elWithValue("button", v)
michael@0 110 function createTextField(v) elWithValue("textbox", v)
michael@0 111 function createMenulist(v) {
michael@0 112 let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
michael@0 113 item.setAttribute("selected", "true");
michael@0 114 popup.appendChild(item);
michael@0 115 list.appendChild(popup);
michael@0 116 return list;
michael@0 117 }
michael@0 118 function createEditableMenulist(v) {
michael@0 119 let list = createMenulist(v);
michael@0 120 list.setAttribute("editable", "true");
michael@0 121 return list;
michael@0 122 }
michael@0 123 function createFileField(v) {
michael@0 124 let field = elWithValue("filefield", v);
michael@0 125 field.setAttribute("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrCaTT51nAoFAIBAIBAKB4MoCtVsCPjrGuiwAAAAASUVORK5CYII=");
michael@0 126 return field;
michael@0 127 }
michael@0 128 function loaded() {
michael@0 129 let template = document.getElementById("template");
michael@0 130 ["regular", "small"].forEach(function(size) {
michael@0 131 let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
michael@0 132 allPairs([
michael@0 133 createLabel, createRadio, createCheckbox, createButton, createMenulist, createTextField,
michael@0 134 /* createEditableMenulist, createFileField, */ /* These don't inherit "color" properly */
michael@0 135 ]).forEach(function(elemList) {
michael@0 136 let newBox = template.cloneNode(true);
michael@0 137 newBox.className = "spacer";
michael@0 138 let foregroundRow = newBox.firstChild.lastChild;
michael@0 139 elemList.forEach(function(creator) {
michael@0 140 foregroundRow.appendChild(creator("______"));
michael@0 141 });
michael@0 142 wrapper.appendChild(newBox);
michael@0 143 });
michael@0 144 });
michael@0 145 document.documentElement.className = "";
michael@0 146 }
michael@0 147
michael@0 148 ]]></script>
michael@0 149 <vbox id="template">
michael@0 150 <stack>
michael@0 151 <hbox align="center">
michael@0 152 <label value="______________________________________________"/>
michael@0 153 </hbox>
michael@0 154 <hbox align="center" class="foreground">
michael@0 155 </hbox>
michael@0 156 </stack>
michael@0 157 </vbox>
michael@0 158 <hbox id="wrapper">
michael@0 159 <vbox class="regular" flex="1"/>
michael@0 160 <vbox class="small" flex="1"/>
michael@0 161 </hbox>
michael@0 162
michael@0 163 <spacer flex="1"/>
michael@0 164
michael@0 165 </window>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial