get-elements.html (8930B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name='author' title='Google' href='http://www.google.com'> 5 <meta name='assert' content='getElement* API in document should not leak any node in shadow tree.'> 6 <link rel='help' href='https://w3c.github.io/webcomponents/spec/shadow/'> 7 <script src='/resources/testharness.js'></script> 8 <script src='/resources/testharnessreport.js'></script> 9 </head> 10 <body> 11 12 <!-- This template will be filled in '#doc', '#host-open', and '#host-closed' below --> 13 <template id='domtree-template'> 14 <span id='foo'></span> 15 <div class='bar'></div> 16 <form name='baz'></form> 17 <my-element></my-element> 18 </template> 19 20 <div id='doc'> 21 <div id='host-open'></div> 22 <div id='host-closed'></div> 23 </div> 24 25 </body> 26 <script> 27 'use strict'; 28 29 function fillTemplate(root, prefix) { 30 var tmpl = document.getElementById('domtree-template'); 31 root.appendChild(document.importNode(tmpl.content, true)); 32 for (var i = 0; i < root.childNodes.length; ++i) { 33 var el = root.childNodes[i]; 34 if (el.nodeType != 1) 35 continue; 36 el.setAttribute('label', prefix + el.tagName.toLowerCase()); 37 } 38 39 root.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient')); 40 } 41 42 // Construct subtree with 'doc-*' ids. 43 var doc = document.getElementById('doc'); 44 fillTemplate(doc, 'doc-'); 45 46 // Construct shadow subtree with 'shadow-*' ids. 47 var hostOpen = document.getElementById('host-open'); 48 var shadowOpen = hostOpen.attachShadow({mode: 'open'}); 49 fillTemplate(shadowOpen, 'shadow-open-'); 50 51 var hostClosed = document.getElementById('host-closed'); 52 var shadowClosed = hostClosed.attachShadow({mode: 'closed'}); 53 fillTemplate(shadowClosed, 'shadow-closed-'); 54 55 test(function() { 56 // getElementById() (NonElementParentNode) 57 assert_equals(document.querySelectorAll('#foo').length, 1); 58 assert_equals(document.getElementById('foo').getAttribute('label'), 'doc-span'); 59 assert_equals(document.querySelector('#foo').getAttribute('label'), 'doc-span'); 60 61 assert_equals(doc.querySelectorAll('#foo').length, 1); 62 assert_equals(doc.querySelector('#foo').getAttribute('label'), 'doc-span'); 63 64 assert_equals(hostOpen.querySelectorAll('#foo').length, 0); 65 66 assert_equals(shadowOpen.querySelectorAll('#foo').length, 1); 67 assert_equals(shadowOpen.getElementById('foo').getAttribute('label'), 'shadow-open-span'); 68 assert_equals(shadowOpen.querySelector('#foo').getAttribute('label'), 'shadow-open-span'); 69 70 assert_equals(hostClosed.querySelectorAll('#foo').length, 0); 71 72 assert_equals(shadowClosed.querySelectorAll('#foo').length, 1); 73 assert_equals(shadowClosed.getElementById('foo').getAttribute('label'), 'shadow-closed-span'); 74 assert_equals(shadowClosed.querySelector('#foo').getAttribute('label'), 'shadow-closed-span'); 75 }, 'getElementsById() should not leak nodes in shadow tree'); 76 77 test(function() { 78 // getElementsByClassName() (Element, Document) 79 assert_equals(document.getElementsByClassName('bar').length, 1); 80 assert_equals(document.getElementsByClassName('bar')[0].getAttribute('label'), 'doc-div'); 81 assert_equals(document.getElementsByClassName('bar').length, 1); 82 assert_equals(document.getElementsByClassName('bar')[0].getAttribute('label'), 'doc-div'); 83 assert_equals(document.querySelectorAll('.bar').length, 1); 84 85 assert_equals(doc.querySelectorAll('.bar').length, 1); 86 assert_equals(doc.getElementsByClassName('bar')[0].getAttribute('label'), 'doc-div'); 87 88 assert_equals(hostOpen.querySelectorAll('.bar').length, 0); 89 90 assert_equals(shadowOpen.querySelectorAll('.bar').length, 1); 91 assert_equals(shadowOpen.querySelectorAll('.bar')[0].getAttribute('label'), 'shadow-open-div'); 92 93 assert_equals(hostClosed.querySelectorAll('.bar').length, 0); 94 95 assert_equals(shadowClosed.querySelectorAll('.bar').length, 1); 96 assert_equals(shadowClosed.querySelectorAll('.bar')[0].getAttribute('label'), 'shadow-closed-div'); 97 }, 'getElementsByClassName() should not leak nodes in shadow tree'); 98 99 test(function() { 100 // getElementsByName (Document) 101 assert_equals(document.getElementsByName('baz').length, 1); 102 assert_equals(document.getElementsByName('baz')[0].getAttribute('label'), 'doc-form'); 103 assert_equals(document.getElementsByName('baz').length, 1); 104 assert_equals(document.getElementsByName('baz')[0].getAttribute('label'), 'doc-form'); 105 assert_equals(document.querySelectorAll('[name=baz]').length, 1); 106 107 assert_equals(doc.querySelectorAll('[name=baz]').length, 1); 108 109 assert_equals(hostOpen.querySelectorAll('[name=baz]').length, 0); 110 assert_equals(shadowOpen.querySelectorAll('[name=baz]').length, 1); 111 assert_equals(shadowOpen.querySelectorAll('[name=baz]')[0].getAttribute('label'), 'shadow-open-form'); 112 113 assert_equals(hostClosed.querySelectorAll('[name=baz]').length, 0); 114 assert_equals(shadowClosed.querySelectorAll('[name=baz]').length, 1); 115 assert_equals(shadowClosed.querySelectorAll('[name=baz]')[0].getAttribute('label'), 'shadow-closed-form'); 116 }, 'getElementsByName() should not leak nodes in shadow tree'); 117 118 test(function() { 119 // getElementsByTagName (Element, Document) 120 assert_equals(document.getElementsByTagName('my-element').length, 1); 121 assert_equals(document.getElementsByTagName('my-element')[0].getAttribute('label'), 'doc-my-element'); 122 assert_equals(document.getElementsByTagName('my-element').length, 1); 123 assert_equals(document.getElementsByTagName('my-element')[0].getAttribute('label'), 'doc-my-element'); 124 assert_equals(document.querySelectorAll('my-element').length, 1); 125 126 assert_equals(doc.querySelectorAll('my-element').length, 1); 127 assert_equals(doc.getElementsByTagName('my-element')[0].getAttribute('label'), 'doc-my-element'); 128 129 assert_equals(hostOpen.querySelectorAll('my-element').length, 0); 130 // ShadowRoot isn't an Element, does not have getElementsByTagName(). 131 assert_equals(shadowOpen.querySelectorAll('my-element').length, 1); 132 assert_equals(shadowOpen.querySelectorAll('my-element')[0].getAttribute('label'), 'shadow-open-my-element'); 133 134 assert_equals(hostClosed.querySelectorAll('my-element').length, 0); 135 assert_equals(shadowClosed.querySelectorAll('my-element').length, 1); 136 assert_equals(shadowClosed.querySelectorAll('my-element')[0].getAttribute('label'), 'shadow-closed-my-element'); 137 }, 'getElementsByTagName() should not leak nodes in shadow tree'); 138 139 test(function() { 140 // getElementsByTagNameNS (Element, Document) 141 assert_equals(document.getElementsByTagName('lineargradient').length, 0); 142 assert_equals(document.getElementsByTagNameNS('*', 'lineargradient').length, 0); 143 assert_equals(document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'lineargradient').length, 0); 144 assert_equals(document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'lineargradient').length, 0); 145 146 assert_equals(document.getElementsByTagName('linearGradient').length, 1); 147 assert_equals(document.getElementsByTagNameNS('*', 'linearGradient').length, 1); 148 assert_equals(document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'linearGradient').length, 1); 149 assert_equals(document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'linearGradient').length, 0); 150 151 assert_equals(doc.getElementsByTagName('lineargradient').length, 0); 152 assert_equals(doc.getElementsByTagNameNS('*', 'lineargradient').length, 0); 153 assert_equals(doc.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'lineargradient').length, 0); 154 assert_equals(doc.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'lineargradient').length, 0); 155 156 assert_equals(doc.getElementsByTagName('linearGradient').length, 1); 157 assert_equals(doc.getElementsByTagNameNS('*', 'linearGradient').length, 1); 158 assert_equals(doc.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'linearGradient').length, 1); 159 assert_equals(doc.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'linearGradient').length, 0); 160 161 assert_equals(hostOpen.getElementsByTagName('linearGradient').length, 0); 162 assert_equals(hostOpen.getElementsByTagNameNS('*', 'linearGradient').length, 0); 163 assert_equals(hostOpen.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'linearGradient').length, 0); 164 assert_equals(hostOpen.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'linearGradient').length, 0); 165 166 assert_equals(hostClosed.getElementsByTagName('linearGradient').length, 0); 167 assert_equals(hostClosed.getElementsByTagNameNS('*', 'linearGradient').length, 0); 168 assert_equals(hostClosed.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'linearGradient').length, 0); 169 assert_equals(hostClosed.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'linearGradient').length, 0); 170 171 // ShadowRoot isn't an Element, does not have getElementsByTagNameNS(). 172 }, 'getElementsByTagNameNS() should not leak nodes in shadow tree'); 173 </script> 174 </html>