test_shadowroot_style.html (4550B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=806506 5 --> 6 <head> 7 <title>Test for ShadowRoot styling</title> 8 <script type="text/javascript" src="head.js"></script> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> 14 <script> 15 16 SimpleTest.waitForExplicitFinish(); 17 18 var content = '<div class="tall" id="bodydiv"></div>' + 19 '<div id="container"></div>'; 20 createIframe(content) 21 .then((aDocument) => { 22 var iframeWin = aDocument.defaultView; 23 24 // Create ShadowRoot. 25 var container = aDocument.getElementById("container"); 26 var elem = aDocument.createElement("div"); 27 container.appendChild(elem); // Put ShadowRoot host in document. 28 var root = elem.attachShadow({mode: "open"}); 29 30 // A style element that will be appended into the ShadowRoot. 31 var shadowStyle = aDocument.createElement("style"); 32 shadowStyle.innerHTML = ".tall { height: 100px; } .fat { padding-left: inherit; }"; 33 34 root.innerHTML = '<div id="divtostyle" class="tall fat"></div>'; 35 var divToStyle = root.getElementById("divtostyle"); 36 37 // Make sure styleSheet counts are correct after appending a style to the ShadowRoot. 38 is(aDocument.styleSheets.length, 0, "There shouldn't be any style sheet in the test frame document."); 39 is(root.styleSheets.length, 0, "The ShadowRoot should have no style sheets."); 40 root.appendChild(shadowStyle); 41 is(aDocument.styleSheets.length, 0, "Styles in the ShadowRoot element should not be accessible from the document."); 42 is(root.styleSheets.length, 1, "ShadowRoot should have one style sheet from the appened style."); 43 is(root.styleSheets[0].ownerNode, shadowStyle, "First style in ShadowRoot should match the style that was just appended."); 44 45 var dummyStyle = aDocument.createElement("style"); 46 root.appendChild(dummyStyle); 47 is(root.styleSheets.length, 2, "ShadowRoot should have an additional style from appending dummyStyle."); 48 is(root.styleSheets[1].ownerNode, dummyStyle, "Second style in ShadowRoot should be the dummyStyle."); 49 root.removeChild(dummyStyle); 50 is(root.styleSheets.length, 1, "Removing dummyStyle should remove it from the ShadowRoot style sheets."); 51 is(root.styleSheets[0].ownerNode, shadowStyle, "The style sheet remaining in the ShadowRoot should be shadowStyle."); 52 53 // Make sure that elements outside of the ShadowRoot are not affected by the ShadowRoot style. 54 isnot(iframeWin.getComputedStyle(aDocument.getElementById("bodydiv")).getPropertyValue("height"), "100px", "Style sheets in ShadowRoot should not apply to elements no in the ShadowRoot."); 55 56 // Make sure that elements in the ShadowRoot are styled according to the ShadowRoot style. 57 is(iframeWin.getComputedStyle(divToStyle).getPropertyValue("height"), "100px", "ShadowRoot style sheets should apply to elements in ShadowRoot."); 58 59 // Tests for author styles not applying in a ShadowRoot. 60 var authorStyle = aDocument.createElement("style"); 61 authorStyle.innerHTML = ".fat { padding-right: 20px; padding-left: 30px; }"; 62 aDocument.body.appendChild(authorStyle); 63 isnot(iframeWin.getComputedStyle(divToStyle).getPropertyValue("padding-right"), "20px", "Author styles should not apply to ShadowRoot."); 64 65 // Test dynamic changes to style in ShadowRoot. 66 root.innerHTML = '<div id="divtostyle" class="dummy"></div>'; 67 divToStyle = root.getElementById("divtostyle"); 68 var dummyShadowStyle = aDocument.createElement("style"); 69 dummyShadowStyle.innerHTML = ".dummy { height: 300px; }"; 70 root.appendChild(dummyShadowStyle); 71 is(iframeWin.getComputedStyle(divToStyle).getPropertyValue("height"), "300px", "Dummy element in ShadowRoot should be styled by style in ShadowRoot."); 72 dummyShadowStyle.innerHTML = ".dummy { height: 200px; }"; 73 is(iframeWin.getComputedStyle(divToStyle).getPropertyValue("height"), "200px", "Dynamic changes to styles in ShadowRoot should change style of affected elements."); 74 75 // Test id selector in ShadowRoot style. 76 root.innerHTML = '<style>#divtostyle { padding-top: 10px; }</style><div id="divtostyle"></div>'; 77 divToStyle = root.getElementById("divtostyle"); 78 is(iframeWin.getComputedStyle(divToStyle).getPropertyValue("padding-top"), "10px", "ID selector in style selector should match element."); 79 80 SimpleTest.finish(); 81 }); 82 </script> 83 </body> 84 </html>