capturing_boundary_event_handler_at_ua_shadowdom.html

<!DOCTYPE HTML>
<title>Capturing boundary event handler at UA Shadow DOM</title>
<meta name="variant" content="?mouse">
<meta name="variant" content="?touch">
<meta name="variant" content="?pen">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="pointerevent_support.js"></script>

<style>
  .target {
    width: 100px;
    height: 50px;
    border: 1px solid red;
  }
</style>
<!-- This div has no shadow dom, serves only as a "control" group. -->
<div class="target"></div>
<video class="target"></video>
<input class="target"></input>
<div id="done">done</div>

<script>
  "use strict";
  const pointer_type = location.search.substring(1);

  const targets = document.getElementsByClassName("target");
  const done = document.getElementById("done");

  let event_log = [];
  function logEventAndPhase(e) {
    event_log.push(`${e.type}-${e.eventPhase}`);
  }

  const logged_events = [
    "pointerenter", "pointerleave", "pointerover", "pointerout"
  ];
  const expected_events_and_phases = [
    "pointerover-2", "pointerenter-2", "pointerout-2", "pointerleave-2"
  ];

  function addPromiseTest(target) {
    const test_name = `Capturing boundary event handler at ${target.tagName}`;
    promise_test(async () => {
      event_log = [];

      logged_events.forEach(ename => {
        target.addEventListener(ename, logEventAndPhase, {capture:true});
      });

      let done_click_promise = getEvent("click", done);

      let actions = new test_driver.Actions()
          .addPointer("TestPointer", pointer_type)
          .pointerMove(0, 0, {origin: target})
          .pointerDown()
          .pointerUp()
          .pointerMove(0, 0, {origin: done})
          .pointerDown()
          .pointerUp();

      await actions.send();
      await done_click_promise;

      logged_events.forEach(ename => {
        target.removeEventListener(ename, logEventAndPhase, {capture:true});
      });

      assert_equals(event_log.toString(),
          expected_events_and_phases.toString(),
          "received events with phases");
    }, test_name);
  }

  for (let i = 0; i < targets.length; i++)
    addPromiseTest(targets.item(i));
</script>
chromium/third_party/blink/web_tests/external/wpt/pointerevents/capturing_boundary_event_handler_at_ua_shadowdom.html
