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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=426082
-->
<head>
<title>Test for Bug 426082</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=426082">Mozilla Bug 426082</a>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<p><input type="button" value="Button" id="button"></p>
<p><label for="button" id="label">Label</label></p>
<p id="outside">Something under the label</p>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 426082 **/
function runTests() {
SimpleTest.executeSoon(tests);
}
SimpleTest.waitForFocus(runTests);
function oneTick() {
return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
}
function sendMouseEvent(t, elem) {
let r = elem.getBoundingClientRect();
synthesizeMouse(elem, r.width / 2, r.height / 2, {type: t});
}
async function tests() {
let button = document.getElementById("button");
let label = document.getElementById("label");
let outside = document.getElementById("outside");
let is = window.opener.is;
let ok = window.opener.ok;
// Press the label.
sendMouseEvent("mousemove", label);
sendMouseEvent("mousedown", label);
await oneTick();
ok(label.matches(":hover"), "Label is hovered");
ok(button.matches(":hover"), "Button should be hovered too");
ok(label.matches(":active"), "Label is active");
ok(button.matches(":active"), "Button should be active too");
// Move the mouse down from the label.
sendMouseEvent("mousemove", outside);
await oneTick();
ok(!label.matches(":hover"), "Label is no longer hovered");
ok(!button.matches(":hover"), "Button should not be hovered too");
ok(label.matches(":active"), "Label is still active");
ok(button.matches(":active"), "Button is still active too");
// And up again.
sendMouseEvent("mousemove", label);
await oneTick();
ok(label.matches(":hover"), "Label hovered again");
ok(button.matches(":hover"), "Button be hovered again");
ok(label.matches(":active"), "Label is still active");
ok(button.matches(":active"), "Button is still active too");
// Release.
sendMouseEvent("mouseup", label);
await oneTick();
ok(!label.matches(":active"), "Label is no longer active");
ok(!button.matches(":active"), "Button is no longer active");
ok(label.matches(":hover"), "Label is still hovered");
ok(button.matches(":hover"), "Button is still hovered");
// Press the label and remove it.
sendMouseEvent("mousemove", label);
sendMouseEvent("mousedown", label);
await oneTick();
label.remove();
await oneTick();
ok(!label.matches(":active"), "Removing label should have unpressed it");
ok(!label.matches(":focus"), "Removing label should have unpressed it");
ok(!label.matches(":hover"), "Removing label should have unhovered it");
ok(!button.matches(":active"), "Removing label should have unpressed the button");
ok(!button.matches(":focus"), "Removing label should have unpressed the button");
ok(!button.matches(":hover"), "Removing label should have unhovered the button");
sendMouseEvent("mouseup", label);
window.opener.finishTests();
}
</script>
</pre>
</body>
</html>
|
