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.

michael@0 1 <!DOCTYPE HTML>
michael@0 2 <html>
michael@0 3 <!--
michael@0 4 https://bugzilla.mozilla.org/show_bug.cgi?id=806506
michael@0 5 -->
michael@0 6 <head>
michael@0 7 <title>Test for ShadowRoot style order</title>
michael@0 8 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
michael@0 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
michael@0 10 </head>
michael@0 11 <body>
michael@0 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a>
michael@0 13 <script>
michael@0 14 // Create ShadowRoot.
michael@0 15 var elem = document.createElement("div");
michael@0 16 var root = elem.createShadowRoot();
michael@0 17
michael@0 18 // Style elements that will be appended into the ShadowRoot.
michael@0 19 var tallShadowStyle = document.createElement("style");
michael@0 20 tallShadowStyle.innerHTML = ".tall { height: 100px; }";
michael@0 21
michael@0 22 var veryTallShadowStyle = document.createElement("style");
michael@0 23 veryTallShadowStyle.innerHTML = ".tall { height: 200px; }";
michael@0 24
michael@0 25 var divToStyle = document.createElement("div");
michael@0 26 divToStyle.setAttribute("class", "tall");
michael@0 27 root.appendChild(divToStyle);
michael@0 28
michael@0 29 // Make sure the styles are applied in tree order.
michael@0 30 root.appendChild(tallShadowStyle);
michael@0 31 is(root.styleSheets.length, 1, "ShadowRoot should have one style sheet.");
michael@0 32 is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "100px", "Style in ShadowRoot should apply to elements in ShadowRoot.");
michael@0 33 root.appendChild(veryTallShadowStyle);
michael@0 34 is(root.styleSheets.length, 2, "ShadowRoot should have two style sheets.");
michael@0 35 is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "200px", "Style in ShadowRoot should apply to elements in ShadowRoot in tree order.");
michael@0 36
michael@0 37 </script>
michael@0 38 </body>
michael@0 39 </html>

mercurial