bug656379-1.html (6036B)
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 src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <script 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 appearance: none; 18 padding: 0; 19 border: none; 20 color: black; 21 background: white; 22 } 23 24 /* Make sure that normal, focused, hover+active, focused+hover+active 25 buttons all have different styles so that the test keeps moving along. */ 26 input[type=button]:hover:active { 27 background: red; 28 } 29 input[type=button]:focus { 30 background: green; 31 } 32 input[type=button]:focus:hover:active { 33 background: purple; 34 } 35 </style> 36 </head> 37 <body> 38 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=656379">Mozilla Bug 656379</a> 39 <p id="display"></p> 40 <div id="content" style="display: none"> 41 42 </div> 43 <pre id="test"> 44 <script type="application/javascript"> 45 46 47 var normalButtonCanvas, pressedButtonCanvas, normalFocusedButtonCanvas, 48 pressedFocusedButtonCanvas, currentSnapshot, button, label, outside; 49 50 function runTests() { 51 button = $("button"); 52 label = $("label"); 53 outside = $("outside"); 54 SimpleTest.executeSoon(executeTests); 55 } 56 57 SimpleTest.waitForFocus(runTests); 58 59 function isRectContainedInRectFromRegion(rect, region) { 60 return Array.prototype.some.call(region, function (r) { 61 return rect.left >= r.left && 62 rect.top >= r.top && 63 rect.right <= r.right && 64 rect.bottom <= r.bottom; 65 }); 66 } 67 68 function paintListener(e) { 69 if (isRectContainedInRectFromRegion(buttonRect(), SpecialPowers.wrap(e).clientRects)) { 70 gNeedsPaint = false; 71 currentSnapshot = takeSnapshot(); 72 } 73 } 74 75 var gNeedsPaint = false; 76 function executeTests() { 77 var testYielder = tests(); 78 function execNext() { 79 if (!gNeedsPaint) { 80 let {done} = testYielder.next(); 81 if (done) { 82 return; 83 } 84 button.getBoundingClientRect(); // Flush. 85 gNeedsPaint = true; 86 } 87 SimpleTest.executeSoon(execNext); 88 } 89 execNext(); 90 } 91 92 function* tests() { 93 window.addEventListener("MozAfterPaint", paintListener); 94 normalButtonCanvas = takeSnapshot(); 95 // Press the button. 96 sendMouseEvent("mousemove", button); 97 sendMouseEvent("mousedown", button); 98 yield undefined; 99 pressedFocusedButtonCanvas = takeSnapshot(); 100 compareSnapshots_(normalButtonCanvas, pressedFocusedButtonCanvas, false, "Pressed focused buttons should look different from normal buttons."); 101 // Release. 102 sendMouseEvent("mouseup", button); 103 yield undefined; 104 // make sure the button is focused as this doesn't happen on click on Mac 105 button.focus(); 106 normalFocusedButtonCanvas = takeSnapshot(); 107 compareSnapshots_(normalFocusedButtonCanvas, pressedFocusedButtonCanvas, false, "Pressed focused buttons should look different from normal focused buttons."); 108 // Unfocus the button. 109 sendMouseEvent("mousedown", outside); 110 sendMouseEvent("mouseup", outside); 111 yield undefined; 112 113 // Press the label. 114 sendMouseEvent("mousemove", label); 115 sendMouseEvent("mousedown", label); 116 yield undefined; 117 compareSnapshots_(normalButtonCanvas, currentSnapshot, false, "Pressing the label should have pressed the button."); 118 pressedButtonCanvas = takeSnapshot(); 119 // Move the mouse down from the label. 120 sendMouseEvent("mousemove", outside); 121 yield undefined; 122 compareSnapshots_(normalButtonCanvas, currentSnapshot, true, "Moving the mouse down from the label should have unpressed the button."); 123 // ... and up again. 124 sendMouseEvent("mousemove", label); 125 yield undefined; 126 compareSnapshots_(pressedButtonCanvas, currentSnapshot, true, "Moving the mouse back on top of the label should have pressed the button."); 127 // Release. 128 sendMouseEvent("mouseup", label); 129 yield undefined; 130 var focusOnMouse = SpecialPowers.getIntPref("accessibility.mouse_focuses_formcontrol") > 0; 131 compareSnapshots_(focusOnMouse ? normalFocusedButtonCanvas : normalButtonCanvas, 132 currentSnapshot, true, "Releasing the mouse over the label should have unpressed" + 133 (focusOnMouse ? " (and focused)" : "") + " the button."); 134 // Press the label and remove it. 135 sendMouseEvent("mousemove", label); 136 sendMouseEvent("mousedown", label); 137 yield undefined; 138 label.remove(); 139 yield undefined; 140 compareSnapshots_(normalButtonCanvas, currentSnapshot, true, "Removing the label should have unpressed the button."); 141 sendMouseEvent("mouseup", label); 142 window.removeEventListener("MozAfterPaint", paintListener); 143 window.opener.finishTests(); 144 } 145 146 function sendMouseEvent(t, elem) { 147 var r = elem.getBoundingClientRect(); 148 synthesizeMouse(elem, r.width / 2, r.height / 2, {type: t}); 149 } 150 151 function compareSnapshots_(c1, c2, shouldBeIdentical, msg) { 152 var [correct, c1url, c2url] = compareSnapshots(c1, c2, shouldBeIdentical); 153 if (correct) { 154 if (shouldBeIdentical) { 155 window.opener.ok(true, msg + " - expected " + c1url); 156 } else { 157 window.opener.ok(true, msg + " - got " + c1url + " and " + c2url); 158 } 159 } else { 160 if (shouldBeIdentical) { 161 window.opener.ok(false, msg + " - expected " + c1url + " but got " + c2url); 162 } else { 163 window.opener.ok(false, msg + " - expected something other than " + c1url); 164 } 165 } 166 } 167 168 function takeSnapshot(canvas) { 169 var r = buttonRect(); 170 adjustedRect = { left: r.left - 2, top: r.top - 2, 171 width: r.width + 4, height: r.height + 4 }; 172 return SpecialPowers.snapshotRect(window, adjustedRect); 173 } 174 175 function buttonRect() { 176 return button.getBoundingClientRect(); 177 } 178 </script> 179 </pre> 180 <p><input type="button" value="Button" id="button"></p> 181 <p><label for="button" id="label">Label</label></p> 182 <p id="outside">Something under the label</p> 183 184 </body> 185 </html>