dom/events/test/bug656379-1.html@b8a032363ba2
dom/events/test/bug656379-1.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=656379
5 -->
6 <head>
7 <title>Test for Bug 656379</title>
8 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
9 <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
10 <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
12 <style>
13 canvas {
14 display: none;
15 }
16 input[type=button] {
17 -moz-appearance: none;
18 padding: 0;
19 border: none;
20 color: black;
21 background: white;
22 }
23 input[type=button]::-moz-focus-inner { border: none; }
25 /* Make sure that normal, focused, hover+active, focused+hover+active
26 buttons all have different styles so that the test keeps moving along. */
27 input[type=button]:hover:active {
28 background: red;
29 }
30 input[type=button]:focus {
31 background: green;
32 }
33 input[type=button]:focus:hover:active {
34 background: purple;
35 }
36 </style>
37 </head>
38 <body onload="runTests()">
39 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=656379">Mozilla Bug 656379</a>
40 <p id="display"></p>
41 <div id="content" style="display: none">
43 </div>
44 <pre id="test">
45 <script type="application/javascript;version=1.8">
48 var normalButtonCanvas, pressedButtonCanvas, normalFocusedButtonCanvas,
49 pressedFocusedButtonCanvas, currentSnapshot, button, label, outside;
51 function runTests() {
52 button = $("button");
53 label = $("label");
54 outside = $("outside");
55 SimpleTest.executeSoon(executeTests);
56 }
58 function isRectContainedInRectFromRegion(rect, region) {
59 return Array.some(region, function (r) {
60 return rect.left >= r.left &&
61 rect.top >= r.top &&
62 rect.right <= r.right &&
63 rect.bottom <= r.bottom;
64 });
65 }
67 function paintListener(e) {
68 if (isRectContainedInRectFromRegion(buttonRect(), SpecialPowers.wrap(e).clientRects)) {
69 gNeedsPaint = false;
70 currentSnapshot = takeSnapshot();
71 }
72 }
74 var gNeedsPaint = false;
75 function executeTests() {
76 var testYielder = tests();
77 function execNext() {
78 try {
79 if (!gNeedsPaint) {
80 testYielder.next();
81 button.getBoundingClientRect(); // Flush.
82 gNeedsPaint = true;
83 }
84 SimpleTest.executeSoon(execNext);
85 } catch (e) {}
86 }
87 execNext();
88 }
90 function tests() {
91 window.addEventListener("MozAfterPaint", paintListener, false);
92 normalButtonCanvas = takeSnapshot();
93 // Press the button.
94 sendMouseEvent("mousemove", button);
95 sendMouseEvent("mousedown", button);
96 yield undefined;
97 pressedFocusedButtonCanvas = takeSnapshot();
98 compareSnapshots_(normalButtonCanvas, pressedFocusedButtonCanvas, false, "Pressed focused buttons should look different from normal buttons.");
99 // Release.
100 sendMouseEvent("mouseup", button);
101 yield undefined;
102 // make sure the button is focused as this doesn't happen on click on Mac
103 button.focus();
104 normalFocusedButtonCanvas = takeSnapshot();
105 compareSnapshots_(normalFocusedButtonCanvas, pressedFocusedButtonCanvas, false, "Pressed focused buttons should look different from normal focused buttons.");
106 // Unfocus the button.
107 sendMouseEvent("mousedown", outside);
108 sendMouseEvent("mouseup", outside);
109 yield undefined;
111 // Press the label.
112 sendMouseEvent("mousemove", label);
113 sendMouseEvent("mousedown", label);
114 yield undefined;
115 compareSnapshots_(normalButtonCanvas, currentSnapshot, false, "Pressing the label should have pressed the button.");
116 pressedButtonCanvas = takeSnapshot();
117 // Move the mouse down from the label.
118 sendMouseEvent("mousemove", outside);
119 yield undefined;
120 compareSnapshots_(normalButtonCanvas, currentSnapshot, true, "Moving the mouse down from the label should have unpressed the button.");
121 // ... and up again.
122 sendMouseEvent("mousemove", label);
123 yield undefined;
124 compareSnapshots_(pressedButtonCanvas, currentSnapshot, true, "Moving the mouse back on top of the label should have pressed the button.");
125 // Release.
126 sendMouseEvent("mouseup", label);
127 yield undefined;
128 compareSnapshots_(normalFocusedButtonCanvas, currentSnapshot, true, "Releasing the mouse over the label should have unpressed (and focused) the button.");
129 // Press the label and remove it.
130 sendMouseEvent("mousemove", label);
131 sendMouseEvent("mousedown", label);
132 yield undefined;
133 label.parentNode.removeChild(label);
134 yield undefined;
135 compareSnapshots_(normalButtonCanvas, currentSnapshot, true, "Removing the label should have unpressed the button.");
136 sendMouseEvent("mouseup", label);
137 window.removeEventListener("MozAfterPaint", paintListener, false);
138 window.opener.finishTests();
139 }
141 function sendMouseEvent(t, elem) {
142 var r = elem.getBoundingClientRect();
143 synthesizeMouse(elem, r.width / 2, r.height / 2, {type: t});
144 }
146 function compareSnapshots_(c1, c2, shouldBeIdentical, msg) {
147 var [correct, c1url, c2url] = compareSnapshots(c1, c2, shouldBeIdentical);
148 if (correct) {
149 if (shouldBeIdentical) {
150 window.opener.ok(true, msg + " - expected " + c1url);
151 } else {
152 window.opener.ok(true, msg + " - got " + c1url + " and " + c2url);
153 }
154 } else {
155 if (shouldBeIdentical) {
156 window.opener.ok(false, msg + " - expected " + c1url + " but got " + c2url);
157 } else {
158 window.opener.ok(false, msg + " - expected something other than " + c1url);
159 }
160 }
161 }
163 function takeSnapshot(canvas) {
164 var r = buttonRect();
165 adjustedRect = { left: r.left - 2, top: r.top - 2,
166 width: r.width + 4, height: r.height + 4 };
167 return SpecialPowers.snapshotRect(window, adjustedRect);
168 }
170 function buttonRect() {
171 return button.getBoundingClientRect();
172 }
173 </script>
174 </pre>
175 <p><input type="button" value="Button" id="button"></p>
176 <p><label for="button" id="label">Label</label></p>
177 <p id="outside">Something under the label</p>
179 </body>
180 </html>
