test-005.html (1840B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM Test: A_06_00_06</title> 5 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> 6 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#styles"> 7 <meta name="assert" content="Styles:CSS rules declared in a shadow root style sheets must not apply in the document tree,"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="../../../html/resources/common.js"></script> 11 <script src="../../resources/shadow-dom-utils.js"></script> 12 </head> 13 <body> 14 <div id="log"></div> 15 <script> 16 //check querySelector method 17 test(unit(function (ctx) { 18 var d = newRenderedHTMLDocument(ctx); 19 20 d.body.innerHTML = 21 '<div>' + 22 '<span class="invis" id="theTreeSpan">This is an element in the document tree</span>' + 23 '</div>' + 24 '<div id="sr">' + 25 '</div>'; 26 27 var host = d.querySelector('#sr'); 28 29 //Shadow root to play with 30 var s = host.attachShadow({mode: 'open'}); 31 32 var style = d.createElement('style'); 33 style.innerHTML ='.invis {display:none}'; 34 s.appendChild(style); 35 36 var span = d.createElement('span'); 37 span.setAttribute('id', 'theShadowSpan'); 38 span.setAttribute('class', 'invis'); 39 s.appendChild(span); 40 41 //theTreeSpan should be visible, theShadowSpan not 42 assert_true(d.querySelector('#theTreeSpan').offsetTop > 0, 43 'CSS styles declared in shadow tree must not be applied to the elements ' + 44 'in the document tree'); 45 46 //theTreeSpan should be visible, theShadowSpan not 47 assert_equals(s.querySelector('#theShadowSpan').offsetTop, 0, 48 'CSS styles declared in shadow tree must be applied to the element ' + 49 'in the same shadow tree'); 50 51 }), 'A_06_00_06_T01'); 52 </script> 53 </body> 54 </html>