diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /dom/tests/mochitest/webcomponents/test_shadowroot_style_order.html | |
parent | Initial commit. (diff) | |
download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-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> |