test_clickevent_on_input.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Test click event on input</title>
  5. <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  6. <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  7. <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  8. </head>
  9. <body>
  10. <p id="display">
  11. <input id="input"
  12. style="position: absolute; top: 5px; left: 5px; border: solid 15px blue; width: 100px; height: 20px;"
  13. onclick="gClickCount++;">
  14. </p>
  15. <div id="content" style="display: none">
  16. </div>
  17. <pre id="test">
  18. <script type="application/javascript">
  19. var gClickCount = 0;
  20. SimpleTest.waitForExplicitFinish();
  21. SimpleTest.waitForFocus(runTests);
  22. var input = document.getElementById("input");
  23. function runTests()
  24. {
  25. for (var i = 0; i < 3; i++) {
  26. doTest(i);
  27. }
  28. // Re-test left clicking when the input element has some text.
  29. gClickCount = 0;
  30. input.value = "Long text Long text Long text Long text Long text Long text";
  31. doTest(0);
  32. input.style.display = "none";
  33. SimpleTest.finish();
  34. }
  35. function isEnabledMiddleClickPaste()
  36. {
  37. try {
  38. return SpecialPowers.getBoolPref("middlemouse.paste");
  39. } catch (e) {
  40. return false;
  41. }
  42. }
  43. function isEnabledAccessibleCaret()
  44. {
  45. try {
  46. return SpecialPowers.getBoolPref("layout.accessiblecaret.enabled");
  47. } catch (e) {
  48. return false;
  49. }
  50. }
  51. function doTest(aButton)
  52. {
  53. // NOTE #1: Right click causes a context menu to popup, then, the click event
  54. // isn't generated.
  55. // NOTE #2: If middle click causes text to be pasted, then, the click event
  56. // isn't generated.
  57. // NOTE #3: If touch caret is enabled, touch caret would ovelap input element,
  58. // then, the click event isn't generated.
  59. if (aButton != 2 &&
  60. (aButton != 1 || !isEnabledMiddleClickPaste()) &&
  61. (aButton != 0 || !isEnabledAccessibleCaret())) {
  62. gClickCount = 0;
  63. // click on border of input
  64. synthesizeMouse(input, 5, 5, { button: aButton });
  65. is(gClickCount, 1,
  66. "click event doesn't fired on input element (button is " +
  67. aButton + ")");
  68. gClickCount = 0;
  69. // down on border
  70. synthesizeMouse(input, 5, 5, { type: "mousedown", button: aButton });
  71. // up on anonymous div of input
  72. synthesizeMouse(input, 20, 20, { type: "mouseup", button: aButton });
  73. is(gClickCount, 1,
  74. "click event doesn't fired on input element (button is " +
  75. aButton + ")");
  76. gClickCount = 0;
  77. // down on anonymous div of input
  78. synthesizeMouse(input, 20, 20, { type: "mousedown", button: aButton });
  79. // up on border
  80. synthesizeMouse(input, 5, 5, { type: "mouseup", button: aButton });
  81. is(gClickCount, 1,
  82. "click event doesn't fired on input element (button is " +
  83. aButton + ")");
  84. }
  85. gClickCount = 0;
  86. // down on outside of input
  87. synthesizeMouse(input, -3, -3, { type: "mousedown", button: aButton });
  88. // up on border
  89. synthesizeMouse(input, 5, 5, { type: "mouseup", button: aButton });
  90. is(gClickCount, 0,
  91. "click event is fired on input element unexpectedly (button is " +
  92. aButton + ")");
  93. }
  94. </script>
  95. </pre>
  96. </body>
  97. </html>