summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/event-timing/shadow-dom-null-target.html
blob: 0872e4e8faf0c6583005d42be055d5e66198b78f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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 afterNextPaint();

  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 afterNextPaint();

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