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> |