From 9c629ec5ebdd9d2a7b974b28fe71769a52f61e1a Mon Sep 17 00:00:00 2001
From: Dominic Farolino <dom@chromium.org>
Date: Fri, 4 Oct 2024 07:07:25 -0700
Subject: [PATCH] DOM: Ensure atomic moves trigger relevant mutations

See
https://docs.google.com/document/d/1qfYyvdK4zhzloABKeh0K1lHPm-SpnEcsWEE9UdDuoMk/edit and the discussion around <picture>, <source>,
and <img> relevant mutations during atomic moves.

R=nrosenthal@chromium.org

Bug: 40150299
Change-Id: I7c7de31da763efd9a17cf5258e1c4be9e54c907b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5906482
Reviewed-by: Noam Rosenthal <nrosenthal@chromium.org>
Commit-Queue: Dominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1364197}
---
 .../tentative/relevant-mutations.html         | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 dom/nodes/moveBefore/tentative/relevant-mutations.html
diff --git a/dom/nodes/moveBefore/tentative/relevant-mutations.html b/dom/nodes/moveBefore/tentative/relevant-mutations.html
new file mode 100644
index 00000000000000..95b770dbef8afe
--- /dev/null
+++ b/dom/nodes/moveBefore/tentative/relevant-mutations.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<title>Moving triggers relevant mutations</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<div></div>
+
+<script>
+promise_test(async t => {
+  const div = document.querySelector('div');
+  div.innerHTML = `
+  <picture>
+    <source srcset="/images/green.png" media="(min-width: 10px)">
+    <img src="/images/red.png">
+  </picture>`;
+
+  const picture = document.querySelector('picture');
+  const source = document.querySelector('source');
+  const img = document.querySelector('img');
+
+  t.add_cleanup(() => {
+    picture.remove();
+    source.remove();
+    img.remove();
+  });
+
+  await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true}));
+
+  // Moving <source> out of <picture> triggers a relevant mutation on <img>.
+  document.body.moveBefore(source, null);
+
+  await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true}));
+}, "Moving <source> out of <picture> triggers a relevant mutation on sibling <img>");
+
+promise_test(async t => {
+  const div = document.querySelector('div');
+  div.innerHTML = `
+  <picture>
+    <source srcset="/images/green.png" media="(min-width: 10px)">
+  </picture>`;
+
+  const picture = document.querySelector('picture');
+  const source = document.querySelector('source');
+  const img = document.createElement('img');
+  img.src = '/images/red.png';
+
+  t.add_cleanup(() => {
+    picture.remove();
+    source.remove();
+    img.remove();
+  });
+
+  // The <img> will first load outside of the picture.
+  await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true}));
+
+  // Moving the <img> element to the <picture> (as the last child), triggers a
+  // relevant mutation and loads the <source> picture — which still fires a
+  // load event at the <img>.
+  picture.moveBefore(img, null);
+
+  await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true}));
+}, "Moving <img> into a <picture> triggers a relevant mutation on the <img>, " +
+   "loading <source>");
+</script>
