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
|
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="/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 type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"/>
<script type="application/javascript" src="/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();
function dragSplitter(offsetX, callback) {
var splitterWidth = splitter.boxObject.width;
synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"});
synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"});
SimpleTest.executeSoon(function() {
SimpleTest.is(splitter.getAttribute("state"), "dragging", "The splitter should be dragged");
synthesizeMouse(splitter, offsetX, 1, {type: "mousemove"});
synthesizeMouse(splitter, offsetX, 1, {type: "mouseup"});
SimpleTest.executeSoon(callback);
});
}
function shouldBeCollapsed(where) {
SimpleTest.is(splitter.getAttribute("state"), "collapsed", "The splitter should be collapsed");
SimpleTest.is(splitter.getAttribute("substate"), where, "The splitter should be collapsed " + where);
}
function shouldNotBeCollapsed() {
SimpleTest.is(splitter.getAttribute("state"), "", "The splitter should not be collapsed");
}
function runPass(rightCollapsed, leftCollapsed, callback) {
var containerWidth = container.boxObject.width;
var isRTL = getComputedStyle(splitter, null).direction == "rtl";
dragSplitter(containerWidth, function() {
if (rightCollapsed) {
shouldBeCollapsed(isRTL ? "before" : "after");
} else {
shouldNotBeCollapsed();
}
dragSplitter(-containerWidth * 2, function() {
if (leftCollapsed) {
shouldBeCollapsed(isRTL ? "after" : "before");
} else {
shouldNotBeCollapsed();
}
dragSplitter(containerWidth / 2, function() {
// the splitter should never be collapsed in the middle
shouldNotBeCollapsed();
callback();
});
});
});
}
var splitter, container;
function runLTRTests(callback) {
splitter = document.getElementById("ltr-splitter");
container = splitter.parentNode;
splitter.setAttribute("collapse", "before");
runPass(false, true, function() {
splitter.setAttribute("collapse", "after");
runPass(true, false, function() {
splitter.setAttribute("collapse", "both");
runPass(true, true, callback);
});
});
}
function runRTLTests(callback) {
splitter = document.getElementById("rtl-splitter");
container = splitter.parentNode;
splitter.setAttribute("collapse", "before");
runPass(true, false, function() {
splitter.setAttribute("collapse", "after");
runPass(false, true, function() {
splitter.setAttribute("collapse", "both");
runPass(true, true, callback);
});
});
}
function runTests() {
runLTRTests(function() {
runRTLTests(function() {
SimpleTest.finish();
});
});
}
addLoadEvent(function() {SimpleTest.executeSoon(runTests);});
]]></script>
<hbox style="max-width: 200px; height: 300px; direction: ltr;">
<vbox style="width: 100px; height: 300px;" flex="1"/>
<splitter id="ltr-splitter"/>
<vbox style="width: 100px; height: 300px;" flex="1"/>
</hbox>
<hbox style="max-width: 200px; height: 300px; direction: rtl;">
<vbox style="width: 100px; height: 300px;" flex="1"/>
<splitter id="rtl-splitter"/>
<vbox style="width: 100px; height: 300px;" flex="1"/>
</hbox>
</window>
|
