dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html@a63d609f5ebe
dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html
Thu, 15 Jan 2015 15:55:04 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 15:55:04 +0100
- branch
- TOR_BUG_9701
- changeset 9
- a63d609f5ebe
- permissions
- -rw-r--r--
Back out 97036ab72558 which inappropriately compared turds to third parties.
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="/tests/SimpleTest/SimpleTest.js"></script>
9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
10 </head>
11 <body>
12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a>
13 <script>
14 // Create ShadowRoot.
15 var elem = document.createElement("div");
16 var root = elem.createShadowRoot();
18 // Style elements that will be appended into the ShadowRoot.
19 var tallShadowStyle = document.createElement("style");
20 tallShadowStyle.innerHTML = ".tall { height: 100px; }";
22 var veryTallShadowStyle = document.createElement("style");
23 veryTallShadowStyle.innerHTML = ".tall { height: 200px; }";
25 var divToStyle = document.createElement("div");
26 divToStyle.setAttribute("class", "tall");
27 root.appendChild(divToStyle);
29 // Make sure the styles are applied in tree order.
30 root.appendChild(tallShadowStyle);
31 is(root.styleSheets.length, 1, "ShadowRoot should have one style sheet.");
32 is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "100px", "Style in ShadowRoot should apply to elements in ShadowRoot.");
33 root.appendChild(veryTallShadowStyle);
34 is(root.styleSheets.length, 2, "ShadowRoot should have two style sheets.");
35 is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "200px", "Style in ShadowRoot should apply to elements in ShadowRoot in tree order.");
37 </script>
38 </body>
39 </html>
