pointerevent_element_haspointercapture-manual.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Element.hasPointerCapture test</title>
  5. <meta name="viewport" content="width=device-width">
  6. <link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
  7. <script src="/resources/testharness.js"></script>
  8. <!--script src="/resources/testharnessreport.js"></script-->
  9. <script type="text/javascript" src="pointerevent_support.js"></script>
  10. <script type="text/javascript" src="mochitest_support_internal.js"></script>
  11. <script>
  12. var detected_pointertypes = {};
  13. add_completion_callback(showPointerTypes);
  14. var test_pointerEvent = async_test("hasPointerCapture");
  15. var listening_events = [
  16. "pointerover",
  17. "pointerenter",
  18. "pointerout",
  19. "pointerleave",
  20. "pointermove",
  21. "gotpointercapture"
  22. ];
  23. var set_capture_to_target0 = false;
  24. function run() {
  25. var target0 = document.getElementById("target0");
  26. var target1 = document.getElementById("target1");
  27. on_event(target0, "pointerdown", function (e) {
  28. detected_pointertypes[e.pointerType] = true;
  29. test_pointerEvent.step(function () {
  30. assert_equals(target0.hasPointerCapture(e.pointerId), false,
  31. "before target0.setPointerCapture, target0.hasPointerCapture should be false");
  32. });
  33. target1.setPointerCapture(e.pointerId);
  34. test_pointerEvent.step(function () {
  35. assert_equals(target0.hasPointerCapture(e.pointerId), false,
  36. "after target1.setPointerCapture, target0.hasPointerCapture should be false");
  37. assert_equals(target1.hasPointerCapture(e.pointerId), true,
  38. "after target1.setPointerCapture, target1.hasPointerCapture should be true");
  39. });
  40. target0.setPointerCapture(e.pointerId);
  41. set_capture_to_target0 = true;
  42. // hasPointerCapture will return true immediately after a call to setPointerCapture
  43. test_pointerEvent.step(function () {
  44. assert_equals(target0.hasPointerCapture(e.pointerId), true,
  45. "after target0.setPointerCapture, target0.hasPointerCapture should be true");
  46. });
  47. // hasPointerCapture will return false immediately after a call to releasePointerCapture
  48. target0.releasePointerCapture(e.pointerId);
  49. set_capture_to_target0 = false;
  50. test_pointerEvent.step(function () {
  51. assert_equals(target0.hasPointerCapture(e.pointerId), false,
  52. "after target0.releasePointerCapture, target0.hasPointerCapture should be false");
  53. assert_equals(target1.hasPointerCapture(e.pointerId), false,
  54. "after target0.releasePointerCapture, target1.hasPointerCapture should be false");
  55. });
  56. target0.setPointerCapture(e.pointerId);
  57. set_capture_to_target0 = true;
  58. test_pointerEvent.step(function () {
  59. assert_equals(target0.hasPointerCapture(e.pointerId), true,
  60. "after target0.setPointerCapture, target0.hasPointerCapture should be true");
  61. });
  62. });
  63. for (var i = 0; i < listening_events.length; i++) {
  64. on_event(target0, listening_events[i], function (e) {
  65. test_pointerEvent.step(function () {
  66. assert_equals(target0.hasPointerCapture(e.pointerId), set_capture_to_target0,
  67. "Received " + e.type + " target0.hasPointerCapture should be " + set_capture_to_target0);
  68. });
  69. });
  70. }
  71. on_event(target0, "pointerup", function (e) {
  72. // Immediately after firing the pointerup or pointercancel events, a user agent must run the steps
  73. // as if the releasePointerCapture() method has been called
  74. test_pointerEvent.step(function () {
  75. assert_equals(target0.hasPointerCapture(e.pointerId), true,
  76. "pointerup target0.hasPointerCapture should be true");
  77. });
  78. set_capture_to_target0 = false;
  79. });
  80. on_event(target0, "lostpointercapture", function (e) {
  81. test_pointerEvent.step(function () {
  82. assert_equals(target0.hasPointerCapture(e.pointerId), false,
  83. "pointerup target0.hasPointerCapture should be false");
  84. });
  85. });
  86. on_event(target1, "pointerup", function (e) {
  87. test_pointerEvent.step(function () {
  88. assert_equals(target1.hasPointerCapture(e.pointerId), false,
  89. "pointerup target1.hasPointerCapture should be false");
  90. });
  91. test_pointerEvent.done();
  92. });
  93. }
  94. </script>
  95. </head>
  96. <body onload="run()">
  97. <h1>Element.hasPointerCapture test</h1>
  98. <!--
  99. <h4>
  100. Test Description: This test checks if Element.hasPointerCapture returns value correctly
  101. <ol>
  102. <li> Press black rectangle and do not release
  103. <li> Move your pointer to purple rectangle
  104. <li> Release the pointer
  105. <li> Click purple rectangle
  106. </ol>
  107. </h4>
  108. <p>
  109. -->
  110. <div id="target0" touch-action:none></div>
  111. <div id="target1" touch-action:none></div>
  112. <div id="complete-notice">
  113. <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
  114. </div>
  115. <div id="log"></div>
  116. </body>
  117. </html>