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
70
71
72
73
74
75
76
77
78
79
80
|
<!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>
|
