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