testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html

   1 <!DOCTYPE HTML>
   2 <title>Target of click-like events with pointer capture</title>
   3 <link rel="help" href="https://w3c.github.io/pointerevents/#event-dispatch" />
   4 <meta name="variant" content="?mouse-click">
   5 <meta name="variant" content="?mouse-auxclick">
   6
   7 <script src="/resources/testharness.js"></script>
   8 <script src="/resources/testharnessreport.js"></script>
   9 <script src="/resources/testdriver.js"></script>
  10 <script src="/resources/testdriver-actions.js"></script>
  11 <script src="/resources/testdriver-vendor.js"></script>
  12 <script src="pointerevent_support.js"></script>
  13
  14 <style>
  15   div {
  16     padding: 10px;
  17   }
  18   #parent {
  19     background: grey;
  20   }
  21   #child1 {
  22     background: green;
  23   }
  24   #child2 {
  25     background: blue;
  26   }
  27 </style>
  28
  29 <div id="parent">
  30   <div id="child1"></div>
  31   <div id="child2"></div>
  32 </div>
  33 <div id="done"></div>
  34
  35 <script>
  36   'use strict';
  37
  38   const [pointer_type, event_to_test] = location.search.substring(1).split("-");
  39   assert_true(["click", "auxclick"].includes(event_to_test));
  40   assert_equals(pointer_type, "mouse");
  41   // Other pointer types can generate click/auxclick and should be tested here.
  42
  43   const test_pointer = pointer_type + 'TestPointer';
  44
  45   let event_log = [];
  46
  47   function logEvent(event) {
  48     if (event.eventPhase == event.AT_TARGET) {
  49       event_log.push(event.type + '@' + event.target.id);
  50     }
  51   }
  52
  53   const parent = document.getElementById('parent');
  54   const child2 = document.getElementById('child2');
  55   const child1 = document.getElementById('child1');
  56   const done = document.getElementById('done');
  57
  58   let logged_events = [
  59     'gotpointercapture', 'lostpointercapture',
  60     'pointerdown', 'pointerup', event_to_test
  61   ];
  62   logged_events.forEach(ename => {
  63     [parent, child2, child1].forEach(target => {
  64       target.addEventListener(ename, logEvent);
  65     });
  66   });
  67
  68   function dragBetweenChildrenAndClickOnDone(from_child, to_child, test) {
  69     let actions_promise = new test_driver.Actions();
  70
  71     const button_type = (event_to_test === "click")
  72         ? actions_promise.ButtonType.LEFT
  73         : actions_promise.ButtonType.MIDDLE;
  74
  75     actions_promise.addPointer(test_pointer, pointer_type)
  76       .pointerMove(0, 0, {origin:from_child})
  77       .pointerDown({button:button_type})
  78       .pointerMove(0, 0, {origin:to_child})
  79       .pointerUp({button:button_type})
  80       .pointerMove(0, 0, {origin:done})
  81       .pointerDown()
  82       .pointerUp();
  83
  84     let done_click_promise = getEvent('click', done, test);
  85
  86     return actions_promise.send().then(done_click_promise);
  87   }
  88
  89   promise_test(async test => {
  90     event_log = [];
  91
  92     await dragBetweenChildrenAndClickOnDone(child1, child1, test);
  93
  94     assert_equals(event_log.join(','),
  95       `pointerdown@child1,pointerup@child1,${event_to_test}@child1`);
  96   }, 'pointerdown/up at child1, no capture');
  97
  98   promise_test(async test => {
  99     event_log = [];
 100
 101     getEvent('pointerdown', child1, test)
 102       .then(event => child1.setPointerCapture(event.pointerId));
 103     await dragBetweenChildrenAndClickOnDone(child1, child1, test);
 104
 105     assert_equals(event_log.join(','),
 106       'pointerdown@child1,gotpointercapture@child1,' +
 107       `pointerup@child1,lostpointercapture@child1,${event_to_test}@child1`);
 108   }, 'pointerdown/up at child1, capture at child1');
 109
 110   promise_test(async test => {
 111     event_log = [];
 112
 113     getEvent('pointerdown', child1, test)
 114       .then(event => child2.setPointerCapture(event.pointerId));
 115     await dragBetweenChildrenAndClickOnDone(child1, child1, test);
 116
 117     assert_equals(event_log.join(','),
 118       'pointerdown@child1,gotpointercapture@child2,' +
 119       `pointerup@child2,lostpointercapture@child2,${event_to_test}@child2`);
 120   }, 'pointerdown/up at child1, capture at child2');
 121
 122   promise_test(async test => {
 123     event_log = [];
 124
 125     await dragBetweenChildrenAndClickOnDone(child1, child2, test);
 126
 127     assert_equals(event_log.join(','),
 128       `pointerdown@child1,pointerup@child2,${event_to_test}@parent`);
 129   }, 'pointerdown at child1, pointerup at child2, no capture');
 130
 131   promise_test(async test => {
 132     event_log = [];
 133
 134     getEvent('pointerdown', child1, test)
 135       .then(event => child1.setPointerCapture(event.pointerId));
 136     await dragBetweenChildrenAndClickOnDone(child1, child2, test);
 137
 138     assert_equals(event_log.join(','),
 139       'pointerdown@child1,gotpointercapture@child1,' +
 140       `pointerup@child1,lostpointercapture@child1,${event_to_test}@child1`);
 141   }, 'pointerdown at child1, pointerup at child2, capture at child1');
 142
 143   promise_test(async test => {
 144     event_log = [];
 145
 146     getEvent('pointerdown', child1, test)
 147       .then(event => child2.setPointerCapture(event.pointerId));
 148     await dragBetweenChildrenAndClickOnDone(child1, child2, test);
 149
 150     assert_equals(event_log.join(','),
 151       'pointerdown@child1,gotpointercapture@child2,' +
 152       `pointerup@child2,lostpointercapture@child2,${event_to_test}@child2`);
 153   }, 'pointerdown at child1, pointerup at child2, capture at child2');
 154 </script>
 155 <html>
 156 </html>