selectors-api-002.html (2816B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM Test: Upper-boundary encapsulation: shadow root's Selector APIs</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: Nodes in a shadow tree must be accessible through selector APIs of the shadow root."> 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 // Return a document containing the structure below: 18 // 19 // <body> - - - - - {shadow-root} 20 // | | 21 // | +-- <p class="test-class" id="test-id"> 22 // | 23 // +-- <p class="test-class" id="test-id"> 24 function createTestDocument() { 25 var doc = document.implementation.createHTMLDocument('Test'); 26 var pHost = doc.createElement('p'); 27 pHost.className = 'test-class'; 28 pHost.id = 'test-id'; 29 doc.body.appendChild(pHost); 30 var shadowRoot = doc.body.attachShadow({mode: 'open'}); 31 var pShadow = doc.createElement('p'); 32 pShadow.className = 'test-class'; 33 pShadow.id = 'test-id'; 34 shadowRoot.appendChild(pShadow); 35 return { 36 doc: doc, 37 shadowRoot: shadowRoot, 38 pHost: pHost, 39 pShadow: pShadow 40 }; 41 } 42 43 test(function () { 44 var documentObject = createTestDocument(); 45 var shadowRoot = documentObject.shadowRoot; 46 var pShadow = documentObject.pShadow; 47 assert_equals(shadowRoot.querySelector('p'), pShadow); 48 assert_equals(shadowRoot.querySelector('.test-class'), pShadow); 49 assert_equals(shadowRoot.querySelector('#test-id'), pShadow); 50 }, 51 'Elements in a shadow tree should be accessible from ' + 52 'shadow root\'s querySelector() method.' 53 ); 54 55 function assert_singleton_node_list(nodeList, expectedNode) { 56 assert_equals(nodeList.length, 1); 57 assert_equals(nodeList[0], expectedNode); 58 } 59 60 test(function () { 61 var documentObject = createTestDocument(); 62 var shadowRoot = documentObject.shadowRoot; 63 var pShadow = documentObject.pShadow; 64 assert_singleton_node_list(shadowRoot.querySelectorAll('p'), pShadow); 65 assert_singleton_node_list(shadowRoot.querySelectorAll('.test-class'), 66 pShadow); 67 assert_singleton_node_list(shadowRoot.querySelectorAll('#test-id'), 68 pShadow); 69 }, 70 'Elements in a shadow tree should be accessible from ' + 71 'shadow root\'s querySelectorAll() method.' 72 ); 73 </script> 74 </body> 75 </html>