<!DOCTYPE html>
<html>
<meta charset=utf-8 />
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src=/resources/testdriver.js></script>
<script src=/resources/testdriver-vendor.js></script>
<script src=/resources/testdriver-actions.js></script>
<script src=resources/event-timing-test-utils.js></script>
<body>
<div id='host'>
</div>
<script>
promise_test(async t => {
  assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');

  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({mode: "closed"});

  const durationThreshold = 16;

  const innerSpan1 = document.createElement("span");
  innerSpan1.textContent = "Span1";
  const innerSpan2 = document.createElement("span");
  innerSpan2.textContent = "Span2";

  shadowRoot.append(innerSpan1);
  shadowRoot.append(innerSpan2);

  innerSpan2.addEventListener("mouseover", function(e) {
    // To make this is a slow event
    mainThreadBusy(durationThreshold + 4);
  });

  const span1Rect = innerSpan1.getBoundingClientRect();
  const span2Rect = innerSpan2.getBoundingClientRect();

  const actions = new test_driver.Actions();
  // Move the pointer to innerSpan1
  await actions.pointerMove(
    Math.ceil(span1Rect.x + span1Rect.width / 2),
    Math.ceil(span1Rect.y + span1Rect.height / 2)
  ).send();

  await waitForTick();

  const observerPromise = new Promise(resolve => {
    new PerformanceObserver(t.step_func(entryList => {
      let mouseOverEntries = entryList.getEntriesByName("mouseover");
      assert_equals(mouseOverEntries.length, 1);
      assert_equals(mouseOverEntries[0].target, null);
      resolve();
    })).observe({type: 'event', durationThreshold: durationThreshold});
  });

  // Move the pointer to innerSpan2
  // Here we move the pointer within the shadow DOM
  await actions.pointerMove(
    Math.ceil(span2Rect.x + span2Rect.width / 2),
    Math.ceil(span2Rect.y + span2Rect.height / 2)
  ).send();

  await waitForTick();

  await observerPromise;
}, "Event Timing: Move pointer within shadow DOM should create event-timing entry with null target.");
</script>
</body>
</html>