blob: 8e70915bb89740cb4edfe6a0b92057900bd294db [file] [log] [blame]
<!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(() => {
// 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();
test.done();
});
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>