OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <script src="../../../resources/js-test.js"></script> | |
5 <script src="resources/shadow-dom.js"></script> | |
6 </head> | |
7 <body> | |
8 | |
9 <div id="container"></div> | |
10 <pre id="console"></pre> | |
11 | |
12 <script> | |
13 function testCase(f) | |
14 { | |
15 container.innerHTML = ''; | |
16 container.appendChild(createDOM('div', {'id': 'host'}, | |
17 createShadowRoot())); | |
18 shadowRoot = internals.shadowRoot(host); | |
19 | |
20 f(); | |
21 debug(''); | |
22 } | |
23 | |
24 testCase(function() | |
25 { | |
26 debug('Id should be collected'); | |
27 | |
28 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
29 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
30 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
31 shouldBe('internals.hasSelectorForIdInShadow(host, "host")', 'false'); | |
32 }); | |
33 | |
34 testCase(function() | |
35 { | |
36 debug('Class should be collected'); | |
37 | |
38 shadowRoot.innerHTML = '<content select=".foo"></content>'; | |
39 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'true'); | |
40 shouldBe('internals.hasSelectorForClassInShadow(host, "host")', 'false'); | |
41 }); | |
42 | |
43 testCase(function() | |
44 { | |
45 debug('Attribute should be collected'); | |
46 | |
47 shadowRoot.innerHTML = '<content select="div[foo]"></content>'; | |
48 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'true'); | |
49 shouldBe('internals.hasSelectorForAttributeInShadow(host, "host")', 'false')
; | |
50 }); | |
51 | |
52 testCase(function() | |
53 { | |
54 debug('Select attribute might have several selectors'); | |
55 | |
56 shadowRoot.innerHTML = '<content select="#foo,.bar,div[baz]"></content>'; | |
57 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
58 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
59 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
60 | |
61 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
62 shouldBe('internals.hasSelectorForClassInShadow(host, "bar")', 'true'); | |
63 shouldBe('internals.hasSelectorForClassInShadow(host, "baz")', 'false'); | |
64 | |
65 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'false'); | |
66 shouldBe('internals.hasSelectorForAttributeInShadow(host, "bar")', 'false'); | |
67 shouldBe('internals.hasSelectorForAttributeInShadow(host, "baz")', 'true'); | |
68 }); | |
69 | |
70 testCase(function() | |
71 { | |
72 debug('Don\'t count shadow element'); | |
73 | |
74 shadowRoot.innerHTML = '<shadow select="#foo,.bar,div[baz]"></shadow>'; | |
75 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'false'); | |
76 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
77 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
78 | |
79 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
80 shouldBe('internals.hasSelectorForClassInShadow(host, "bar")', 'false'); | |
81 shouldBe('internals.hasSelectorForClassInShadow(host, "baz")', 'false'); | |
82 | |
83 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'false'); | |
84 shouldBe('internals.hasSelectorForAttributeInShadow(host, "bar")', 'false'); | |
85 shouldBe('internals.hasSelectorForAttributeInShadow(host, "baz")', 'false'); | |
86 }); | |
87 | |
88 testCase(function() | |
89 { | |
90 debug('Complex case for single ShadowRoot'); | |
91 | |
92 shadowRoot.innerHTML = '<div><div></div><content select="*"></content><div><
content select="div[foo=piyo]"></content></div>'; | |
93 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'false'); | |
94 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
95 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'true'); | |
96 shouldBe('internals.hasSelectorForAttributeInShadow(host, "piyo")', 'false')
; | |
97 }); | |
98 | |
99 testCase(function() | |
100 { | |
101 debug('Another complex case for single ShadowRoot'); | |
102 | |
103 shadowRoot.innerHTML = '<content select="#foo,.foo,div[foo]"></content>'; | |
104 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
105 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'true'); | |
106 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'true'); | |
107 }); | |
108 | |
109 testCase(function() | |
110 { | |
111 debug('Multiple ShadowRoot case'); | |
112 | |
113 var anotherShadowRoot = host.createShadowRoot(); | |
114 | |
115 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
116 anotherShadowRoot.innerHTML = '<content select="#bar"></content><content sel
ect="div[baz],.bar"></content>'; | |
117 | |
118 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
119 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'true'); | |
120 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
121 | |
122 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
123 shouldBe('internals.hasSelectorForClassInShadow(host, "bar")', 'true'); | |
124 shouldBe('internals.hasSelectorForClassInShadow(host, "baz")', 'false'); | |
125 | |
126 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'false'); | |
127 shouldBe('internals.hasSelectorForAttributeInShadow(host, "bar")', 'false'); | |
128 shouldBe('internals.hasSelectorForAttributeInShadow(host, "baz")', 'true'); | |
129 }); | |
130 | |
131 testCase(function() | |
132 { | |
133 debug('Dynamic select attribute update'); | |
134 | |
135 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
136 | |
137 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
138 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
139 | |
140 var content = shadowRoot.querySelector('content'); | |
141 content.select = '#bar'; | |
142 | |
143 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'false'); | |
144 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'true'); | |
145 }); | |
146 | |
147 testCase(function() | |
148 { | |
149 debug('Nested ShadowDOM case'); | |
150 | |
151 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
152 | |
153 var div = document.createElement('div'); | |
154 var nestedShadowRoot = div.createShadowRoot(); | |
155 nestedShadowRoot.innerHTML = '<content select="#bar"></content>'; | |
156 shadowRoot.appendChild(div); | |
157 | |
158 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
159 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'true'); | |
160 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
161 | |
162 var content = nestedShadowRoot.querySelector('content'); | |
163 content.select = '#baz'; | |
164 | |
165 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
166 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
167 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'true'); | |
168 }); | |
169 | |
170 finishJSTest(); | |
171 </script> | |
172 </body> | |
173 </html> | |
OLD | NEW |