| <!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='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> |