pointerlock/pointerlock_shadow-manual.html

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