1 <!DOCTYPE html>
2<html>
3<head>
4<style>
5/* relative positioning ensures underlying RenderLayer */
6.container {
7 position: relative;
8}
9
10.span {
11 display: boxed-inline;
12 margin: 2px;
13 border: solid;
14}
15</style>
16<script>
17function log(message) {
18 document.getElementById('console').innerHTML += (message + "\n");
19}
20
21function removeAllChildren(elem) {
22 while (elem.firstChild)
23 elem.removeChild(elem.firstChild);
24}
25
26function cleanUp() {
27 removeAllChildren(document.getElementById('actual-container'));
28 removeAllChildren(document.getElementById('expect-container'));
29}
30
31function removeContainerLines(text) {
32 var lines = text.split('\n');
33 lines.splice(0, 2);
34 return lines.join('\n');
35}
36
37function check() {
38 var refContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('expect-container'));
39 var refRenderTree = removeContainerLines(refContainerRenderTree);
40
41 var targetContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('actual-container'));
42 var targetRenderTree = removeContainerLines(targetContainerRenderTree);
43
44 if (targetRenderTree == refRenderTree)
45 log("PASS");
46 else {
47 log("FAIL");
48 log("Expected: ");
49 log(refRenderTree);
50 log("Actual: ");
51 log(targetRenderTree);
52 }
53}
54
55function createSpanWithText(text) {
56 var span = document.createElement('span');
57 span.appendChild(document.createTextNode(text));
58 return span;
59}
60
61function createContentWithSelect(select, fallback) {
62 var content = internals.createContentElement(document);
63 content.setAttribute('select', select);
64 if (!fallback)
65 content.appendChild(createSpanWithText("FALLBACK"));
66
67 return content;
68}
69
70function appendShadow(target, select) {
71 var root = internals.ensureShadowRoot(target);
72
73 var content = internals.createContentElement(document);
74 content.setAttribute('select', select);
75 content.appendChild(createSpanWithText("FALLBACK"));
76
77 root.appendChild(document.createTextNode("{SHADOW: "));
78 root.appendChild(content);
79 root.appendChild(document.createTextNode("}"));
80}
81
82function appendShadowDeep(target, select) {
83 var root = internals.ensureShadowRoot(target);
84
85 var child = document.createElement("span");
86 {
87 var content = internals.createContentElement(document);
88 content.setAttribute('select', select);
89 content.appendChild(createSpanWithText("FALLBACK"));
90
91 child.appendChild(document.createTextNode("{INNER: "));
92 child.appendChild(content);
93 child.appendChild(document.createTextNode("}"));
94 }
95
96 root.appendChild(document.createTextNode("{SHADOW: "));
97 root.appendChild(child);
98 root.appendChild(document.createTextNode("}"));
99}
100
101// ----------------------------------------------------------------------
102// Test Functions.
103
104function testChangeSelect1(callIfDone) {
105 var root = document.createElement('div');
106
107 // Create light tree.
108 root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
109
110 // Create shadow tree.
111 var content = createContentWithSelect('.c1');
112 var sr = internals.ensureShadowRoot(root);
113 sr.appendChild(createSpanWithText("BEFORE"));
114 sr.appendChild(content);
115 sr.appendChild(createSpanWithText("AFTER"));
116
117 document.getElementById('actual-container').appendChild(root);
118
119 var f = (function(root, content, callIfDone) {
120 return function() {
121 content.setAttribute('select', '.c2');
122 document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>LIGHT 2</span><span>AFTER</span></div>";
123 callIfDone();
124 };
125 })(root, content, callIfDone);
126
127 setTimeout(f, 0);
128}
129
130function testChangeSelect2(callIfDone) {
131 var root = document.createElement('div');
132
133 // Create light tree.
134 root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
135
136 // Create shadow tree.
137 var content = createContentWithSelect('.c1');
138 var sr = internals.ensureShadowRoot(root);
139 sr.appendChild(createSpanWithText("BEFORE"));
140 sr.appendChild(content);
141 sr.appendChild(createSpanWithText("AFTER"));
142
143 document.getElementById('actual-container').appendChild(root);
144
145 var f = (function(root, content, callIfDone) {
146 return function() {
147 content.setAttribute('select', 'span');
148 document.getElementById('expect-container').innerHTML =
149 "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
150 callIfDone();
151 };
152 })(root, content, callIfDone);
153
154 setTimeout(f, 0);
155}
156
157function testChangeSelectToEmpty(callIfDone) {
158 var root = document.createElement('div');
159
160 // Create light tree.
161 root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
162
163 // Create shadow tree.
164 var content = createContentWithSelect('.c1');
165 var sr = internals.ensureShadowRoot(root);
166 sr.appendChild(createSpanWithText("BEFORE"));
167 sr.appendChild(content);
168 sr.appendChild(createSpanWithText("AFTER"));
169
170 document.getElementById('actual-container').appendChild(root);
171
172 var f = (function(root, content, callIfDone) {
173 return function() {
174 content.removeAttribute('select');
175 document.getElementById('expect-container').innerHTML =
176 "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
177 callIfDone();
178 };
179 })(root, content, callIfDone);
180
181 setTimeout(f, 0);
182}
183
184function testChangeSelectToFallback(callIfDone) {
185 var root = document.createElement('div');
186
187 // Create light tree.
188 root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
189
190 // Create shadow tree.
191 var content = createContentWithSelect('.c1');
192 content.innerHTML = "<span>FALLBACK</span>"
193
194 var sr = internals.ensureShadowRoot(root);
195 sr.appendChild(createSpanWithText("BEFORE"));
196 sr.appendChild(content);
197 sr.appendChild(createSpanWithText("AFTER"));
198
199 document.getElementById('actual-container').appendChild(root);
200
201 var f = (function(root, content, callIfDone) {
202 return function() {
203 content.setAttribute('select', 'div')
204 document.getElementById('expect-container').innerHTML =
205 "<div><span>BEFORE</span><span>FALLBACK</span><span>AFTER</span></div>";
206 callIfDone();
207 };
208 })(root, content, callIfDone);
209
210 setTimeout(f, 0);
211}
212
213function testChangeSelectFromFallback(callIfDone) {
214 var root = document.createElement('div');
215
216 // Create light tree.
217 root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
218
219 // Create shadow tree.
220 var content = createContentWithSelect('div');
221 content.innerHTML = "<span>FALLBACK</span>"
222
223 var sr = internals.ensureShadowRoot(root);
224 sr.appendChild(createSpanWithText("BEFORE"));
225 sr.appendChild(content);
226 sr.appendChild(createSpanWithText("AFTER"));
227
228 document.getElementById('actual-container').appendChild(root);
229
230 var f = (function(root, content, callIfDone) {
231 return function() {
232 content.setAttribute('select', 'span')
233 document.getElementById('expect-container').innerHTML =
234 "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
235 callIfDone();
236 };
237 })(root, content, callIfDone);
238
239 setTimeout(f, 0);
240}
241
242// ----------------------------------------------------------------------
243// Test Drivers.
244
245var testFuncs = [
246 testChangeSelect1,
247 testChangeSelect2,
248 testChangeSelectToEmpty,
249 testChangeSelectToFallback,
250 testChangeSelectFromFallback,
251];
252
253function doTestIfLeft() {
254 var test = testFuncs.shift();
255 if (test == null)
256 return doneTest();
257
258 var callIfDone = function() {
259 setTimeout(function() {
260 check();
261 cleanUp();
262 doTestIfLeft();
263 }, 0);
264 };
265
266 log(test.name);
267 test(callIfDone);
268}
269
270function doneTest() {
271 log("TEST COMPLETED");
272 layoutTestController.notifyDone();
273}
274
275function doTest() {
276 if (window.layoutTestController) {
277 layoutTestController.waitUntilDone();
278 layoutTestController.dumpAsText();
279 }
280
281 cleanUp();
282 doTestIfLeft();
283}
284</script>
285</head>
286<body onload="doTest()">
287
288<div id="actual-container" class="container"></div>
289<div id="expect-container" class="container"></div>
290<pre id="console"></pre>
291
292</body>
293</html>