OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../../../resources/js-test.js"></script> | 2 <script src="../../../resources/js-test.js"></script> |
3 <script src="resources/shadow-dom.js"></script> | 3 <script src="resources/shadow-dom.js"></script> |
4 <style> | 4 <style> |
5 div { | 5 div { |
6 background-color: white; | 6 background-color: white; |
7 } | 7 } |
8 | 8 |
9 div#shadow-host:focus { | 9 div#shadow-host:focus { |
10 background-color: green; | 10 background-color: green; |
(...skipping 26 matching lines...) Expand all Loading... |
37 sandbox.offsetTop; | 37 sandbox.offsetTop; |
38 } | 38 } |
39 | 39 |
40 function testNestedDistribution() { | 40 function testNestedDistribution() { |
41 debug('testing nested distribution'); | 41 debug('testing nested distribution'); |
42 | 42 |
43 buildNestedDistributionTree(false, false); | 43 buildNestedDistributionTree(false, false); |
44 | 44 |
45 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 45 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
46 | 46 |
47 var outerInput = getNodeInTreeOfTrees('outer-input'); | 47 var outerInput = getNodeInComposedTree('outer-input'); |
48 var input1 = getNodeInTreeOfTrees('input1'); | 48 var input1 = getNodeInComposedTree('input1'); |
49 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 49 var input2 = getNodeInComposedTree('shadow-host/input2'); |
50 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 50 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
51 | 51 |
52 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 sha
dow tree.'); | 52 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 sha
dow tree.'); |
53 | 53 |
54 debug('(1/4) top and inner shadow do not delegate focus.'); | 54 debug('(1/4) top and inner shadow do not delegate focus.'); |
55 outerInput.focus(); | 55 outerInput.focus(); |
56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
58 | 58 |
59 input1.focus(); | 59 input1.focus(); |
60 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 60 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
61 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 61 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
62 | 62 |
63 input2.focus(); | 63 input2.focus(); |
64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
65 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 65 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
66 | 66 |
67 input3.focus(); | 67 input3.focus(); |
68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
70 | 70 |
71 debug('(2/4) top shadow delegates, but inner shadow does not.'); | 71 debug('(2/4) top shadow delegates, but inner shadow does not.'); |
72 buildNestedDistributionTree(true, false); | 72 buildNestedDistributionTree(true, false); |
73 | 73 |
74 var outerInput = getNodeInTreeOfTrees('outer-input'); | 74 var outerInput = getNodeInComposedTree('outer-input'); |
75 var input1 = getNodeInTreeOfTrees('input1'); | 75 var input1 = getNodeInComposedTree('input1'); |
76 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 76 var input2 = getNodeInComposedTree('shadow-host/input2'); |
77 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 77 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
78 | 78 |
79 outerInput.focus(); | 79 outerInput.focus(); |
80 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 80 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
81 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 81 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
82 | 82 |
83 input1.focus(); | 83 input1.focus(); |
84 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 84 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
85 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 85 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
86 | 86 |
87 input2.focus(); | 87 input2.focus(); |
88 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 88 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
90 | 90 |
91 input3.focus(); | 91 input3.focus(); |
92 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 92 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
93 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 93 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
94 | 94 |
95 debug('(3/4) top shadow does not delegate, but inner shadow does.'); | 95 debug('(3/4) top shadow does not delegate, but inner shadow does.'); |
96 buildNestedDistributionTree(false, true); | 96 buildNestedDistributionTree(false, true); |
97 | 97 |
98 var outerInput = getNodeInTreeOfTrees('outer-input'); | 98 var outerInput = getNodeInComposedTree('outer-input'); |
99 var input1 = getNodeInTreeOfTrees('input1'); | 99 var input1 = getNodeInComposedTree('input1'); |
100 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 100 var input2 = getNodeInComposedTree('shadow-host/input2'); |
101 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 101 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
102 | 102 |
103 outerInput.focus(); | 103 outerInput.focus(); |
104 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 104 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
105 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 105 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
106 | 106 |
107 input1.focus(); | 107 input1.focus(); |
108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
110 | 110 |
111 input2.focus(); | 111 input2.focus(); |
112 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 112 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
113 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 113 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
114 | 114 |
115 input3.focus(); | 115 input3.focus(); |
116 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 116 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
117 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); | 117 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); |
118 | 118 |
119 debug('(4/4) both shadow hosts delagate focus.'); | 119 debug('(4/4) both shadow hosts delagate focus.'); |
120 buildNestedDistributionTree(true, true); | 120 buildNestedDistributionTree(true, true); |
121 | 121 |
122 var outerInput = getNodeInTreeOfTrees('outer-input'); | 122 var outerInput = getNodeInComposedTree('outer-input'); |
123 var input1 = getNodeInTreeOfTrees('input1'); | 123 var input1 = getNodeInComposedTree('input1'); |
124 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 124 var input2 = getNodeInComposedTree('shadow-host/input2'); |
125 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 125 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
126 | 126 |
127 outerInput.focus(); | 127 outerInput.focus(); |
128 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 128 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
129 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 129 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
130 | 130 |
131 input1.focus(); | 131 input1.focus(); |
132 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 132 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
133 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 133 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
134 | 134 |
135 input2.focus(); | 135 input2.focus(); |
136 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 136 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
137 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 137 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
138 | 138 |
139 input3.focus(); | 139 input3.focus(); |
140 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 140 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); | 141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); |
142 } | 142 } |
143 | 143 |
144 testNestedDistribution(); | 144 testNestedDistribution(); |
145 </script> | 145 </script> |
OLD | NEW |