1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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>
|
