1 files changed, 52 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 0000000000..05976a934a
--- /dev/null
+++ b/dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html
@@ -0,0 +1,52 @@
+<!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="head.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a>
+<script>
+
+SimpleTest.waitForExplicitFinish();
+
+var content = '<div id="container"></div>';
+createIframe(content)
+  .then((aDocument) => {
+    var iframeWin = aDocument.defaultView;
+
+    // Create ShadowRoot.
+    var container = aDocument.getElementById("container");
+    var elem = aDocument.createElement("div");
+    container.appendChild(elem); // Put ShadowRoot host in document.
+    var root = elem.attachShadow({mode: "open"});
+
+    // Style elements that will be appended into the ShadowRoot.
+    var tallShadowStyle = aDocument.createElement("style");
+    tallShadowStyle.innerHTML = ".tall { height: 100px; }";
+
+    var veryTallShadowStyle = aDocument.createElement("style");
+    veryTallShadowStyle.innerHTML = ".tall { height: 200px; }";
+
+    var divToStyle = aDocument.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(iframeWin.getComputedStyle(divToStyle).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(iframeWin.getComputedStyle(divToStyle).getPropertyValue("height"), "200px", "Style in ShadowRoot should apply to elements in ShadowRoot in tree order.");
+
+    SimpleTest.finish();
+  });
+</script>
+</body>
+</html>