| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* relative positioning ensures underlying RenderLayer */ |
| .container { |
| position: relative; |
| } |
| </style> |
| <script> |
| function appendShadow(target, select) { |
| var root = internals.ensureShadowRoot(target); |
| |
| var child0 = document.createElement("span"); |
| child0.innerHTML = "Hello,"; |
| root.appendChild(child0); |
| |
| var content = internals.createContentElement(); |
| content.setAttribute('select', select); |
| root.appendChild(content); |
| |
| var child1 = document.createElement("span"); |
| child1.innerHTML = "World."; |
| root.appendChild(child1); |
| } |
| |
| function testSelectIsNull() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>content</span>"; |
| |
| appendShadow(target, ""); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsId() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span>"; |
| |
| appendShadow(target, "#foo"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsIdButNotMatched() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span>"; |
| |
| appendShadow(target, "#foobar"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsIdButNotChild() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span><span id='foo'>content</span><span id='azunyan'>peropero</span></span>"; |
| |
| appendShadow(target, "#foo"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsMultiId() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span><span id='foo'>content</span>"; |
| |
| appendShadow(target, "#foo"); |
| |
| // All matched elements will be selected. |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsType() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<div>azunyan</div><span>content</span><div>peropero</div>"; |
| |
| appendShadow(target, "span"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsTypeWithAttribute() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>azunyan</span><span title='content'>content</span><span>peropero</span>"; |
| |
| appendShadow(target, "span[title='content']"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsTypeWithFirstOfType() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<div>azunyan</div><span>content</span><span>peropero</span>"; |
| |
| appendShadow(target, "span:first-of-type"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsTypeWithFirstOfType2() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<div><span>azunyan</span></div><span>content</span><span>peropero</span>"; |
| |
| appendShadow(target, "span:first-of-type"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsTypeWithLastOfType() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>azunyan</span><span>content</span><div>peropero</div>"; |
| |
| appendShadow(target, "span:last-of-type"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsDetails() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<details>content</details>"; |
| |
| appendShadow(target, "details"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectIsDetails2() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<details><summary>content</summary></details>"; |
| |
| appendShadow(target, "details"); |
| |
| document.getElementById('container').appendChild(target); |
| } |
| |
| function testSelectWhenDynamicallyChildrenChanged() { |
| var target = document.createElement('div'); |
| target.innerHTML = "<span>content</span><span id='toberemoved'>anunyan peropero</span>"; |
| |
| appendShadow(target, "span"); |
| |
| document.getElementById('container').appendChild(target); |
| |
| var elem = document.getElementById('toberemoved'); |
| elem.parentNode.removeChild(elem); |
| } |
| |
| var testFuncs = [ |
| testSelectIsNull, |
| testSelectIsId, |
| testSelectIsIdButNotMatched, |
| testSelectIsIdButNotChild, |
| testSelectIsMultiId, |
| testSelectIsType, |
| testSelectIsTypeWithAttribute, |
| testSelectIsTypeWithFirstOfType, |
| testSelectIsTypeWithFirstOfType2, |
| testSelectIsTypeWithLastOfType, |
| testSelectIsDetails, |
| testSelectIsDetails2, |
| testSelectWhenDynamicallyChildrenChanged, |
| ] |
| |
| function doTest() { |
| for (var i = 0; i < testFuncs.length; ++i) { |
| testFuncs[i](); |
| } |
| } |
| </script> |
| </head> |
| <body onload="doTest()"> |
| <div id="container"></div> |
| </body> |
| </html> |
