test_shadowroot_style_order.html (1986B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=806506 5 --> 6 <head> 7 <title>Test for ShadowRoot style order</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 id="container"></div>'; 19 createIframe(content) 20 .then((aDocument) => { 21 var iframeWin = aDocument.defaultView; 22 23 // Create ShadowRoot. 24 var container = aDocument.getElementById("container"); 25 var elem = aDocument.createElement("div"); 26 container.appendChild(elem); // Put ShadowRoot host in document. 27 var root = elem.attachShadow({mode: "open"}); 28 29 // Style elements that will be appended into the ShadowRoot. 30 var tallShadowStyle = aDocument.createElement("style"); 31 tallShadowStyle.innerHTML = ".tall { height: 100px; }"; 32 33 var veryTallShadowStyle = aDocument.createElement("style"); 34 veryTallShadowStyle.innerHTML = ".tall { height: 200px; }"; 35 36 var divToStyle = aDocument.createElement("div"); 37 divToStyle.setAttribute("class", "tall"); 38 root.appendChild(divToStyle); 39 40 // Make sure the styles are applied in tree order. 41 root.appendChild(tallShadowStyle); 42 is(root.styleSheets.length, 1, "ShadowRoot should have one style sheet."); 43 is(iframeWin.getComputedStyle(divToStyle).getPropertyValue("height"), "100px", "Style in ShadowRoot should apply to elements in ShadowRoot."); 44 root.appendChild(veryTallShadowStyle); 45 is(root.styleSheets.length, 2, "ShadowRoot should have two style sheets."); 46 is(iframeWin.getComputedStyle(divToStyle).getPropertyValue("height"), "200px", "Style in ShadowRoot should apply to elements in ShadowRoot in tree order."); 47 48 SimpleTest.finish(); 49 }); 50 </script> 51 </body> 52 </html>