1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/layer-replaceSync-clears-stale.html b/testing/web-platform/tests/css/css-cascade/layer-replaceSync-clears-stale.html
new file mode 100644
index 0000000000..c9d88681bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-cascade/layer-replaceSync-clears-stale.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: CSSStyleSheet.replaceSync clears stale statements</title>
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="target"></div>
+<div id="reference" style="color: green"></div>
+
+<script>
+// In all test cases, the 'color' property value of #target should be green.
+
+const testCases = [
+  {
+    title: 'replaceSync clears stale layer statements',
+    style: `
+      @layer second, first;
+      @layer second {
+        #target { color: green; }
+      }
+      @layer first {
+        #target { color: red; }
+      }
+    `,
+    operations: function(sheet) {
+      sheet.replaceSync(`
+        @layer first {
+          #target { color: red; }
+        }
+        @layer second {
+          #target { color: green; }
+        }
+      `);
+    }
+  },
+];
+
+const target = document.getElementById('target');
+const reference = document.getElementById('reference');
+
+for (let testCase of testCases) {
+  test(t => {
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync(testCase.style);
+    document.adoptedStyleSheets = [sheet];
+
+    try {
+      testCase.operations(sheet);
+      assert_equals(getComputedStyle(target).color, getComputedStyle(reference).color);
+    } finally {
+      document.adoptedStyleSheets = [];
+    }
+  }, testCase.title);
+}
+</script>