1 files changed, 39 insertions, 0 deletions
diff --git a/dom/tests/mochitest/webcomponents/test_style_fallback_content.html b/dom/tests/mochitest/webcomponents/test_style_fallback_content.html
new file mode 100644
index 0000000000..33aef21322
--- /dev/null
+++ b/dom/tests/mochitest/webcomponents/test_style_fallback_content.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=806506
+-->
+<head>
+  <title>Test for styling fallback content</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="grabme"></div>';
+createIframe(content)
+  .then((aDocument) => {
+    var iframeWin = aDocument.defaultView;
+
+    var host = aDocument.getElementById("grabme");
+    var shadow = host.attachShadow({mode: "open"});
+    shadow.innerHTML = '<style id="innerstyle"></style><span id="container"><slot><span id="innerspan">Hello</span></slot></span>';
+    var innerStyle = shadow.getElementById("innerstyle");
+
+    innerStyle.innerHTML = '#innerspan { margin-top: 10px; }';
+    var innerSpan = shadow.getElementById("innerspan");
+    is(iframeWin.getComputedStyle(innerSpan).getPropertyValue("margin-top"), "10px", "Default content should be style by id selector.");
+
+    innerStyle.innerHTML = '#container > slot > #innerspan { margin-top: 30px; }';
+    is(iframeWin.getComputedStyle(innerSpan).getPropertyValue("margin-top"), "30px", "Default content should be style by child combinators.");
+
+    SimpleTest.finish();
+  });
+</script>
+</body>
+</html>