1 files changed, 68 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-skipped-slot.html b/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-skipped-slot.html
new file mode 100644
index 0000000000..d71ee9eef0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-skipped-slot.html
@@ -0,0 +1,68 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: element reslotting</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="element is correctly removed when slot assignment takes it into a skipped slot">
+
+<script src="/common/reftest-wait.js"></script>
+
+<script>
+window.customElements.define("my-element", class extends HTMLElement {
+  connectedCallback() {
+      if (this.shadowRoot) {
+        this.computeEdges_();
+        return;
+      }
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+        <style>
+          slot[name=locked] {
+            display: block;
+            content-visibility: hidden;
+          }
+        </style>
+        <slot name=unlocked></slot>
+        <slot name=locked></slot>
+      `;
+  }
+});
+</script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+
+div {
+  width: 50px;
+  height: 50px;
+}
+.composited { will-change: transform; }
+#one { background: pink; }
+#two { background: red; }
+</style>
+
+<div id=container>
+  <my-element>
+    <div id=one slot=unlocked>FAIL</div>
+    <div id=two slot=locked>FAIL</div>
+  </my-element>
+</div>
+
+<script>
+// Ensure everything is loaded and rendered.
+onload = () =>
+  requestAnimationFrame(() =>
+  requestAnimationFrame(() =>
+  requestAnimationFrame(() => {
+    // Reslot the element and composite the other one.
+    one.slot = "locked";
+    two.classList.add("composited");
+    requestAnimationFrame(takeScreenshot);
+})));
+</script>