From f707ea539fb5c0de099bae637e5191d1a39ed414 Mon Sep 17 00:00:00 2001
From: Dominic Farolino <dom@chromium.org>
Date: Tue, 7 Jan 2025 08:44:36 +0000
Subject: [PATCH] Bug 1938675 [wpt PR 49810] - DOM: Test 'slotchange' event
 firing during move, a=testonly

Automatic update from web-platform-tests
DOM: Test 'slotchange' event firing during move

See https://github.com/whatwg/dom/pull/1307#discussion_r1892356878.

R=nrosenthal@chromium.org

Bug: 40150299
Change-Id: I9529941e05591620da5b3c11635693a15f0ce866
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6111212
Reviewed-by: Noam Rosenthal <nrosenthal@chromium.org>
Commit-Queue: Dominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1399350}

--

wpt-commits: dbed603b4216d2c9d7d2da4ec7edf6e9fcda1b9c
wpt-pr: 49810
---
 .../tentative/slotchange-events.html          | 106 ++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 testing/web-platform/tests/dom/nodes/moveBefore/tentative/slotchange-events.html
diff --git a/testing/web-platform/tests/dom/nodes/moveBefore/tentative/slotchange-events.html b/testing/web-platform/tests/dom/nodes/moveBefore/tentative/slotchange-events.html
new file mode 100644
index 000000000000..d30554eba71d
--- /dev/null
+++ b/testing/web-platform/tests/dom/nodes/moveBefore/tentative/slotchange-events.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<title>slotchanged event</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<script>
+customElements.define(
+  "custom-element",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const shadowRoot = this.attachShadow({mode: "open"});
+      const slot = document.createElement('slot');
+      slot.name = 'content';
+      shadowRoot.append(slot);
+    }
+  },
+);
+
+promise_test(async t => {
+  const customElement = document.body.appendChild(document.createElement('custom-element'));
+  t.add_cleanup(() => customElement.remove());
+
+  const slot = customElement.shadowRoot.children[0];
+  const slotChangePromise = new Promise((resolve, reject) => {
+    slot.addEventListener('slotchange', e => resolve(), {once: true});
+    t.step_timeout(() => reject('Timeout; slotchange was not fired'), 1500);
+  });
+
+  const defaultContentP = customElement.shadowRoot.appendChild(document.createElement('p'));
+  slot.moveBefore(defaultContentP, null);
+  await slotChangePromise;
+}, "Moving default content into a slot fires 'slotchange' event");
+
+promise_test(async t => {
+  const customElement = document.body.appendChild(document.createElement('custom-element'));
+  t.add_cleanup(() => customElement.remove());
+
+  const slot = customElement.shadowRoot.children[0];
+  const defaultContentP = slot.appendChild(document.createElement('p'));
+
+  // Wait for "signal a slot change" to asynchronously settle. This should fire
+  // the 'slotchange' event for the insertion above, but we will not assert that,
+  // since this test is only testing that 'slotchange' is fired on removal. We
+  // separate this out in case an implementation fires one but not the other
+  // (i.e., Chromium, at the time of writing this).
+  await new Promise(resolve => t.step_timeout(() => resolve()));
+
+  const slotChangePromise = new Promise((resolve, reject) => {
+    slot.addEventListener('slotchange', e => resolve(), {once: true});
+    t.step_timeout(() => reject('Timeout; slotchange was not fired'), 1500);
+  });
+
+  // Move `defaultContentP` OUT of the slot, and into the ShadowRoot. This
+  // triggers "signal a slot change" on `defaultContentP`'s old parent, which is
+  // the slot.
+  customElement.shadowRoot.moveBefore(defaultContentP, null);
+  await slotChangePromise;
+}, "Moving default content out of a slot fires 'slotchange' event");
+
+promise_test(async t => {
+  const customElement = document.body.appendChild(document.createElement('custom-element'));
+  t.add_cleanup(() => customElement.remove());
+
+  const slot = customElement.shadowRoot.children[0];
+  const slottable = document.body.appendChild(document.createElement('p'));
+  slottable.slot = 'content';
+
+  {
+    const slotChangePromise = new Promise((resolve, reject) => {
+      slot.addEventListener('slotchange', e => {
+        if (slot.assignedNodes().includes(slottable)) {
+          resolve();
+        } else {
+          reject('slot.assignedNodes() did not include the slottable after move');
+        }
+      }, {once: true});
+
+      t.step_timeout(() => reject('Timeout; slotchange (whiling moving an element in) was not fired'), 1500);
+    });
+
+    // Move the slottable INTO the custom element, thus slotting it.
+    customElement.moveBefore(slottable, null);
+    await slotChangePromise;
+  }
+
+  {
+    const slotChangePromise = new Promise((resolve, reject) => {
+      slot.addEventListener('slotchange', e => {
+        if (slot.assignedNodes().length === 0) {
+          resolve();
+        } else {
+          reject('slot.assignedNodes() not empty after the slottable moved out');
+        }
+      }, {once: true});
+
+      t.step_timeout(() => reject('Timeout; slotchange (whiling moving an element out) was not fired'), 1500);
+    });
+
+    // Move the slottable OUT of the custom element, thus unslotting it.
+    document.body.moveBefore(slottable, null);
+    await slotChangePromise;
+  }
+}, "Moving a slottable into and out out of a custom element fires 'slotchange' event");
+</script>
