dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html@6474c204b198
dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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>
