| <!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> |
| function testRemoveContent(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span>LIGHT</span>"; |
| |
| // Create shadow tree. |
| var content = createContentWithSelect('span', 'FALLBACK'); |
| var sr = internals.ensureShadowRoot(root); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(content); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, content, callIfDone) { |
| return function() { |
| content.parentNode.removeChild(content); |
| document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, content, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemoveContentToRecalc1(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span class='c1'>LIGHT 1</span><span>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var content1 = createContentWithSelect('.c1', 'FALLBACK'); |
| var content2 = createContentWithSelect('span', 'FALLBACK'); |
| var sr = internals.ensureShadowRoot(root); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(content1); |
| sr.appendChild(createSpanWithText("MID")); |
| sr.appendChild(content2); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, content1, callIfDone) { |
| return function() { |
| content1.parentNode.removeChild(content1); |
| document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>MID</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, content1, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemoveContentToRecalc2(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span>LIGHT 1</span><span class='c1'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var content1 = createContentWithSelect('.c1', 'FALLBACK'); |
| var content2 = createContentWithSelect('span', 'FALLBACK'); |
| var sr = internals.ensureShadowRoot(root); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(content1); |
| sr.appendChild(createSpanWithText("MID")); |
| sr.appendChild(content2); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, content1, callIfDone) { |
| return function() { |
| content1.parentNode.removeChild(content1); |
| document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>MID</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, content1, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testRemoveContentAndRemoveLightChildren(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span>LIGHT</span>"; |
| |
| // Create shadow tree. |
| var content = createContentWithSelect('span'); |
| var sr = internals.ensureShadowRoot(root); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(content); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, content, callIfDone) { |
| return function() { |
| content.parentNode.removeChild(content); |
| removeAllChildren(root); |
| document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, content, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testAppendContent1(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span>LIGHT</span>"; |
| |
| // Create shadow tree. |
| var sr = internals.ensureShadowRoot(root); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, callIfDone) { |
| return function() { |
| var content = createContentWithSelect('span', 'FALLBACK'); |
| var sr = internals.ensureShadowRoot(root); |
| sr.insertBefore(content, sr.lastChild); |
| document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><SPAN>LIGHT</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testAppendContent2(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span>LIGHT 1</span><span class='c2'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var sr = internals.ensureShadowRoot(root); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, callIfDone) { |
| return function() { |
| var content1 = createContentWithSelect('.c2', 'FALLBACK'); |
| var content2 = createContentWithSelect('span', 'FALLBACK'); |
| var sr = internals.ensureShadowRoot(root); |
| sr.insertBefore(content1, sr.lastChild); |
| sr.insertBefore(content2, sr.lastChild); |
| document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>LIGHT 2</span><span>LIGHT 1</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testAppendContent3(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span>LIGHT 1</span><span class='c2'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var sr = internals.ensureShadowRoot(root); |
| var mid = createSpanWithText("MID"); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(mid); |
| sr.appendChild(createContentWithSelect('.c2', 'FALLBACK')); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, mid, callIfDone) { |
| return function() { |
| var content = createContentWithSelect('span', 'FALLBACK'); |
| var sr = internals.ensureShadowRoot(root); |
| sr.insertBefore(content, mid); |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>MID</span><span>FALLBACK</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, mid, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testChangeOrderOfContent(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span class='c1'>LIGHT 1</span><span>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var sr = internals.ensureShadowRoot(root); |
| var content1 = createContentWithSelect('.c1', 'FALLBACK'); |
| var content2 = createContentWithSelect('span', 'FALLBACK'); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(content1); |
| sr.appendChild(content2); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, content1, callIfDone) { |
| return function() { |
| var sr = internals.ensureShadowRoot(root); |
| sr.removeChild(content1); |
| sr.insertBefore(content1, sr.lastChild); |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><SPAN>LIGHT 1</span><span>LIGHT 2</span><span>FALLBACK</span><span>AFTER</span></div>"; |
| callIfDone(); |
| }; |
| })(root, content1, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testMoveLightChildOut(callIfDone) { |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| var n1 = document.createElement('div'); |
| n1.setAttribute('id', 'n1'); |
| n1.innerHTML = "<span id='light1'>LIGHT 1</span><span>LIGHT 2</span>"; |
| var n2 = document.createElement('div'); |
| n2.setAttribute('id', 'n2'); |
| |
| root.appendChild(n1); |
| root.appendChild(n2); |
| |
| // Create shadow tree in 'n1' |
| var sr = internals.ensureShadowRoot(n1); |
| var content = createContentWithSelect('span', 'FALLBACK'); |
| sr.appendChild(createSpanWithText("BEFORE")); |
| sr.appendChild(content); |
| sr.appendChild(createSpanWithText("AFTER")); |
| |
| document.getElementById('actual-container').appendChild(root); |
| |
| var f = (function(root, n2, callIfDone) { |
| return function() { |
| var e = document.getElementById('light1'); |
| e.parentNode.removeChild(e); |
| n2.appendChild(e); |
| |
| document.getElementById('expect-container').innerHTML = |
| "<div><div><span>BEFORE</span><span>LIGHT 2</span><span>AFTER</span></div><div><span>LIGHT 1</span></div></div>" |
| callIfDone(); |
| }; |
| })(root, n2, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testInsertBeforeFallback(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><span>HOGE</span><span>FALLBACK</span><span>AFTER</span></div>"; |
| |
| var target = document.createElement('div'); |
| document.getElementById('actual-container').appendChild(target); |
| |
| var span1 = document.createElement('span'); |
| var root = internals.ensureShadowRoot(span1); |
| root.appendChild(createContentWithText("FALLBACK")); |
| |
| target.appendChild(createSpanWithText('BEFORE')); |
| target.appendChild(span1); |
| target.appendChild(createSpanWithText('AFTER')); |
| |
| var f = (function(target, span1, callIfDone) { return function() { |
| target.insertBefore(createSpanWithText('HOGE'), span1); |
| callIfDone(); |
| };})(target, span1, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| var testFuncs = [ |
| testRemoveContent, |
| testRemoveContentToRecalc1, |
| testRemoveContentToRecalc2, |
| testRemoveContentAndRemoveLightChildren, |
| testAppendContent1, |
| testAppendContent2, |
| testAppendContent3, |
| testChangeOrderOfContent, |
| testMoveLightChildOut, |
| testInsertBeforeFallback |
| ]; |
| |
| </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> |
