| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* relative positioning ensures underlying RenderLayer */ |
| .container { |
| position: relative; |
| } |
| |
| .span { |
| display: boxed-inline; |
| margin: 2px; |
| border: solid; |
| } |
| </style> |
| <script src="../resources/shadow-test-driver.js"></script> |
| <script> |
| var testFuncs = []; |
| |
| testFuncs.push(function renderingDoubleShadowRoot(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>MID</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| callIfDone(); |
| }); |
| |
| testFuncs.push(function renderingDoubleShadowRootWithOneShadowElement(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| // MID won't be rendered. |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| callIfDone(); |
| }); |
| |
| testFuncs.push(function renderingTripleShadowRoot(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 3</span><span>BEFORE 2</span><span>BEFORE 1</span>" + |
| "<span>MID</span>" + |
| "<span>AFTER 1</span><span>AFTER 2</span><span>AFTER 3</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| var sr3 = root.webkitCreateShadowRoot(); |
| sr3.appendChild(createSpanWithText('BEFORE 3')); |
| sr3.appendChild(document.createElement('shadow')); |
| sr3.appendChild(createSpanWithText('AFTER 3')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| callIfDone(); |
| }); |
| |
| testFuncs.push(function renderingTwoShadowRoots(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span>" + |
| "<span>BEFORE 1</span><span>MID</span><span>AFTER 1</span>" + |
| "<span>FALLBACK 2-2</span>" + |
| "<span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| var shadow21 = document.createElement('shadow'); |
| shadow21.appendChild(createSpanWithText('FALLBACK 2-1')); |
| var shadow22 = document.createElement('shadow'); |
| shadow22.appendChild(createSpanWithText('FALLBACK 2-2')); |
| |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(shadow21); |
| sr2.appendChild(shadow22); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| callIfDone(); |
| }); |
| |
| testFuncs.push(function testWithDoubleShadowRootWithContent1(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>MID 2</span>" + |
| "<span>BEFORE 1</span><span>MID 1</span><span>MID 3</span><span>AFTER 1</span>" + |
| "<span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID 3', 'sr3')); |
| root.appendChild(createSpanWithText('MID 1', 'sr1')); |
| root.appendChild(createSpanWithText('MID 2', 'sr2')); |
| |
| var shadow1 = document.createElement('shadow'); |
| shadow1.appendChild(createSpanWithText('SHADOW FALLBACK 1')); |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| var content1 = createContentWithSelect('.sr1', 'CONTENT FALLBACK 1'); |
| sr1.appendChild(content1); |
| sr1.appendChild(shadow1); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var shadow2 = document.createElement('shadow'); |
| shadow2.appendChild(createSpanWithText('SHADOW FALLBACK 2')); |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| var content; |
| sr2.appendChild(content = createContentWithSelect('.sr2', 'CONTENT FALLBACK 2')); |
| content.title = "debugstop"; |
| sr2.appendChild(shadow2); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| callIfDone(); |
| }); |
| |
| testFuncs.push(function testWithDoubleShadowRootWithContent2(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>MID 2</span><span>MID 3</span><span>MID 1</span>" + |
| "<span>BEFORE 1</span><span>CONTENT FALLBACK 1</span><span>SHADOW FALLBACK 1</span><span>AFTER 1</span>" + |
| "<span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID 3', 'sr3')); |
| root.appendChild(createSpanWithText('MID 1', 'sr1')); |
| root.appendChild(createSpanWithText('MID 2', 'sr2')); |
| |
| var shadow1 = document.createElement('shadow'); |
| shadow1.appendChild(createSpanWithText('SHADOW FALLBACK 1')); |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(createContentWithSelect('.sr1', 'CONTENT FALLBACK 1')); |
| sr1.appendChild(shadow1); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var shadow2 = document.createElement('shadow'); |
| shadow2.appendChild(createSpanWithText('SHADOW FALLBACK 2')); |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(createContentWithSelect('.sr2', 'CONTENT FALLBACK 2')); |
| sr2.appendChild(createContentWithSelect('span', 'CONTENT FALLBACK 3')); |
| sr2.appendChild(shadow2); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| callIfDone(); |
| }); |
| |
| testFuncs.push(function renderingDoubleShadowRootDynamicallyAdded1(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>MID</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, callIfDone) { return function() { |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| callIfDone(); |
| };})(root, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingDoubleShadowRootDynamicallyAdded2(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>MID</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(sr2, callIfDone) { return function() { |
| var shadow = document.createElement('shadow'); |
| sr2.insertBefore(shadow, sr2.lastChild); |
| |
| callIfDone() |
| };})(sr2, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingDoubleShadowRootDynamicallyAdded3(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>MID</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(sr1, callIfDone) { return function() { |
| var shadow = document.createElement('shadow'); |
| sr1.insertBefore(shadow, sr1.lastChild); |
| |
| callIfDone() |
| };})(sr1, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingDoubleShadowRootDynamicallyRemoved1(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(sr2, callIfDone) { return function() { |
| sr2.removeChild(sr2.firstChild.nextSibling); |
| callIfDone(); |
| };})(sr2, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingDoubleShadowRootDynamicallyRemoved2(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(sr1, callIfDone) { return function() { |
| sr1.removeChild(sr1.firstChild.nextSibling); |
| callIfDone(); |
| };})(sr1, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingLightChildrenDynamicallyAdded(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>MID</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, callIfDone) { return function() { |
| root.appendChild(createSpanWithText('MID')); |
| callIfDone(); |
| };})(root, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingOlderShadowRootContentDynamicallyAdded(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>MID</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(sr1, callIfDone) { return function() { |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| callIfDone(); |
| };})(sr1, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingLightChildrenDynamicallyRemoved(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, callIfDone) { return function() { |
| root.removeChild(root.firstChild); |
| callIfDone(); |
| };})(root, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| testFuncs.push(function renderingOlderShadowRootContentDynamicallyRemoved(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE 2</span><span>BEFORE 1</span><span>MID</span><span>AFTER 1</span><span>AFTER 2</span></div>"; |
| |
| var root = document.createElement('div'); |
| root.appendChild(createSpanWithText('MID')); |
| |
| var sr1 = root.webkitCreateShadowRoot(); |
| sr1.appendChild(createSpanWithText('BEFORE 1')); |
| sr1.appendChild(document.createElement('shadow')); |
| sr1.appendChild(createSpanWithText('AFTER 1')); |
| sr1.appendChild(createSpanWithText('SHOULD NOT BE RENDERED')); |
| |
| var sr2 = root.webkitCreateShadowRoot(); |
| sr2.appendChild(createSpanWithText('BEFORE 2')); |
| sr2.appendChild(document.createElement('shadow')); |
| sr2.appendChild(createSpanWithText('AFTER 2')); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(sr1, callIfDone) { return function() { |
| sr1.removeChild(sr1.lastChild); |
| callIfDone(); |
| };})(sr1, callIfDone); |
| |
| setTimeout(f, 0); |
| }); |
| |
| </script> |
| </head> |
| <body onload="doTest(testFuncs)"> |
| |
| <div id="actual-container" class="container"></div> |
| <div id="expect-container" class="container"></div> |
| <pre id="console"></pre> |
| |
| </body> |
| </html> |
