diff options
Diffstat (limited to 'dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html')
-rw-r--r-- | dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html | 52 |
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> |