summaryrefslogtreecommitdiffstats
path: root/toolkit/themes/osx/reftests/baseline.xul
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /toolkit/themes/osx/reftests/baseline.xul
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'toolkit/themes/osx/reftests/baseline.xul')
-rw-r--r--toolkit/themes/osx/reftests/baseline.xul175
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>