mozilla-central/testing/web-platform/tests/pointerlock/pointerlock_shadow.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html>
<head>
<meta name='author' title='Takayoshi Kochi' href='mailto:kochi@chromium.org'>
<meta name='assert' content='Test for DocumentOrShadowRoot.pointerLockElement.'>
<meta name='timeout' content='long'>
<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='../shadow-dom/resources/shadow-dom.js'></script>
</head>
<body onload="inject_input()">
<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>
<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()" id="button">Click Me!</button>
</div>
</body>
<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.');
}
function inject_input() {
new test_driver.Actions()
.pointerMove(0, 0, {origin: button})
.pointerDown()
.pointerUp()
.send();
}
</script>
</html>