LibWeb: Import tests related to CSSTransition

Author: https://github.com/Calme1709 Commit: https://github.com/LadybirdBrowser/ladybird/commit/589529e081e Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5852 Reviewed-by: https://github.com/AtkinsSJ ✅
2026-04-26 17:55:07 +02:00 · 2025-08-13 23:38:10 +12:00 · 2025-08-18 10:19:56 +00:00
parent 087601832a
commit 589529e081
20 changed files with 3235 additions and 0 deletions
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-transitions/transitioncancel-003.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-transitions/transitioncancel-003.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>CSS Transitions Test: Changing transition properties mid-transition</title>
+<meta name="assert" content="When transition properties are changed mid-transition, the original transition completes and new transition parameters apply to subsequent changes">
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="./support/helper.js"></script>
+
+</head>
+<body>
+<div id="log"></div>
+
+<script>
+promise_test(async t => {
+  const div = addDiv(t, {
+    style: 'transition: width 100ms; width: 0px;'
+  });
+
+  // Flush initial state
+  getComputedStyle(div).width;
+  // Start first transition to 100px
+  div.style.width = '100px';
+  // Wait until transition starts running
+  await new Promise(resolve => {
+    div.addEventListener('transitionrun', resolve, { once: true });
+  });
+
+  // MID-TRANSITION CHANGE: Switch to 0s duration + 100ms delay
+  div.style.transition = 'width 0s 100ms';
+  assert_not_equals(
+    getComputedStyle(div).width,
+    '100px',
+    'Width should not reach 100px yet'
+  );
+
+  // Trigger new width change mid-transition
+  div.style.width = '0px';
+
+  assert_not_equals(
+    getComputedStyle(div).width,
+    '0px',
+    'Width should not changed to 0px immediately'
+  );
+
+  await waitForTransitionEnd(div);
+
+  // Final computed style
+  assert_equals(
+    getComputedStyle(div).width,
+    '0px',
+    'Final width should be 0px'
+  );
+}, 'Mid-transition transition changes affect subsequent transitions');
+</script>
+
+</body>
+</html>