1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,39 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=806506
1.8 +-->
1.9 +<head>
1.10 + <title>Test for ShadowRoot style order</title>
1.11 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.13 +</head>
1.14 +<body>
1.15 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a>
1.16 +<script>
1.17 +// Create ShadowRoot.
1.18 +var elem = document.createElement("div");
1.19 +var root = elem.createShadowRoot();
1.20 +
1.21 +// Style elements that will be appended into the ShadowRoot.
1.22 +var tallShadowStyle = document.createElement("style");
1.23 +tallShadowStyle.innerHTML = ".tall { height: 100px; }";
1.24 +
1.25 +var veryTallShadowStyle = document.createElement("style");
1.26 +veryTallShadowStyle.innerHTML = ".tall { height: 200px; }";
1.27 +
1.28 +var divToStyle = document.createElement("div");
1.29 +divToStyle.setAttribute("class", "tall");
1.30 +root.appendChild(divToStyle);
1.31 +
1.32 +// Make sure the styles are applied in tree order.
1.33 +root.appendChild(tallShadowStyle);
1.34 +is(root.styleSheets.length, 1, "ShadowRoot should have one style sheet.");
1.35 +is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "100px", "Style in ShadowRoot should apply to elements in ShadowRoot.");
1.36 +root.appendChild(veryTallShadowStyle);
1.37 +is(root.styleSheets.length, 2, "ShadowRoot should have two style sheets.");
1.38 +is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "200px", "Style in ShadowRoot should apply to elements in ShadowRoot in tree order.");
1.39 +
1.40 +</script>
1.41 +</body>
1.42 +</html>
