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
|
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<?xml-stylesheet href="data:text/css, hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?>
<!--
XUL <splitter> collapsing tests
-->
<window title="XUL splitter collapsing tests"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
orient="horizontal">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
<!-- test results are displayed in the html:body -->
<body xmlns="http://www.w3.org/1999/xhtml">
</body>
<!-- test code goes here -->
<script type="application/javascript"><![CDATA[
SimpleTest.waitForExplicitFinish();
async function dragSplitter(offsetX) {
info(`Dragging splitter ${splitter.id} to ${offsetX}`);
const splitterRect = splitter.getBoundingClientRect();
const splitterWidth = splitterRect.width;
synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"});
synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"});
await new Promise(SimpleTest.executeSoon);
is(splitter.getAttribute("state"), "dragging", "The splitter should be dragged");
synthesizeMouse(splitter, offsetX, 1, {type: "mousemove"});
synthesizeMouse(splitter, offsetX, 1, {type: "mouseup"});
await new Promise(SimpleTest.executeSoon);
const newSplitterRect = splitter.getBoundingClientRect();
is(
offsetX > 0,
newSplitterRect.left > splitterRect.left,
`Should move in the right direction ${splitterRect.left} -> ${newSplitterRect.left}, ${offsetX}`
);
}
function shouldBeCollapsed(where) {
is(splitter.getAttribute("state"), "collapsed", "The splitter should be collapsed");
is(splitter.getAttribute("substate"), where, "The splitter should be collapsed " + where);
}
function shouldNotBeCollapsed() {
is(splitter.getAttribute("state"), "", "The splitter should not be collapsed");
}
async function runPass(isRTL, rightCollapsed, leftCollapsed) {
const containerWidth = splitter.parentNode.getBoundingClientRect().width;
await dragSplitter(containerWidth);
if (rightCollapsed) {
shouldBeCollapsed(isRTL ? "before" : "after");
} else {
shouldNotBeCollapsed();
}
await dragSplitter(-containerWidth * 2);
if (leftCollapsed) {
shouldBeCollapsed(isRTL ? "after" : "before");
} else {
shouldNotBeCollapsed();
}
await dragSplitter(containerWidth / 2);
// the splitter should never be collapsed in the middle
shouldNotBeCollapsed();
}
var splitter;
var activeBox = null;
function setActiveBox(element) {
if (activeBox) {
activeBox.style.display = "none";
}
if (element) {
element.style.display = "";
element.getBoundingClientRect();
}
activeBox = element;
}
async function runTests(rtl, splitterId) {
info(`Running tests for ${splitterId}`);
splitter = document.getElementById(splitterId);
setActiveBox(splitter.parentNode);
await runPass(rtl, false, false);
splitter.setAttribute("collapse", "before");
await runPass(rtl, rtl, !rtl);
splitter.setAttribute("collapse", "after");
await runPass(rtl, !rtl, rtl);
splitter.setAttribute("collapse", "both");
await runPass(rtl, true, true);
}
async function runAllTests() {
await runTests(false, "ltr-splitter");
await runTests(true, "rtl-splitter");
await runTests(false, "ltr-flex-splitter");
await runTests(true, "rtl-flex-splitter");
SimpleTest.finish();
}
addLoadEvent(function() {SimpleTest.executeSoon(runAllTests);});
]]></script>
<hbox style="display: none; width: 200px; height: 300px; direction: ltr;">
<vbox style="height: 300px;" flex="1"/>
<splitter id="ltr-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
</hbox>
<hbox style="display: none; width: 200px; height: 300px; direction: rtl;">
<vbox style="height: 300px;" flex="1"/>
<splitter id="rtl-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
</hbox>
<hbox style="display: none; width: 200px; height: 300px; direction: ltr; -moz-box-layout: flex">
<vbox style="height: 300px;" flex="1"/>
<splitter id="ltr-flex-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
</hbox>
<hbox style="display: none; width: 200px; height: 300px; direction: rtl; -moz-box-layout: flex">
<vbox style="height: 300px;" flex="1"/>
<splitter id="rtl-flex-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
</hbox>
</window>
|
