dom-tree-accessors-002.html (2315B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM Test: Upper-boundary encapsulation: shadow root's DOM tree accessors</title> 5 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> 6 <link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> 7 <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> 8 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> 9 <meta name="assert" content="Upper-boundary encapsulation: The nodes are accessible using shadow root's DOM tree accessor methods."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="../../../../html/resources/common.js"></script> 13 </head> 14 <body> 15 <div id="log"></div> 16 <script> 17 function assert_singleton_node_list(nodeList, expectedNode) { 18 assert_equals(nodeList.length, 1); 19 assert_equals(nodeList[0], expectedNode); 20 } 21 22 test(function () { 23 var doc = document.implementation.createHTMLDocument('Test'); 24 var shadowRoot = doc.body.attachShadow({mode: 'open'}); 25 var image = doc.createElement('img'); 26 shadowRoot.appendChild(image); 27 28 assert_singleton_node_list(shadowRoot.querySelectorAll('img'), image); 29 }, 30 'Elements in a shadow tree should be accessible via shadow root\'s ' + 31 'querySelectorAll() DOM tree accessor.' 32 ); 33 34 test(function () { 35 var doc = document.implementation.createHTMLDocument('Test'); 36 var shadowRoot = doc.body.attachShadow({mode: 'open'}); 37 var div = doc.createElement('div'); 38 div.className = 'div-class'; 39 shadowRoot.appendChild(div); 40 41 assert_singleton_node_list( 42 shadowRoot.querySelectorAll('.div-class'), div); 43 }, 44 'Elements with a specific class in a shadow tree should be accessible via' + 45 'shadow root\'s querySelectorAll() DOM tree accessor.' 46 ); 47 48 test(function () { 49 var doc = document.implementation.createHTMLDocument('Test'); 50 var shadowRoot = doc.body.attachShadow({mode: 'open'}); 51 var div = doc.createElement('div'); 52 div.id = 'div-id'; 53 shadowRoot.appendChild(div); 54 55 assert_equals(shadowRoot.getElementById('div-id'), div); 56 }, 57 'Elements in a shadow tree should be accessible via shadow root\'s ' + 58 'getElementById() DOM tree accessor.' 59 ); 60 </script> 61 </body> 62 </html>