From 3242592f3489a5e28150af1639096eef677a94c7 Mon Sep 17 00:00:00 2001
From: Euclid Ye <yezhizhenjiakang@gmail.com>
Date: Mon, 7 Apr 2025 22:51:32 +0800
Subject: [PATCH] Fix transition toggle & cancellation & delay (#35978)

More details in Stylo PR: https://github.com/servo/stylo/pull/145

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes
- fixes https://github.com/servo/servo/issues/35833
- fixes https://github.com/servo/servo/issues/35982

<!-- Either: -->
- [x] There are new passing test: `css/css-logical/animation-004.html:
Transitions from physical to logical update when the direction is
changed`

Created new test files as well:

1. `css-transitions/transition-remove-and-change-immediate.html`
2.  `css-transitions/transition-zero-duration-with-delay.html`
3. `css-transitions/transitioncancel-003.html`

<!-- Also, please make sure that "Allow edits from maintainers" checkbox
is checked, so that we can help you if you get stuck somewhere along the
way.-->

<!-- Pull requests that do not address these steps are welcome, but they
will require additional verification as part of the review process. -->

cc @Asun0204  @xiaochengh @stevennovaryo

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
---
 Cargo.lock                                    | 30 ++++-----
 tests/wpt/meta/MANIFEST.json                  | 23 ++++++-
 .../css/css-logical/animation-004.html.ini    |  3 -
 .../css/css-transitions/support/helper.js     | 13 ++++
 ...ransition-remove-and-change-immediate.html | 51 ++++++++++++++++
 .../transition-zero-duration-with-delay.html  | 58 ++++++++++++++++++
 .../css-transitions/transitioncancel-003.html | 61 +++++++++++++++++++
 7 files changed, 220 insertions(+), 19 deletions(-)
 create mode 100644 tests/wpt/tests/css/css-transitions/transition-remove-and-change-immediate.html
 create mode 100644 tests/wpt/tests/css/css-transitions/transition-zero-duration-with-delay.html
 create mode 100644 tests/wpt/tests/css/css-transitions/transitioncancel-003.html

diff --git a/Cargo.lock b/Cargo.lock
index 59bfae185fc..6c74aedeecb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1065,7 +1065,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "117725a109d387c937a1533ce01b450cbde6b88abceea8473c4d7a85853cda3c"
 dependencies = [
  "lazy_static",
- "windows-sys 0.59.0",
+ "windows-sys 0.48.0",
 ]
 
 [[package]]
@@ -6537,7 +6537,7 @@ dependencies = [
 [[package]]
 name = "selectors"
 version = "0.27.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "bitflags 2.9.0",
  "cssparser",
@@ -6822,7 +6822,7 @@ dependencies = [
 [[package]]
 name = "servo_arc"
 version = "0.4.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "serde",
  "stable_deref_trait",
@@ -7273,8 +7273,8 @@ dependencies = [
 
 [[package]]
 name = "stylo"
-version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+version = "0.2.1"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "app_units",
  "arrayvec",
@@ -7332,7 +7332,7 @@ dependencies = [
 [[package]]
 name = "stylo_atoms"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "string_cache",
  "string_cache_codegen",
@@ -7341,12 +7341,12 @@ dependencies = [
 [[package]]
 name = "stylo_config"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 
 [[package]]
 name = "stylo_derive"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "darling",
  "proc-macro2",
@@ -7358,7 +7358,7 @@ dependencies = [
 [[package]]
 name = "stylo_dom"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "bitflags 2.9.0",
  "stylo_malloc_size_of",
@@ -7367,7 +7367,7 @@ dependencies = [
 [[package]]
 name = "stylo_malloc_size_of"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "app_units",
  "cssparser",
@@ -7384,12 +7384,12 @@ dependencies = [
 [[package]]
 name = "stylo_static_prefs"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 
 [[package]]
 name = "stylo_traits"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "app_units",
  "bitflags 2.9.0",
@@ -7772,7 +7772,7 @@ dependencies = [
 [[package]]
 name = "to_shmem"
 version = "0.2.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "cssparser",
  "servo_arc",
@@ -7785,7 +7785,7 @@ dependencies = [
 [[package]]
 name = "to_shmem_derive"
 version = "0.1.0"
-source = "git+https://github.com/servo/stylo?branch=2025-03-15#600b5c42970fdbe301f18c013a0f0ca4ed5f08db"
+source = "git+https://github.com/servo/stylo?branch=2025-03-15#127952e9cc0d881c08ac5c41b626eb38674432e9"
 dependencies = [
  "darling",
  "proc-macro2",
@@ -8853,7 +8853,7 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf221c93e13a30d793f7645a0e7762c55d169dbb0a49671918a2319d289b10bb"
 dependencies = [
- "windows-sys 0.59.0",
+ "windows-sys 0.48.0",
 ]
 
 [[package]]
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index cb59fd073aa..ed5c37a860d 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -448575,7 +448575,7 @@
        []
       ],
       "helper.js": [
-       "a37aae918300d1136debbebbfbb75d46259e0bce",
+       "0ccfe2648ea297fb55360bfa4e47e371a34a7168",
        []
       ],
       "import-green.css": [
@@ -605974,6 +605974,13 @@
        {}
       ]
      ],
+     "transition-remove-and-change-immediate.html": [
+      "717436436302504ce8f068f56dfbba4a6671cce5",
+      [
+       null,
+       {}
+      ]
+     ],
      "transition-reparented.html": [
       "3dfd19425fcaa76051618113bfb4793baf06f364",
       [
@@ -605981,6 +605988,13 @@
        {}
       ]
      ],
+     "transition-zero-duration-with-delay.html": [
+      "0b6b9c37a9b2a1c225889c1f362beb9d559c25d7",
+      [
+       null,
+       {}
+      ]
+     ],
      "transitioncancel-001.html": [
       "6546195259fd9d1870942402fa80d1cb0ff13ea4",
       [
@@ -605997,6 +606011,13 @@
        {}
       ]
      ],
+     "transitioncancel-003.html": [
+      "1c47b3084d486eaaa8218defa689bd7cc4af357c",
+      [
+       null,
+       {}
+      ]
+     ],
      "transitionevent-interface.html": [
       "a40ba4537518361c13aab1d9b0648387f7c88aaa",
       [
diff --git a/tests/wpt/meta/css/css-logical/animation-004.html.ini b/tests/wpt/meta/css/css-logical/animation-004.html.ini
index c02b75269ad..7b5a3cc1f8a 100644
--- a/tests/wpt/meta/css/css-logical/animation-004.html.ini
+++ b/tests/wpt/meta/css/css-logical/animation-004.html.ini
@@ -16,6 +16,3 @@
 
   [Transitions update when the writing-mode is changed through a CSS variable]
     expected: FAIL
-
-  [Transitions from physical to logical update when the direction is changed]
-    expected: FAIL
diff --git a/tests/wpt/tests/css/css-transitions/support/helper.js b/tests/wpt/tests/css/css-transitions/support/helper.js
index a37aae91830..0ccfe2648ea 100644
--- a/tests/wpt/tests/css/css-transitions/support/helper.js
+++ b/tests/wpt/tests/css/css-transitions/support/helper.js
@@ -323,4 +323,17 @@ root.supportsStartingStyle = () => {
   return sheet.cssRules.length == 1;
 };
 
+/**
+ * Waits for a 'transitionend' event to fire on the given element.
+ *
+ * @param element  The DOM element to listen for the transitionend event on.
+ * @returns {Promise<void>} A promise that resolves when the transitionend event is fired.
+ */
+root.waitForTransitionEnd = function(element) {
+  return new Promise(resolve => {
+    element.addEventListener('transitionend', resolve, { once: true });
+  });
+};
+
+
 })(window);
diff --git a/tests/wpt/tests/css/css-transitions/transition-remove-and-change-immediate.html b/tests/wpt/tests/css/css-transitions/transition-remove-and-change-immediate.html
new file mode 100644
index 00000000000..71743643630
--- /dev/null
+++ b/tests/wpt/tests/css/css-transitions/transition-remove-and-change-immediate.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>CSS Transitions Test: Removing transition and changing width applies change immediately</title>
+<meta name="assert" content="When a transition is removed and a width is changed after a previous transition completes, the change is immediate.">
+<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 0.02s; width: 0px;'
+  });
+
+  // Flush initial state
+  getComputedStyle(div).width;
+  div.style.width = '100px';
+
+  // Wait for transition to complete
+  await waitForTransitionEnd(div);
+
+  // Verify the width after first transition
+  const afterFirst = getComputedStyle(div).width;
+  assert_equals(afterFirst, '100px', 'width should be 100px after first transition');
+
+  // Set width back to 0 and remove transition
+  div.style.width = '0px';
+  div.style.transition = '';
+
+  // Force layout update to ensure style computation
+  const afterSecond = getComputedStyle(div).width;
+  // Check width is immediately updated
+  assert_equals(
+    afterSecond,
+    '0px',
+    'width should reset to 0 immediately'
+  );
+
+}, 'Removing transition and changing width applies change immediately');
+</script>
+
+</body>
+</html>
diff --git a/tests/wpt/tests/css/css-transitions/transition-zero-duration-with-delay.html b/tests/wpt/tests/css/css-transitions/transition-zero-duration-with-delay.html
new file mode 100644
index 00000000000..0b6b9c37a9b
--- /dev/null
+++ b/tests/wpt/tests/css/css-transitions/transition-zero-duration-with-delay.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>CSS Transitions Test: 0-duration transition with delay applies after delay</title>
+<meta name="assert" content="Transition with 0s duration and 0.3s delay applies property change after delay period">
+<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 0.1s; width: 0px;'
+  });
+
+  // Flush initial state
+  getComputedStyle(div).width;
+  // First transition to 100px
+  div.style.width = '100px';
+  await waitForTransitionEnd(div);
+
+  // Change transition to 0s duration with 300ms delay
+  div.style.transition = 'width 0s linear 0.3s';
+
+  // Set width back to 0
+  const startTime = performance.now();
+  div.style.width = '0px';
+  // Immediate check - should NOT have changed yet
+  const computedStart = getComputedStyle(div).width;
+  assert_equals(
+    computedStart,
+    '100px',
+    'Width should remain at 100px initially'
+  );
+  // Wait for transitionend (should trigger after 300ms delay)
+  await waitForTransitionEnd(div);
+
+  // Verify final state
+  const finalWidth = getComputedStyle(div).width;
+
+  assert_equals(
+    finalWidth,
+    '0px',
+    'Width should reset to 0 after delay'
+  );
+
+}, '0-duration transition with delay applies change after delay period');
+</script>
+
+</body>
+</html>
diff --git a/tests/wpt/tests/css/css-transitions/transitioncancel-003.html b/tests/wpt/tests/css/css-transitions/transitioncancel-003.html
new file mode 100644
index 00000000000..1c47b3084d4
--- /dev/null
+++ b/tests/wpt/tests/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>