summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/pointerlock/pointerlock_shadow-manual.html
blob: e7893c33b2c552b9e4ef465e5b9702b2808ba5e8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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_done(() => {
	    // 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();
	});

	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>