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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<!doctype html>
<html>
<head>
<title>Lostpointercapture fires on document when target in shadow dom is removed</title>
<meta name="viewport" content="width=device-width">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=810882">
<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>
<style>
#shadowhost{
height:200px;
width:200px;
background-color:magenta;
}
</style>
</head>
<body onload="onLoad()">
<template id="template">
<style>
#content{
height:100px;
width:100px;
background-color: lightgrey;
}
</style>
<div id="content"></div>
</template>
<h1>Pointer Events - lostpointercapture when capturing element in shadow dom is removed by removing the shadow host</h1>
<h4>
Test Description:
This test checks if lostpointercapture is fired at the document when the capturing node is removed from the document by removing the shadow host.
The shadow host is colored magenta and the shadow dom element is colored gray.
Complete the following actions:
<ol>
<li>Press left mouse button over "Set Capture" button. Pointer should be captured by the gray rectangle.</li>
<li>Shadow host magenta rectangle including the gray rectangle will be removed from shadow dom.</li>
<li>"lostpointercapture" should be received on the document not on the gray rectangle.</li>
</ol>
</h4>
<div id="shadowhost"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<div id="log"></div>
<script>
async function onLoad(){
var logDiv = document.getElementById("log");
function logMessage(message){
var log = document.createElement("div");
var messageNode = document.createTextNode(message);
log.appendChild(messageNode);
logDiv.appendChild(log);
}
var events = [];
var host = document.getElementById("shadowhost");
var shadowRoot = host.attachShadow({mode: "open"});
var template = document.getElementById("template");
var node = template.content.cloneNode(true);
shadowRoot.appendChild(node);
var content = host.shadowRoot.getElementById("content");
var captureButton = document.getElementById("btnCapture");
captureButton.addEventListener("pointerdown", function(event){
logMessage("Pointer will be captured by the shadow dom gray rectangle.");
content.setPointerCapture(event.pointerId);
events.push("pointerdown@captureButton");
});
content.addEventListener("gotpointercapture", function(event){
logMessage("Gray rectangle received pointercapture.");
logMessage("Removing magenta rectangle (which includes gray rectangle) from shadow dom.")
host.parentNode.removeChild(host);
events.push("gotpointercapture@content");
});
content.addEventListener("lostpointercapture", function(event){
logMessage("Test Failed! The element removed from shadow dom should not receive lostpointercapture.")
events.push("lostpointercapture@content");
if(window.promise_test && shadow_dom_test){
shadow_dom_test.step(function(){
assert_unreached("lostpointercapture must be fired on the document, not the capturing element");
reject_test("lostpointercapture must not be dispatched on the disconnected node");
shadow_dom_test.done();
});
}
});
document.addEventListener("lostpointercapture", function(event){
logMessage("Test Passed! Document received lostpointercapture.");
events.push("lostpointercapture@document");
if(window.promise_test && shadow_dom_test){
shadow_dom_test.step(function(){
assert_array_equals(events, ["pointerdown@captureButton",
"gotpointercapture@content",
"lostpointercapture@document"]);
resolve_test();
});
}
});
var shadow_dom_test = null;
var resolve_test = null;
var reject_test = null;
function cleanup(){
events = [];
shadow_dom_test = null;
resolve_test = null;
reject_test = null;
}
if(window.promise_test){
promise_test(async function(t){
var actions_promise;
return new Promise(function(resolve, reject){
shadow_dom_test = t;
resolve_test = resolve;
reject_test = reject;
t.add_cleanup(function(){
cleanup();
});
var actions = new test_driver.Actions();
actions_promise = actions
.pointerMove(0, 0, {origin:captureButton})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
}).finally(async () => {
await actions_promise;
t.done();
});
}, "lostpointercapture is dispatched on the document when shadow host is removed");
}
}
</script>
</body>
</html>
|
