| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div id="host"><span id="target" tabindex=0>Click here</span></div> |
| <div id="anotherHost"></div> |
| <script> |
| description('Test pointerLockElement is the node in the same tree as the context object.<br>' |
| + 'To manually test, click on "Click here" below.'); |
| window.jsTestIsAsync = true; |
| |
| shadowHost = document.getElementById('host'); |
| shadowRoot = shadowHost.attachShadow({mode: 'closed'}); |
| shadowRoot.innerHTML = '<slot></slot>'; |
| |
| target = document.getElementById('target'); |
| anotherShadowRoot = document.getElementById('anotherHost').attachShadow({mode: 'closed'}); |
| |
| target.onclick = function () { |
| shouldBe("document.pointerLockElement", "null"); |
| shouldBe("shadowRoot.pointerLockElement", "null"); |
| target.requestPointerLock(); |
| } |
| |
| function clickElement(element) { |
| eventSender.mouseMoveTo(element.offsetLeft + 5, element.offsetTop + 5); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| if (window.eventSender) |
| clickElement(target); |
| |
| let state = 0; |
| document.addEventListener('pointerlockchange', function () { |
| switch (state) { |
| case 0: |
| shouldBe("document.pointerLockElement", "target"); |
| shouldBe("shadowRoot.pointerLockElement", "null"); |
| shouldBe("anotherShadowRoot.pointerLockElement", "null"); |
| document.exitPointerLock(); |
| break; |
| case 1: |
| shouldBe("document.pointerLockElement", "null"); |
| shouldBe("shadowRoot.pointerLockElement", "null"); |
| shouldBe("anotherShadowRoot.pointerLockElement", "null"); |
| finishJSTest(); |
| break; |
| } |
| state++; |
| }); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
