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
|
<!DOCTYPE html>
<html>
<head>
<meta name='author' title='Takayoshi Kochi' href='mailto:kochi@chromium.org'>
<meta name='assert' content='Test for DocumentOrShadowRoot.pointerLockElement.'>
<link rel='help' href='https://w3c.github.io/pointerlock/#widl-DocumentOrShadowRoot-pointerLockElement'>
<meta name='flags' content='interact'>
<meta name='timeout' content='long'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='../shadow-dom/resources/shadow-dom.js'></script>
</head>
<body>
<div id='host'>
<template data-mode='open' id='root'>
<slot></slot>
</template>
<div id='host2'>
<template data-mode='open' id='root2'>
<div id='host3'>
<template data-mode='open' id='root3'>
<canvas id='canvas'></canvas>
<div id='host4'>
<template data-mode='open' id='root4'>
<div></div>
</template>
</div>
</template>
</div>
<div id='host5'>
<template data-mode='open' id='root5'>
<div></div>
</template>
</div>
</template>
</div>
</div>
<script>
function run_test() {
async_test((test) => {
document.onpointerlockerror = test.unreached_func('onpointerlockerror is not expected.');
document.onpointerlockchange = test.step_func_done(() => {
// Not interested in handling before or after exitPointerLock.
if (document.pointerLockElement === null)
return;
assert_equals(document.pointerLockElement, ids.host2, 'document.pointerLockElement should be shadow #host2.');
assert_equals(ids.root.pointerLockElement, null, '#root\'s shadowRoot.pointerLockElement should be null.');
assert_equals(ids.root2.pointerLockElement, ids.host3, '#root2\'s shadowRoot.pointerLockElement should be host3.');
assert_equals(ids.root3.pointerLockElement, ids.canvas, '#root3\'s shadowRoot.pointerLockElement should be canvas element.');
assert_equals(ids.root4.pointerLockElement, null, '#root4\'s shadowRoot.pointerLockElement should be null.');
assert_equals(ids.root5.pointerLockElement, null, '#root5\'s shadowRoot.pointerLockElement should be null.');
document.exitPointerLock();
});
var ids = createTestTree(host);
document.body.appendChild(ids.host);
// All pointerLockElement should default to null.
test.step(() => {
assert_equals(document.pointerLockElement, null);
assert_equals(ids.root.pointerLockElement, null);
assert_equals(ids.root2.pointerLockElement, null);
assert_equals(ids.root3.pointerLockElement, null);
assert_equals(ids.root4.pointerLockElement, null);
assert_equals(ids.root5.pointerLockElement, null);
});
var canvas = ids.canvas;
canvas.requestPointerLock();
}, 'Test for pointerLockElement adjustment for Shadow DOM.');
}
</script>
<div>
<h2>Description</h2>
<p>Click the button below to trigger pointer lock on an element in a shadow root.</p>
<button onclick="run_test()">Click Me!</button>
</div>
</body>
</html>
|
