mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
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>
This commit is contained in:
Euclid Ye
GitHub
parent
4f41354349
commit
3242592f34
7 changed files with 220 additions and 19 deletions
30
Cargo.lock
generated
30
Cargo.lock
generated
|
|
@ -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]]
|
||||
|
|
|
|||
23
tests/wpt/meta/MANIFEST.json
vendored
23
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -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",
|
||||
[
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
51
tests/wpt/tests/css/css-transitions/transition-remove-and-change-immediate.html
vendored
Normal file
51
tests/wpt/tests/css/css-transitions/transition-remove-and-change-immediate.html
vendored
Normal file
|
|
@ -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>
|
||||
58
tests/wpt/tests/css/css-transitions/transition-zero-duration-with-delay.html
vendored
Normal file
58
tests/wpt/tests/css/css-transitions/transition-zero-duration-with-delay.html
vendored
Normal file
|
|
@ -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>
|
||||
61
tests/wpt/tests/css/css-transitions/transitioncancel-003.html
vendored
Normal file
61
tests/wpt/tests/css/css-transitions/transitioncancel-003.html
vendored
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue