pointerlock_shadow.html (3582B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name='author' title='Takayoshi Kochi' href='mailto:kochi@chromium.org'> 5 <meta name='assert' content='Test for DocumentOrShadowRoot.pointerLockElement.'> 6 <link rel='help' href='https://w3c.github.io/pointerlock/#widl-DocumentOrShadowRoot-pointerLockElement'> 7 <meta name='timeout' content='long'> 8 <script src='/resources/testharness.js'></script> 9 <script src='/resources/testharnessreport.js'></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src='../shadow-dom/resources/shadow-dom.js'></script> 14 </head> 15 <body onload="inject_input()"> 16 <div id='host'> 17 <template data-mode='open' id='root'> 18 <slot></slot> 19 </template> 20 <div id='host2'> 21 <template data-mode='open' id='root2'> 22 <div id='host3'> 23 <template data-mode='open' id='root3'> 24 <canvas id='canvas'></canvas> 25 <div id='host4'> 26 <template data-mode='open' id='root4'> 27 <div></div> 28 </template> 29 </div> 30 </template> 31 </div> 32 <div id='host5'> 33 <template data-mode='open' id='root5'> 34 <div></div> 35 </template> 36 </div> 37 </template> 38 </div> 39 </div> 40 <div> 41 <h2>Description</h2> 42 <p>Click the button below to trigger pointer lock on an element in a shadow root.</p> 43 <button onclick="run_test()" id="button">Click Me!</button> 44 </div> 45 </body> 46 <script> 47 function run_test() { 48 async_test((test) => { 49 document.onpointerlockerror = test.unreached_func('onpointerlockerror is not expected.'); 50 51 document.onpointerlockchange = test.step_func(() => { 52 // Not interested in handling before or after exitPointerLock. 53 if (document.pointerLockElement === null) 54 return; 55 56 assert_equals(document.pointerLockElement, ids.host2, 'document.pointerLockElement should be shadow #host2.'); 57 assert_equals(ids.root.pointerLockElement, null, '#root\'s shadowRoot.pointerLockElement should be null.'); 58 assert_equals(ids.root2.pointerLockElement, ids.host3, '#root2\'s shadowRoot.pointerLockElement should be host3.'); 59 assert_equals(ids.root3.pointerLockElement, ids.canvas, '#root3\'s shadowRoot.pointerLockElement should be canvas element.'); 60 assert_equals(ids.root4.pointerLockElement, null, '#root4\'s shadowRoot.pointerLockElement should be null.'); 61 assert_equals(ids.root5.pointerLockElement, null, '#root5\'s shadowRoot.pointerLockElement should be null.'); 62 63 document.exitPointerLock(); 64 test.done(); 65 }); 66 67 var ids = createTestTree(host); 68 document.body.appendChild(ids.host); 69 70 // All pointerLockElement should default to null. 71 test.step(() => { 72 assert_equals(document.pointerLockElement, null); 73 assert_equals(ids.root.pointerLockElement, null); 74 assert_equals(ids.root2.pointerLockElement, null); 75 assert_equals(ids.root3.pointerLockElement, null); 76 assert_equals(ids.root4.pointerLockElement, null); 77 assert_equals(ids.root5.pointerLockElement, null); 78 }); 79 80 var canvas = ids.canvas; 81 canvas.requestPointerLock(); 82 }, 'Test for pointerLockElement adjustment for Shadow DOM.'); 83 } 84 85 function inject_input() { 86 new test_driver.Actions() 87 .pointerMove(0, 0, {origin: button}) 88 .pointerDown() 89 .pointerUp() 90 .send(); 91 } 92 </script> 93 </html>