| Index: LayoutTests/fast/css/style-scoped/style-scoped-nested.html
|
| diff --git a/LayoutTests/fast/css/style-scoped/style-scoped-nested.html b/LayoutTests/fast/css/style-scoped/style-scoped-nested.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..7145fd23ec15d0b6d8d6ec36d1c8385a0147cd56
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/css/style-scoped/style-scoped-nested.html
|
| @@ -0,0 +1,46 @@
|
| +<!doctype html>
|
| +<html>
|
| +<head>
|
| +<style>
|
| +#target, #targetInShadow {
|
| + color: red;
|
| +}
|
| +</style>
|
| +<script src="../../../resources/js-test.js"></script>
|
| +<script>
|
| +if (window.testRunner)
|
| + testRunner.dumpAsText();
|
| +</script>
|
| +</head>
|
| +<body>
|
| + <div id="grandparent">
|
| + <div id="parent">
|
| + <span class="target" id="target"></span>
|
| + </div>
|
| + </div>
|
| +</body>
|
| +<script>
|
| +debug("Test whether scoped styles are applied in the cascade order or not.");
|
| +debug("If this test passes, rules which are declared in descendant scoping element are applied to a target element.");
|
| +debug("c.f. https://bugs.webkit.org/show_bug.cgi?id=103239");
|
| +
|
| +var target = document.getElementById("target");
|
| +debug("Only document.style is applied to the target.");
|
| +shouldBe("window.getComputedStyle(target).color", '"rgb(255, 0, 0)"');
|
| +
|
| +var styleForGrandparent = document.createElement("style");
|
| +styleForGrandparent.scoped = true;
|
| +styleForGrandparent.innerHTML = ".target { color: yellow; }";
|
| +document.getElementById("grandparent").appendChild(styleForGrandparent);
|
| +debug("A new scoped style is inserted into the grandparent node of the target. A class rule in the inserted scoped style wins an id rule in document.style.");
|
| +shouldBe("window.getComputedStyle(target).color", '"rgb(255, 255, 0)"');
|
| +
|
| +var styleForParent = document.createElement("style");
|
| +styleForParent.scoped = true;
|
| +styleForParent.innerHTML = "span { color: blue; }";
|
| +document.getElementById("parent").appendChild(styleForParent);
|
| +debug("A new scoped style is inserted into the parent node of the target. A tag rule in the inserted scoped style wins an id rule and a class rule in existing styles.");
|
| +shouldBe("window.getComputedStyle(target).color", '"rgb(0, 0, 255)"');
|
| +
|
| +</script>
|
| +</html>
|
|
|