| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* relative positioning ensures underlying Layer */ |
| .container { |
| position: relative; |
| } |
| |
| .span { |
| display: boxed-inline; |
| margin: 2px; |
| border: solid; |
| } |
| </style> |
| <script> |
| function log(message) { |
| document.getElementById('console').innerHTML += (message + "\n"); |
| } |
| |
| function removeAllChildren(elem) { |
| while (elem.firstChild) |
| elem.removeChild(elem.firstChild); |
| } |
| |
| function cleanUp() { |
| removeAllChildren(document.getElementById('actual-container')); |
| removeAllChildren(document.getElementById('expect-container')); |
| } |
| |
| function removeContainerLines(text) { |
| var lines = text.split('\n'); |
| lines.splice(0, 2); |
| return lines.join('\n'); |
| } |
| |
| function check() { |
| var refContainerLayoutTree = internals.elementLayoutTreeAsText(document.getElementById('expect-container')); |
| var refLayoutTree = removeContainerLines(refContainerLayoutTree); |
| |
| var targetContainerLayoutTree = internals.elementLayoutTreeAsText(document.getElementById('actual-container')); |
| var targetLayoutTree = removeContainerLines(targetContainerLayoutTree); |
| |
| if (targetLayoutTree == refLayoutTree) |
| log("PASS"); |
| else { |
| log("FAIL"); |
| log("Expected: "); |
| log(refLayoutTree); |
| log("Actual: "); |
| log(targetLayoutTree); |
| } |
| |
| } |
| |
| function createSpanWithText(text) { |
| var span = document.createElement('span'); |
| span.appendChild(document.createTextNode(text)); |
| return span; |
| } |
| |
| function appendShadow(target, select) { |
| var root = target.createShadowRoot(); |
| |
| var content = document.createElement('content'); |
| content.setAttribute('select', select); |
| content.appendChild(createSpanWithText("FALLBACK")); |
| |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(content); |
| root.appendChild(document.createTextNode("}")); |
| } |
| |
| function appendShadowDeep(target, select) { |
| var root = target.createShadowRoot(); |
| |
| var child = document.createElement("span"); |
| { |
| var content = document.createElement('content'); |
| content.setAttribute('select', select); |
| content.appendChild(createSpanWithText("FALLBACK")); |
| |
| child.appendChild(document.createTextNode("{INNER: ")); |
| child.appendChild(content); |
| child.appendChild(document.createTextNode("}")); |
| } |
| |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(child); |
| root.appendChild(document.createTextNode("}")); |
| } |
| |
| function testFallback() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>SELECTED</span>"; |
| |
| appendShadow(target, "#non-element"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>FALLBACK</span>}</div>"; |
| } |
| |
| function testFallbackDeep() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>SELECTED</span>"; |
| |
| appendShadowDeep(target, "#non-element"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</div>"; |
| } |
| |
| function testNonFallbackWithLightChildren() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='selected-1'>SELECTED</span>"; |
| |
| appendShadow(target, "#selected-1"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>SELECTED</span>}</div>"; |
| } |
| |
| function testNonFallbackDeepWithLightChildren() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='selected-2'>SELECTED</span>"; |
| |
| appendShadowDeep(target, "#selected-2"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</div>"; |
| } |
| |
| function testComplexFallback() { |
| var target = document.createElement('div'); |
| appendShadow(target, '#complex-1'); |
| |
| var selectContent = document.createElement('span'); |
| selectContent.setAttribute('id', 'complex-1'); |
| { |
| selectContent.appendChild(createSpanWithText('SELECTED')); |
| } |
| appendShadow(selectContent, 'span'); |
| |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| target.appendChild(selectContent); |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{SHADOW: <span>SELECTED</span>}</span>}</div>"; |
| } |
| |
| function testComplexFallbackDeep() { |
| var target = document.createElement('div'); |
| appendShadowDeep(target, '#complex-2'); |
| |
| var selectContent = document.createElement('span'); |
| selectContent.setAttribute('id', 'complex-2'); |
| { |
| selectContent.appendChild(createSpanWithText('SELECTED')); |
| } |
| appendShadowDeep(selectContent, 'span'); |
| |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| target.appendChild(selectContent); |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</span>}</span>}</span></div>"; |
| } |
| |
| function testComplexFallbackAgain() { |
| var target = document.createElement('div'); |
| appendShadow(target, '#complex-3'); |
| |
| var selectContent = document.createElement('span'); |
| selectContent.setAttribute('id', 'complex-3'); |
| { |
| selectContent.appendChild(createSpanWithText('SELECTED')); |
| } |
| appendShadow(selectContent, '#non-element'); |
| |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| target.appendChild(selectContent); |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{SHADOW: <span>FALLBACK</span>}</span>}</span></div>"; |
| } |
| |
| function testComplexFallbackDeepAgain() { |
| var target = document.createElement('div'); |
| appendShadowDeep(target, '#complex-4'); |
| |
| var selectContent = document.createElement('span'); |
| selectContent.setAttribute('id', 'complex-4'); |
| { |
| selectContent.appendChild(createSpanWithText('SELECTED')); |
| } |
| appendShadowDeep(selectContent, '#non-element'); |
| |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| target.appendChild(selectContent); |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</span>}</span>}</span></div>"; |
| } |
| |
| function testContentkWithDisplayNone() { |
| var target = document.createElement('div'); |
| |
| var span1 = createSpanWithText('NOT RENDERED'); |
| span1.style.display = 'none'; |
| var span2 = createSpanWithText('NOT RENDERED'); |
| span2.style.display = 'none'; |
| var span3 = createSpanWithText('NOT RENDERED'); |
| span3.style.display = 'none'; |
| |
| target.appendChild(span1); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(span2); |
| target.appendChild(createSpanWithText('S2')); |
| target.appendChild(span3); |
| |
| var root = target.createShadowRoot(); |
| var content = document.createElement('content'); |
| content.setAttribute('select', 'span'); |
| content.appendChild(createSpanWithText('FALLBACK')); |
| |
| var s = createSpanWithText('NOT RENDERED'); |
| s.style.display = 'none'; |
| root.appendChild(s); |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(content); |
| root.appendChild(document.createTextNode("}")); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>S1</span><span>S2</span>}</div>"; |
| } |
| |
| function testContentInContent() { |
| var target = document.createElement('div'); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(createSpanWithText('S2')); |
| |
| var root = target.createShadowRoot(); |
| var content2 = document.createElement('content'); |
| content2.setAttribute('select', 'span'); |
| content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK')); |
| |
| var content1 = document.createElement('content'); |
| content1.setAttribute('select', 'div'); |
| content1.appendChild(content2); |
| |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(content1); |
| root.appendChild(document.createTextNode("}")); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>"; |
| } |
| |
| function testContentInContentFallback() { |
| var target = document.createElement('div'); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(createSpanWithText('S2')); |
| |
| var root = target.createShadowRoot(); |
| var content2 = document.createElement('content'); |
| content2.setAttribute('select', 'div'); |
| content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK')); |
| |
| var content1 = document.createElement('content'); |
| content1.setAttribute('select', 'div'); |
| content1.appendChild(content2); |
| |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(content1); |
| root.appendChild(document.createTextNode("}")); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>"; |
| } |
| |
| function testContentInContentFallbackWithDisplayNone() { |
| var target = document.createElement('div'); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(createSpanWithText('S2')); |
| |
| var root = target.createShadowRoot(); |
| var content2 = document.createElement('content'); |
| content2.setAttribute('select', 'div'); |
| content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK')); |
| |
| var content1 = document.createElement('content'); |
| content1.setAttribute('select', 'div'); |
| content1.appendChild(content2); |
| |
| var s = createSpanWithText('NOT RENDERED'); |
| s.style.display = 'none'; |
| root.appendChild(s); |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(content1); |
| root.appendChild(document.createTextNode("}")); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>"; |
| } |
| |
| function testContentInContentFallbackDirect() { |
| var target = document.createElement('div'); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(createSpanWithText('S2')); |
| |
| var root = target.createShadowRoot(); |
| var content2 = document.createElement('content'); |
| content2.setAttribute('select', 'div'); |
| content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK')); |
| |
| var content1 = document.createElement('content'); |
| content1.setAttribute('select', 'div'); |
| content1.appendChild(content2); |
| |
| root.appendChild(content1); |
| |
| document.getElementById('actual-container').appendChild(target); |
| document.getElementById('expect-container').innerHTML = |
| "<div><content><span>CONTENT 2 FALLBACK</span></content></div>"; |
| } |
| |
| var testFuncs = [ |
| testFallback, |
| testFallbackDeep, |
| testNonFallbackWithLightChildren, |
| testNonFallbackDeepWithLightChildren, |
| testComplexFallback, |
| testComplexFallbackDeep, |
| testComplexFallbackAgain, |
| testComplexFallbackDeepAgain, |
| testContentkWithDisplayNone, |
| testContentInContent, |
| testContentInContentFallback, |
| testContentInContentFallbackWithDisplayNone, |
| testContentInContentFallbackDirect |
| ]; |
| |
| function doTest() { |
| testRunner.dumpAsText(); |
| cleanUp(); |
| |
| for (var i = 0; i < testFuncs.length; ++i) { |
| testFuncs[i](); |
| check(); |
| cleanUp(); |
| } |
| } |
| </script> |
| </head> |
| <body onload="doTest()"> |
| |
| <div id="actual-container" class="container"></div> |
| <div id="expect-container" class="container"></div> |
| <pre id="console"></pre> |
| |
| </body> |
| </html> |