1<!DOCTYPE html>
2<html>
3<head>
4<style>
5#host {
6 color: gray;
7}
8</style>
9<script src="../../js/resources/js-test-pre.js"></script>
10<script src="resources/polyfill.js"></script>
11<script>
12function dumpComputedStyle(node)
13{
14 debug(node.id + ": " + document.defaultView.getComputedStyle(node, null).getPropertyValue('color'));
15}
16
17function preprocessForTest()
18{
19 var parent = document.getElementById("parent");
20 parent.innerHTML = '<div id="host"><span>Hello</span></div>';
21}
22
23function testSimpleContentCase()
24{
25 preprocessForTest();
26 var host = document.getElementById("host");
27 var shadow = new WebKitShadowRoot(host);
28 shadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>";
29 dumpComputedStyle(host);
30}
31
32function testSimpleShadowCase()
33{
34 preprocessForTest();
35 var host = document.getElementById("host");
36 var shadow = new WebKitShadowRoot(host);
37 shadow.innerHTML = "<style>@host { div { color: red; } }</style><shadow></shadow>";
38 dumpComputedStyle(host);
39}
40
41function testHostWithSelector()
42{
43 var parent = document.getElementById("parent");
44 parent.innerHTML = "<style scoped> .host { color: gray };</style>"
45 + "<div id='hostA' class='host'><span>Hello</span></div>"
46 + "<span id='hostB' class='host'><span>World</span></span>";
47
48 var hostA = document.getElementById("hostA");
49 var shadowA = new WebKitShadowRoot(hostA);
50 var style = "<style>@host { div { color: red; } span { color: blue; } }</style>";
51 shadowA.innerHTML = style + "<shadow></shadow>";
52
53 var hostB = document.getElementById("hostB");
54 var shadowB = new WebKitShadowRoot(hostB);
55 shadowB.innerHTML = style + "<shadow></shadow>";
56
57 dumpComputedStyle(hostA);
58 dumpComputedStyle(hostB);
59}
60
61function testPseudoHostWithScoped()
62{
63 preprocessForTest();
64 var host = document.getElementById("host");
65 var shadow = new WebKitShadowRoot(host);
66 shadow.innerHTML = "<div><style scoped>@host { div { color: red; } }</style><shadow></shadow><div><style scoped>@host { div { color: blue; } }</style></div></div>";
67 dumpComputedStyle(host);
68}
69
70function testPseudoHostWithFallbackShadow()
71{
72 preprocessForTest();
73 var host = document.getElementById("host");
74 var oldestShadow = new WebKitShadowRoot(host);
75 var youngestShadow = new WebKitShadowRoot(host);
76 oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>";
77 youngestShadow.innerHTML = "<content><shadow></shadow></content>";
78 dumpComputedStyle(host);
79}
80
81function testTwoShadowRootsCase()
82{
83 preprocessForTest();
84 var host = document.getElementById("host");
85 var oldestShadow = new WebKitShadowRoot(host);
86 var youngestShadow = new WebKitShadowRoot(host);
87 oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>";
88 youngestShadow.innerHTML = "<style>@host { div { color: blue; } }</style><shadow></shadow>";
89 dumpComputedStyle(host);
90}
91
92function testTwoShadowRootsCreatingDifferentOrderCase()
93{
94 preprocessForTest();
95 var host = document.getElementById("host");
96 var oldestShadow = new WebKitShadowRoot(host);
97 var youngestShadow = new WebKitShadowRoot(host);
98 youngestShadow.innerHTML = "<style>@host { div { color: blue; } }</style><shadow></shadow>";
99 oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>";
100 dumpComputedStyle(host);
101}
102
103function testMultipleShadowRootsWithInertShadowContent()
104{
105 preprocessForTest();
106 var host = document.getElementById("host");
107 var oldestShadow = new WebKitShadowRoot(host);
108 var olderShadow = new WebKitShadowRoot(host);
109 var youngerShadow = new WebKitShadowRoot(host);
110 var youngestShadow = new WebKitShadowRoot(host);
111
112 youngestShadow.innerHTML = "<shadow></shadow>";
113 youngerShadow.innerHTML = "<content></content>";
114 olderShadow.innerHTML = "<style>@host { div { color: green; } }</style><shadow></shadow>";
115 oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>";
116 dumpComputedStyle(host);
117}
118
119function testMultipleShadowRootsWithInertShadow()
120{
121 preprocessForTest();
122 var host = document.getElementById("host");
123 var oldestShadow = new WebKitShadowRoot(host);
124 var olderShadow = new WebKitShadowRoot(host);
125 var youngerShadow = new WebKitShadowRoot(host);
126 var youngestShadow = new WebKitShadowRoot(host);
127
128 youngestShadow.innerHTML = "<style>@host { div { color: yellow; } }</style><shadow></shadow>";
129 youngerShadow.innerHTML = "<style>@host { div { color: blue; } }</style><div>inert</div>";
130 olderShadow.innerHTML = "<style>@host { div { color: green; } }</style><shadow></shadow>";
131 oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>";
132 dumpComputedStyle(host);
133}
134
135function testNestedCase()
136{
137 preprocessForTest();
138 var host = document.getElementById("host");
139 var outerShadow = new WebKitShadowRoot(host);
140 outerShadow.innerHTML = '<style>@host { div { color: red; } }</style><div id="nestedHost">InnerShadow</div>';
141 var nested = outerShadow.getElementById("nestedHost");
142 var innerShadow = new WebKitShadowRoot(nested);
143 innerShadow.innerHTML = '<style>@host { div { color: blue; } }</style>Show <shadow></shadow> in outer.';
144 dumpComputedStyle(host);
145 dumpComputedStyle(nested);
146}
147
148function testHostVsScopedStyle()
149{
150 preprocessForTest();
151 var host = document.getElementById("host");
152 host.innerHTML = "<style scoped>#host { color: yellow; }</style><span>Hello</span>";
153 var shadow = new WebKitShadowRoot(host);
154 shadow.innerHTML = "<style>@host { #host { color: red; } }</style><content></content>";
155 dumpComputedStyle(host);
156}
157
158function testHostVsInlineStyle()
159{
160 preprocessForTest();
161 var host = document.getElementById("host");
162 host.style.color = "yellow";
163 host.innerHTML = "<span>Hello</span>";
164 var shadow = new WebKitShadowRoot(host);
165 shadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>";
166 dumpComputedStyle(host);
167}
168
169function runTests()
170{
171 testSimpleContentCase();
172 testSimpleShadowCase();
173 testHostWithSelector();
174 testPseudoHostWithScoped();
175 testPseudoHostWithFallbackShadow();
176 testTwoShadowRootsCase();
177 testTwoShadowRootsCreatingDifferentOrderCase();
178 testMultipleShadowRootsWithInertShadowContent();
179 testMultipleShadowRootsWithInertShadow();
180 testNestedCase();
181 testHostVsScopedStyle();
182 testHostVsInlineStyle();
183}
184</script>
185</head>
186<body onload="runTests()">
187 <div id="parent">
188 </div>
189</body>
190</html>