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
|
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<!--
* This test tests whether you can put different widgets in the same
* hbox without stretching them, even if you don't set align="center".
* I.e. prior to the fix that added this patch, having a button and a
* menulist in the same hbox next to each other would stretch the menulist
* vertically because the button had such a big vertical margin.
*
* The test works like this: Two widgets are placed in a hbox, and the second
* widget is visibility: hidden. In the reference (nostretch-ref.xul), the
* second widget is display: none. If test and reference look the same,
* adding the second widget hasn't affected the appearance of the first widget,
* and everything's fine.
* -->
<window title="Stretched controls 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[
.regular {
font: -moz-dialog;
}
.small {
font: message-box;
}
.spacer {
height: 40px;
}
.foreground > :nth-child(2) {
visibility: hidden;
}
]]>
</html:style>
<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 = 0; j < set.length; ++j) {
if (i != 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 loaded() {
let template = document.getElementById("template");
["regular", "small"].forEach(function(size) {
let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
allPairs([
createButton, createMenulist, createTextField, createEditableMenulist,
]).forEach(function(elemList) {
let newBox = template.cloneNode(true);
newBox.className = "spacer";
let foregroundRow = newBox.firstChild;
elemList.forEach(function(creator) {
foregroundRow.appendChild(creator("Label"));
});
wrapper.appendChild(newBox);
});
});
document.documentElement.className = "";
}
]]></script>
<vbox id="template">
<hbox class="foreground"/>
</vbox>
<hbox id="wrapper">
<vbox class="regular" width="500"/>
<vbox class="small" flex="1"/>
</hbox>
<spacer flex="1"/>
</window>
|
