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>
|
