| <!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 testAppendFallback(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>content</span>"; |
| |
| appendShadow(target, "#append"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.innerHTML = "<span id='append'>appended</span>"; |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>appended</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testAppendFallbackDeep(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>content</span>"; |
| |
| appendShadowDeep(target, "#append-deep"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.innerHTML = "<span id='append-deep'>appended</span>"; |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>{INNER: <span>appended</span>}</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemoveFallback(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='remove'>content</span>"; |
| |
| appendShadow(target, "#remove"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.innerHTML = "<span>content</span>" |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>FALLBACK</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemoveFallbackDeep(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='remove-deep'>content</span>"; |
| |
| appendShadowDeep(target, "#remove-deep"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.innerHTML = "<span>content</span>" |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemove1(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='remove1-1'>content 1</span><span id='remove1-2'>content 2</span>"; |
| appendShadow(target, "span"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.removeChild(document.getElementById('remove1-1')); |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>content 2</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemove2(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='testremove2-1'>content 1</span><span id='testremove2-2'>content 2</span>"; |
| appendShadow(target, "span"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.removeChild(document.getElementById('testremove2-2')); |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>content 1</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemove3(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='testremove3-1'>content 1</span><span id='testremove3-2'>content 2</span>"; |
| appendShadow(target, "span"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.removeChild(document.getElementById('testremove3-1')); |
| target.removeChild(document.getElementById('testremove3-2')); |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>FALLBACK</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testReplaceFallback(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='to-replace'>content</span>"; |
| |
| appendShadow(target, "#to-replace"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.innerHTML = "<span id='to-replace'>replaced</span>"; |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>replaced</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testFallbackContentChanged(callIfDone) { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>content</span>"; |
| |
| appendShadow(target, "#non-element"); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, callIfDone) { |
| return function() { |
| target.appendChild(createSpanWithText('appended content')); |
| document.getElementById('expect-container').innerHTML = "<div>{SHADOW: <span>FALLBACK</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testComplexAppend(callIfDone) { |
| var target = document.createElement('div'); |
| appendShadow(target, '#complex-1'); |
| |
| var selectContent = document.createElement('span'); |
| selectContent.setAttribute('id', 'complex-1'); |
| appendShadow(selectContent, 'span'); |
| |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| target.appendChild(selectContent); |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, selectContent, callIfDone) { |
| return function() { |
| selectContent.appendChild(createSpanWithText('SELECTED')); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{SHADOW: <span>SELECTED</span>}</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, selectContent, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testComplexRemove(callIfDone) { |
| var target = document.createElement('div'); |
| appendShadow(target, '#complex-2'); |
| |
| var selectContent = document.createElement('span'); |
| selectContent.setAttribute('id', 'complex-2'); |
| { |
| 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); |
| |
| var f = (function(target, selectContent, callIfDone) { |
| return function() { |
| removeAllChildren(selectContent); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{SHADOW: <span>FALLBACK</span>}</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, selectContent, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testComplexReplace(callIfDone) { |
| var target = document.createElement('div'); |
| appendShadow(target, '#complex-3'); |
| |
| var selectContent = document.createElement('span'); |
| selectContent.setAttribute('id', 'complex-3'); |
| appendShadow(selectContent, 'span'); |
| |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| target.appendChild(selectContent); |
| target.appendChild(document.createTextNode('[WONT SELECTED]')); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, selectContent, callIfDone) { |
| return function() { |
| removeAllChildren(selectContent); |
| selectContent.appendChild(createSpanWithText('REPLACED')); |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <span>{SHADOW: <span>REPLACED</span>}</span>}</div>"; |
| callIfDone(); |
| }; |
| })(target, selectContent, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testContentInContent(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>"; |
| |
| var target = document.createElement('div'); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(createSpanWithText('S2')); |
| |
| var root = target.createShadowRoot(); |
| var content1 = document.createElement('content'); |
| content1.setAttribute('select', 'div'); |
| |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(content1); |
| root.appendChild(document.createTextNode("}")); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, content1, callIfDone) { |
| return function() { |
| var content2 = document.createElement('content'); |
| content2.setAttribute('select', 'span'); |
| content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK')); |
| content1.appendChild(content2); |
| callIfDone(); |
| }; |
| })(target, content1, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testContentInContentFallback(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>"; |
| |
| var target = document.createElement('div'); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(createSpanWithText('S2')); |
| |
| var root = target.createShadowRoot(); |
| var content1 = document.createElement('content'); |
| content1.setAttribute('select', 'div'); |
| |
| root.appendChild(document.createTextNode("{SHADOW: ")); |
| root.appendChild(content1); |
| root.appendChild(document.createTextNode("}")); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, content1, callIfDone) { |
| return function() { |
| var content2 = document.createElement('content'); |
| content2.setAttribute('select', 'div'); |
| content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK')); |
| content1.appendChild(content2); |
| callIfDone(); |
| }; |
| })(target, content1, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testContentInContentFallbackDirect(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><content><span>CONTENT 2 FALLBACK</span></content></div>"; |
| |
| var target = document.createElement('div'); |
| target.appendChild(createSpanWithText('S1')); |
| target.appendChild(createSpanWithText('S2')); |
| |
| var root = target.createShadowRoot(); |
| var content1 = document.createElement('content'); |
| content1.setAttribute('select', 'div'); |
| root.appendChild(content1); |
| |
| document.getElementById('actual-container').appendChild(target); |
| |
| var f = (function(target, content1, callIfDone) { |
| return function() { |
| var content2 = document.createElement('content'); |
| content2.setAttribute('select', 'div'); |
| content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK')); |
| content1.appendChild(content2); |
| callIfDone(); |
| }; |
| })(target, content1, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| var testFuncs = [ |
| testAppendFallback, |
| testAppendFallbackDeep, |
| testRemoveFallback, |
| testRemoveFallbackDeep, |
| testRemove1, |
| testRemove2, |
| testRemove3, |
| testReplaceFallback, |
| testFallbackContentChanged, |
| testComplexAppend, |
| testComplexRemove, |
| testComplexReplace, |
| testContentInContent, |
| testContentInContentFallback, |
| testContentInContentFallbackDirect |
| ]; |
| |
| function doTestIfLeft() { |
| var test = testFuncs.shift(); |
| if (test == null) |
| return doneTest(); |
| |
| var callIfDone = function() { |
| setTimeout(function() { |
| check(); |
| cleanUp(); |
| doTestIfLeft(); |
| }, 0); |
| }; |
| |
| log(test.name); |
| test(callIfDone); |
| } |
| |
| function doneTest() { |
| log("TEST COMPLETED"); |
| testRunner.notifyDone(); |
| } |
| |
| function doTest() { |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| cleanUp(); |
| doTestIfLeft(); |
| } |
| </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> |
