<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../resources/shadow-dom.js'></script>

<div id='host'>
  <template data-mode='v0'>
    <content></content>
  </template>
  <div id='hostV0'>
    <template data-mode='v0'>
      <div id='hostV1inV0'>
        <template data-mode='open'>
          <canvas></canvas>
        </template>
      </div>
    </template>
  </div>
</div>

<script>
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, hostV1inV0, 'if it is in V1, return shadow host.');
        assert_equals(host.shadowRoot.pointerLockElement, null);
        assert_equals(hostV0.shadowRoot.pointerLockElement, null);
        assert_equals(hostV1inV0.shadowRoot.pointerLockElement, canvas);

        document.exitPointerLock();
        test.done();
    });

    convertTemplatesToShadowRootsWithin(host);
    var hostV1inV0 = hostV0.shadowRoot.querySelector('#hostV1inV0');

    test.step(() => {
        assert_equals(document.pointerLockElement, null);
        assert_equals(host.shadowRoot.pointerLockElement, null);
        assert_equals(hostV0.shadowRoot.pointerLockElement, null);
        assert_equals(hostV1inV0.shadowRoot.pointerLockElement, null);
    });

    var canvas = hostV1inV0.shadowRoot.querySelector('canvas');
    canvas.requestPointerLock();
}, 'Test for pointerLockElement adjustment for Shadow DOM V0/V1 combination.');
</script>