bug426082.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <!DOCTYPE HTML>
  2. <html>
  3. <!--
  4. https://bugzilla.mozilla.org/show_bug.cgi?id=426082
  5. -->
  6. <head>
  7. <title>Test for Bug 426082</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. </style>
  17. </head>
  18. <body>
  19. <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=426082">Mozilla Bug 426082</a>
  20. <p id="display"></p>
  21. <div id="content" style="display: none">
  22. </div>
  23. <p><input type="button" value="Button" id="button"></p>
  24. <p><label for="button" id="label">Label</label></p>
  25. <p id="outside">Something under the label</p>
  26. <pre id="test">
  27. <script type="application/javascript;version=1.8">
  28. /** Test for Bug 426082 **/
  29. var normalButtonCanvas, pressedButtonCanvas, normalFocusedButtonCanvas,
  30. pressedFocusedButtonCanvas, currentSnapshot, button, label, outside;
  31. function runTests() {
  32. button = $("button");
  33. label = $("label");
  34. outside = $("outside");
  35. SimpleTest.executeSoon(executeTests);
  36. }
  37. SimpleTest.waitForFocus(runTests);
  38. function isRectContainedInRectFromRegion(rect, region) {
  39. return Array.some(region, function (r) {
  40. return rect.left >= r.left &&
  41. rect.top >= r.top &&
  42. rect.right <= r.right &&
  43. rect.bottom <= r.bottom;
  44. });
  45. }
  46. function paintListener(e) {
  47. if (isRectContainedInRectFromRegion(buttonRect(), SpecialPowers.wrap(e).clientRects)) {
  48. gNeedsPaint = false;
  49. currentSnapshot = takeSnapshot();
  50. }
  51. }
  52. var gNeedsPaint = false;
  53. function executeTests() {
  54. var testYielder = tests();
  55. function execNext() {
  56. try {
  57. if (!gNeedsPaint) {
  58. testYielder.next();
  59. button.getBoundingClientRect(); // Flush.
  60. gNeedsPaint = true;
  61. }
  62. SimpleTest.executeSoon(execNext);
  63. } catch (e) {}
  64. }
  65. execNext();
  66. }
  67. function tests() {
  68. window.addEventListener("MozAfterPaint", paintListener, false);
  69. normalButtonCanvas = takeSnapshot();
  70. // Press the button.
  71. sendMouseEvent("mousemove", button);
  72. sendMouseEvent("mousedown", button);
  73. yield undefined;
  74. pressedFocusedButtonCanvas = takeSnapshot();
  75. compareSnapshots_(normalButtonCanvas, pressedFocusedButtonCanvas, false, "Pressed focused buttons should look different from normal buttons.");
  76. // Release.
  77. sendMouseEvent("mouseup", button);
  78. yield undefined;
  79. // make sure the button is focused as this doesn't happen on click on Mac
  80. button.focus();
  81. normalFocusedButtonCanvas = takeSnapshot();
  82. compareSnapshots_(normalFocusedButtonCanvas, pressedFocusedButtonCanvas, false, "Pressed focused buttons should look different from normal focused buttons.");
  83. // Unfocus the button.
  84. sendMouseEvent("mousedown", outside);
  85. sendMouseEvent("mouseup", outside);
  86. yield undefined;
  87. // Press the label.
  88. sendMouseEvent("mousemove", label);
  89. sendMouseEvent("mousedown", label);
  90. yield undefined;
  91. compareSnapshots_(normalButtonCanvas, currentSnapshot, false, "Pressing the label should have pressed the button.");
  92. pressedButtonCanvas = takeSnapshot();
  93. // Move the mouse down from the label.
  94. sendMouseEvent("mousemove", outside);
  95. yield undefined;
  96. compareSnapshots_(normalButtonCanvas, currentSnapshot, true, "Moving the mouse down from the label should have unpressed the button.");
  97. // ... and up again.
  98. sendMouseEvent("mousemove", label);
  99. yield undefined;
  100. compareSnapshots_(pressedButtonCanvas, currentSnapshot, true, "Moving the mouse back on top of the label should have pressed the button.");
  101. // Release.
  102. sendMouseEvent("mouseup", label);
  103. yield undefined;
  104. var focusOnMouse = (navigator.platform.indexOf("Mac") != 0);
  105. compareSnapshots_(focusOnMouse ? normalFocusedButtonCanvas : normalButtonCanvas,
  106. currentSnapshot, true, "Releasing the mouse over the label should have unpressed" +
  107. (focusOnMouse ? " (and focused)" : "") + " the button.");
  108. // Press the label and remove it.
  109. sendMouseEvent("mousemove", label);
  110. sendMouseEvent("mousedown", label);
  111. yield undefined;
  112. label.parentNode.removeChild(label);
  113. yield undefined;
  114. compareSnapshots_(normalButtonCanvas, currentSnapshot, true, "Removing the label should have unpressed the button.");
  115. sendMouseEvent("mouseup", label);
  116. window.removeEventListener("MozAfterPaint", paintListener, false);
  117. window.opener.finishTests();
  118. }
  119. function sendMouseEvent(t, elem) {
  120. var r = elem.getBoundingClientRect();
  121. synthesizeMouse(elem, r.width / 2, r.height / 2, {type: t});
  122. }
  123. function compareSnapshots_(c1, c2, shouldBeIdentical, msg) {
  124. var [correct, c1url, c2url] = compareSnapshots(c1, c2, shouldBeIdentical);
  125. if (correct) {
  126. if (shouldBeIdentical) {
  127. window.opener.ok(true, msg + " - expected " + c1url);
  128. } else {
  129. window.opener.ok(true, msg + " - got " + c1url + " and " + c2url);
  130. }
  131. } else {
  132. if (shouldBeIdentical) {
  133. window.opener.ok(false, msg + " - expected " + c1url + " but got " + c2url);
  134. } else {
  135. window.opener.ok(false, msg + " - expected something other than " + c1url);
  136. }
  137. }
  138. }
  139. function takeSnapshot() {
  140. var r = buttonRect();
  141. adjustedRect = { left: r.left - 2, top: r.top - 2,
  142. width: r.width + 4, height: r.height + 4 };
  143. return SpecialPowers.snapshotRect(window, adjustedRect);
  144. }
  145. function buttonRect() {
  146. return button.getBoundingClientRect();
  147. }
  148. </script>
  149. </pre>
  150. </body>
  151. </html>