summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html
blob: 5cc8abbf019211d627826b5836c790e4078f09f5 (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
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="resources/shadow-dom.js"></script>
<script src="resources/focus-utils.js"></script>
<p>Tests for moving focus by pressing tab key across nodes in slot scope.<br>

<div id="b1" tabindex="0">outside</div>
<div id='host'>
  <template data-mode='open'>
    <slot></slot>
  </template>
  <slot>
    <div id="1A" tabindex="0">single nested slot</div>
    <div id="1B" tabindex="0">single nested slot</div>
  </slot>
  <slot>
    <div id="1C" tabindex="0">single nested slot</div>
  </slot>
  <slot>
    <slot>
      <div id="2A" tabindex="0">double nested slot</div>
      <div id="2B" tabindex="0">double nested slot</div>
    </slot>
  </slot>
  <slot>
    <div id="3A" tabindex="0">single nested slot</div>
    <slot>
      <div id="3B" tabindex="0">double nested slot</div>
      <slot>
        <div id="3C" tabindex="0">Triple nested slot</div>
        <div id="3D" tabindex="0">Triple nested slot</div>
      </slot>
      <div id="3E" tabindex="0">double nested slot</div>
    </slot>
    <div id="3F" tabindex="0">single nested slot</div>
  </slot>
</div>
<div id="b2" tabindex="0">outside</div>

<script>
'use strict';

promise_test(async () => {
  convertTemplatesToShadowRootsWithin(host);

  let elements = [
    'b1',
    '1A',
    '1B',
    '1C',
    '2A',
    '2B',
    '3A',
    '3B',
    '3C',
    '3D',
    '3E',
    '3F',
    'b2',
  ];

  await assert_focus_navigation_forward(elements);
  elements.reverse();
  await assert_focus_navigation_backward(elements);
}, 'Focus should cover assigned nodes of slot, especially for nested slots in slot scope.');

</script>