Index: LayoutTests/fast/css/style-scoped/style-scoped-with-dom-operation.html |
diff --git a/LayoutTests/fast/css/style-scoped/style-scoped-with-dom-operation.html b/LayoutTests/fast/css/style-scoped/style-scoped-with-dom-operation.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..e053332971b38e0620bb38ae21b9950e7d711e52 |
--- /dev/null |
+++ b/LayoutTests/fast/css/style-scoped/style-scoped-with-dom-operation.html |
@@ -0,0 +1,52 @@ |
+<!doctype html> |
+<html> |
+<head> |
+<style> |
+span { |
+ background-color: green; |
+} |
+</style> |
+<script src="../../../resources/js-test.js"></script> |
+</head> |
+<body> |
+ <div> |
+ <div> |
+ <style id="existingStyle" scoped> |
+ .target { background-color: red; } |
+ </style> |
+ <span id="target" class="target">Hello, World!</span> |
+ </div> |
+ </div> |
+</body> |
+<script> |
+description("Tests that <style scoped> is correctly applied after DOM operations, i.e. insertBefore, appendChild, and removeChild."); |
+ |
+var target = document.getElementById('target'); |
+ |
+var existingStyle = document.getElementById('existingStyle'); |
+var newStyle = document.createElement('style'); |
+ |
+newStyle.setAttribute('scoped', 'scoped'); |
+newStyle.innerHTML = ".target { background-color: blue; }"; |
+ |
+debug("Insert a new scoped style before an existing scoped style."); |
+existingStyle.parentNode.insertBefore(newStyle, existingStyle); |
+shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(255, 0, 0)"'); |
+ |
+debug("Move an inserted scoped style after an existing scoped style."); |
+existingStyle.parentNode.appendChild(newStyle); |
+shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(0, 0, 255)"'); |
+ |
+debug("Move an inserted scoped style into grandparent of an existing scoped style."); |
+document.body.children[0].appendChild(newStyle); |
+shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(255, 0, 0)"'); |
+ |
+debug("Remove an inserted scoped style."); |
+newStyle.parentNode.removeChild(newStyle); |
+shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(255, 0, 0)"'); |
+ |
+debug("Remove an existing scoped style."); |
+existingStyle.parentNode.removeChild(existingStyle); |
+shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(0, 128, 0)"'); |
+</script> |
+</html> |