Bug 1891791 [wpt PR 45743] - Don't reset animations/transitions on mo…

…veBefore, a=testonly Automatic update from web-platform-tests Don't reset animations/transitions on moveBefore See whatwg/dom#1255 Animations & transitions should attempt to continue from where they left off, if possible. This is done in the following way: - Animations are not cancelled on removal when in a state-preserving atomic move. - We don't reset the computed style when removing the element in preparation for an atomic move. - We don't clear the layout/style flags, so that the layout is recomputed and reattached on the next style recalc. Bug: 40150299 Change-Id: I559e69e75df14df589485cb024da0f0f28b1e1ec Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/ /5458120 Commit-Queue: Noam Rosenthal <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1291811} -- wpt-commits: 7a801529e3cb3f2146fb0e7f9732734eb12eb580 wpt-pr: 45743
mozilla · Apr 29, 2024 · 66864e3 · 66864e3
1 parent 896df98
commit 66864e3
Show file tree

Hide file tree

Showing 6 changed files with 264 additions and 0 deletions.
diff --git a/testing/web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-animation-left.html b/testing/web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-animation-left.html
@@ -0,0 1,51 @@
 <!DOCTYPE html>
 <title>Node.moveBefore should preserve CSS animation state (left)</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <body>
  <section id="old-parent">
  <div id="item"></div>
  </section>
  <section id="new-parent">
  </section>
  <style>
  @keyframes anim {
  from {
  left: 100px;
  }
 
  to {
  left: 400px;
  }
  }
 
  section {
  position: absolute;
  }
 
  #item {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
  animation: 1s linear infinite alternate anim;
  animation-delay: 100ms;
  }
  </style>
  <script>
  promise_test(async t => {
  const item = document.querySelector("#item");
  let num_events = 0;
  await new Promise(resolve => addEventListener("animationstart", () => {
  num_events ;
  resolve();
  }));
 
  // Reparent item
  document.body.querySelector("#new-parent").moveBefore(item, null);
  await new Promise(resolve => requestAnimationFrame(() => resolve()));
  assert_equals(num_events, 1);
  assert_not_equals(getComputedStyle(item).left, "0px");
  });
  </script>
 </body>
diff --git a/...g/web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-animation-transform.html b/...g/web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-animation-transform.html
@@ -0,0 1,48 @@
 <!DOCTYPE html>
 <title>Node.moveBefore should preserve CSS animation state (transform)</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <body>
  <section id="old-parent">
  <div id="item"></div>
  </section>
  <section id="new-parent">
  </section>
  <style>
  @keyframes anim {
  from {
  transform: translateX(100px);
  }
 
  to {
  transform: translateX(400px);
  }
  }
 
  #item {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
  animation: 1s linear infinite alternate anim;
  animation-delay: 100ms;
  }
  </style>
  <script>
  promise_test(async t => {
  const item = document.querySelector("#item");
  let num_events = 0;
  await new Promise(resolve => addEventListener("animationstart", () => {
  num_events ;
  resolve();
  }));
 
  // Reparent item
  document.body.querySelector("#new-parent").moveBefore(item, null);
  await new Promise(resolve => requestAnimationFrame(() => resolve()));
  assert_equals(num_events, 1);
  assert_not_equals(getComputedStyle(item).transform, "none");
  });
  </script>
 </body>
diff --git a/testing/web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-transition-left.html b/testing/web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-transition-left.html
@@ -0,0 1,41 @@
 <!DOCTYPE html>
 <title>Node.moveBefore should preserve CSS transition state (left)</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <body>
  <section id="old-parent">
  <div id="item"></div>
  </section>
  <section id="new-parent">
  </section>
  <style>
  #item {
  width: 100px;
  height: 100px;
  background: green;
  transition: left 10s;
  position: absolute;
  left: 0;
  }
 
  section {
  position: relative;
  }
 
  body {
  margin-left: 0;
  }
  </style>
  <script>
  promise_test(async t => {
  const item = document.querySelector("#item");
  assert_equals(item.getBoundingClientRect().x, 0);
  item.style.left = "400px";
  await new Promise(resolve => item.addEventListener("transitionstart", resolve));
  document.querySelector("#new-parent").moveBefore(item, null);
  await new Promise(resolve => requestAnimationFrame(() => resolve()));
  assert_less_than(item.getBoundingClientRect().x, 399);
  });
  </script>
 </body>
diff --git a/.../web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-transition-transform.html b/.../web-platform/tests/dom/nodes/moveBefore/tentative/continue-css-transition-transform.html
@@ -0,0 1,36 @@
 <!DOCTYPE html>
 <title>Node.moveBefore should preserve CSS transition state (transform)</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <body>
  <section id="old-parent">
  <div id="item"></div>
  </section>
  <section id="new-parent">
  </section>
  <style>
  #item {
  width: 100px;
  height: 100px;
  background: green;
  transition: transform 60s steps(1, jump-both);
  }
 
  body {
  margin-left: 0;
  }
  </style>
  <script>
  promise_test(async t => {
  const item = document.querySelector("#item");
  assert_equals(item.getBoundingClientRect().x, 0);
  item.style.transform = "translateX(400px)";
  await new Promise(resolve => item.addEventListener("transitionstart", resolve));
  document.querySelector("#new-parent").moveBefore(item, null);
  await new Promise(resolve => requestAnimationFrame(() => resolve()));
  assert_equals(item.getBoundingClientRect().x, 200);
  assert_equals(item.getAnimations().length, 1);
  });
  </script>
 </body>
diff --git a/testing/web-platform/tests/dom/nodes/moveBefore/tentative/css-animation-commit-styles.html b/testing/web-platform/tests/dom/nodes/moveBefore/tentative/css-animation-commit-styles.html
@@ -0,0 1,45 @@
 <!DOCTYPE html>
 <title>Calling commitStyles after Node.moveBefore should commit mid-transition value</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <body>
  <section id="old-parent">
  <div id="item"></div>
  </section>
  <section id="new-parent">
  </section>
  <style>
  @keyframes anim {
  from {
  transform: translateX(100px);
  }
 
  to {
  transform: translateX(400px);
  }
  }
 
  #item {
  position: relative;
  width: 100px;
  height: 100px;
  background: green;
  animation: 1s linear infinite alternate anim;
  animation-delay: 100ms;
  }
  </style>
  <script>
  promise_test(async t => {
  const item = document.querySelector("#item");
  await new Promise(resolve => item.addEventListener("animationstart", resolve));
 
  // Reparent item
  document.body.querySelector("#new-parent").moveBefore(item, null);
 
  item.getAnimations()[0].commitStyles();
  assert_true("transform" in item.style);
  assert_not_equals(item.style.transform, "none");
  });
  </script>
 </body>
diff --git a/testing/web-platform/tests/dom/nodes/moveBefore/tentative/css-transition-trigger.html b/testing/web-platform/tests/dom/nodes/moveBefore/tentative/css-transition-trigger.html
@@ -0,0 1,43 @@
 <!DOCTYPE html>
 <title>Node.moveBefore should trigger CSS transition state (left) if needed</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
 <body>
  <section id="old-parent">
  <div id="item"></div>
  </section>
  <section id="new-parent">
  </section>
  <style>
  #item {
  width: 100px;
  height: 100px;
  background: green;
  transition: left 10s steps(1, jump-both);
  position: absolute;
  left: 0;
  }
 
  #new-parent #item {
  left: 400px;
  }
 
  section {
  position: relative;
  }
 
  body {
  margin-left: 0;
  }
  </style>
  <script>
  promise_test(async t => {
  const item = document.querySelector("#item");
  assert_equals(item.getBoundingClientRect().x, 0);
  document.querySelector("#new-parent").moveBefore(item, null);
  await new Promise(resolve => item.addEventListener("transitionstart", resolve));
  assert_equals(item.getBoundingClientRect().x, 200);
  });
  </script>
 </body>