| <!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 testChangeSelect1(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><span>LIGHT 2</span><span>AFTER</span></div>"; |
| |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var content = createContentWithSelect('.c1'); |
| 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.setAttribute('select', '.c2'); |
| callIfDone(); |
| }; |
| })(root, content, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testChangeSelect2(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>"; |
| |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var content = createContentWithSelect('.c1'); |
| 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.setAttribute('select', 'span'); |
| callIfDone(); |
| }; |
| })(root, content, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testChangeSelectToEmpty(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>"; |
| |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var content = createContentWithSelect('.c1'); |
| 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.removeAttribute('select'); |
| callIfDone(); |
| }; |
| })(root, content, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testChangeSelectToFallback(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><span>FALLBACK</span><span>AFTER</span></div>"; |
| |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var content = createContentWithSelect('.c1'); |
| content.innerHTML = "<span>FALLBACK</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.setAttribute('select', 'div') |
| callIfDone(); |
| }; |
| })(root, content, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| function testChangeSelectFromFallback(callIfDone) { |
| document.getElementById('expect-container').innerHTML = |
| "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>"; |
| |
| var root = document.createElement('div'); |
| |
| // Create light tree. |
| root.innerHTML = "<span class='c1'>LIGHT 1</span><span class='c2'>LIGHT 2</span>"; |
| |
| // Create shadow tree. |
| var content = createContentWithSelect('div'); |
| content.innerHTML = "<span>FALLBACK</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.setAttribute('select', 'span') |
| callIfDone(); |
| }; |
| })(root, content, callIfDone); |
| |
| setTimeout(f, 0); |
| } |
| |
| var testFuncs = [ |
| testChangeSelect1, |
| testChangeSelect2, |
| testChangeSelectToEmpty, |
| testChangeSelectToFallback, |
| testChangeSelectFromFallback, |
| ]; |
| |
| </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> |
