Google Git
Sign in
chromium / chromium / src.git / eddc51a943211fc44d93d05ae1f84d79d12619ed / . / third_party / WebKit / LayoutTests / shadow-dom / css-focus-pseudo-match-shadow-host5.html
blob: 32fdd7a6d6179da790f8662086bae763e2bd4bd9 [file] [log] [blame]
[email protected]27babc02015-06-15 09:13:43[diff] [blame]1<!DOCTYPE html>
kochi60a57eb2016-03-09 04:50:07[diff] [blame]2<script src="../resources/js-test.js"></script>
3<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
[email protected]27babc02015-06-15 09:13:43[diff] [blame]4<style>
5div {
6 background-color: white;
7}
8
9div#shadow-host:focus {
10 background-color: green;
11}
12</style>
13<body>
14<div id="sandbox"></div>
15</body>
16<script>
[email protected]27babc02015-06-15 09:13:43[diff] [blame]17function buildNestedDistributionTree(delegatesFocus1, delegatesFocus2) {
18 var sandbox = document.querySelector('#sandbox');
19 sandbox.innerHTML = '';
20 sandbox.appendChild(
21 createDOM('div', {},
22 createDOM('input', {'id': 'outer-input'}),
23 createDOM('div', {'id': 'shadow-host'},
24 createDOM('input', {'id': 'input1'}),
kochicc5607e92016-02-10 08:19:25[diff] [blame]25 attachShadow(
26 {'mode': 'open', 'delegatesFocus': delegatesFocus1},
[email protected]27babc02015-06-15 09:13:43[diff] [blame]27 createDOM('style', {},
28 document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
29 createDOM('input', {'id': 'input2'}),
30 createDOM('div', {'id': 'inner-shadow-host'},
kochicc5607e92016-02-10 08:19:25[diff] [blame]31 createDOM('slot', {}), // #input1 goes here
32 attachShadow(
33 {'mode': 'open', 'delegatesFocus': delegatesFocus2},
34 createDOM('slot', {}), // #input1 redistributed here, #input2 goes here.
[email protected]27babc02015-06-15 09:13:43[diff] [blame]35 createDOM('input', {'id': 'input3'})))))));
36
[email protected]27babc02015-06-15 09:13:43[diff] [blame]37}
38
39function testNestedDistribution() {
40 debug('testing nested distribution');
41
42 buildNestedDistributionTree(false, false);
43
44 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
45
hayato2226eb582016-02-09 13:24:20[diff] [blame]46 var outerInput = getNodeInComposedTree('outer-input');
47 var input1 = getNodeInComposedTree('input1');
48 var input2 = getNodeInComposedTree('shadow-host/input2');
49 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
[email protected]27babc02015-06-15 09:13:43[diff] [blame]50
51 debug('#input1, #input2 are (re)distributed in the same treescope as #input3, but :focus on shadow host only matches when a focused element is under its shadow tree.');
52
53 debug('(1/4) top and inner shadow do not delegate focus.');
54 outerInput.focus();
55 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
56 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
57
58 input1.focus();
59 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
60 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
61
62 input2.focus();
63 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
64 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
65
66 input3.focus();
67 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
68 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
69
70 debug('(2/4) top shadow delegates, but inner shadow does not.');
71 buildNestedDistributionTree(true, false);
72
hayato2226eb582016-02-09 13:24:20[diff] [blame]73 var outerInput = getNodeInComposedTree('outer-input');
74 var input1 = getNodeInComposedTree('input1');
75 var input2 = getNodeInComposedTree('shadow-host/input2');
76 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
[email protected]27babc02015-06-15 09:13:43[diff] [blame]77
78 outerInput.focus();
79 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
80 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
81
82 input1.focus();
83 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
84 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
85
86 input2.focus();
87 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
88 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
89
90 input3.focus();
91 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
92 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
93
94 debug('(3/4) top shadow does not delegate, but inner shadow does.');
95 buildNestedDistributionTree(false, true);
96
hayato2226eb582016-02-09 13:24:20[diff] [blame]97 var outerInput = getNodeInComposedTree('outer-input');
98 var input1 = getNodeInComposedTree('input1');
99 var input2 = getNodeInComposedTree('shadow-host/input2');
100 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
[email protected]27babc02015-06-15 09:13:43[diff] [blame]101
102 outerInput.focus();
103 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
104 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
105
106 input1.focus();
107 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
108 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
109
110 input2.focus();
111 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
112 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
113
114 input3.focus();
115 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
116 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
117
118 debug('(4/4) both shadow hosts delagate focus.');
119 buildNestedDistributionTree(true, true);
120
hayato2226eb582016-02-09 13:24:20[diff] [blame]121 var outerInput = getNodeInComposedTree('outer-input');
122 var input1 = getNodeInComposedTree('input1');
123 var input2 = getNodeInComposedTree('shadow-host/input2');
124 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');
[email protected]27babc02015-06-15 09:13:43[diff] [blame]125
126 outerInput.focus();
127 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
128 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
129
130 input1.focus();
131 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
132 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
133
134 input2.focus();
135 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
136 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
137
138 input3.focus();
139 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
140 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
141}
142
143testNestedDistribution();
144</script>