1 files changed, 42 insertions, 0 deletions
diff --git a/dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html b/dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html
new file mode 100644
index 000000000..524b9bcca
--- /dev/null
+++ b/dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=806506
+-->
+<head>
+  <title>Test for ShadowRoot style order</title>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<div id="container"></div>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a>
+<script>
+// Create ShadowRoot.
+var container = document.getElementById("container");
+var elem = document.createElement("div");
+container.appendChild(elem); // Put ShadowRoot host in document.
+var root = elem.createShadowRoot();
+
+// Style elements that will be appended into the ShadowRoot.
+var tallShadowStyle = document.createElement("style");
+tallShadowStyle.innerHTML = ".tall { height: 100px; }";
+
+var veryTallShadowStyle = document.createElement("style");
+veryTallShadowStyle.innerHTML = ".tall { height: 200px; }";
+
+var divToStyle = document.createElement("div");
+divToStyle.setAttribute("class", "tall");
+root.appendChild(divToStyle);
+
+// Make sure the styles are applied in tree order.
+root.appendChild(tallShadowStyle);
+is(root.styleSheets.length, 1, "ShadowRoot should have one style sheet.");
+is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "100px", "Style in ShadowRoot should apply to elements in ShadowRoot.");
+root.appendChild(veryTallShadowStyle);
+is(root.styleSheets.length, 2, "ShadowRoot should have two style sheets.");
+is(window.getComputedStyle(divToStyle, null).getPropertyValue("height"), "200px", "Style in ShadowRoot should apply to elements in ShadowRoot in tree order.");
+
+</script>
+</body>
+</html>