Skip to content

Commit 83ecc92

Browse files
yezhizhenTG199
yezhizhen
authored and
TG199
committed
Fix transition toggle & cancellation & delay (servo#35978)
More details in Stylo PR: servo/stylo#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 servo#35833 - fixes servo#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 <[email protected]>
1 parent fb41d5b commit 83ecc92

File tree

7 files changed

+220
-19
lines changed

7 files changed

+220
-19
lines changed

‎Cargo.lock‎

Lines changed: 15 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/wpt/meta/MANIFEST.json‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -448575,7 +448575,7 @@
448575448575
[]
448576448576
],
448577448577
"helper.js": [
448578-
"a37aae918300d1136debbebbfbb75d46259e0bce",
448578+
"0ccfe2648ea297fb55360bfa4e47e371a34a7168",
448579448579
[]
448580448580
],
448581448581
"import-green.css": [
@@ -605974,13 +605974,27 @@
605974605974
{}
605975605975
]
605976605976
],
605977+
"transition-remove-and-change-immediate.html": [
605978+
"717436436302504ce8f068f56dfbba4a6671cce5",
605979+
[
605980+
null,
605981+
{}
605982+
]
605983+
],
605977605984
"transition-reparented.html": [
605978605985
"3dfd19425fcaa76051618113bfb4793baf06f364",
605979605986
[
605980605987
null,
605981605988
{}
605982605989
]
605983605990
],
605991+
"transition-zero-duration-with-delay.html": [
605992+
"0b6b9c37a9b2a1c225889c1f362beb9d559c25d7",
605993+
[
605994+
null,
605995+
{}
605996+
]
605997+
],
605984605998
"transitioncancel-001.html": [
605985605999
"6546195259fd9d1870942402fa80d1cb0ff13ea4",
605986606000
[
@@ -605997,6 +606011,13 @@
605997606011
{}
605998606012
]
605999606013
],
606014+
"transitioncancel-003.html": [
606015+
"1c47b3084d486eaaa8218defa689bd7cc4af357c",
606016+
[
606017+
null,
606018+
{}
606019+
]
606020+
],
606000606021
"transitionevent-interface.html": [
606001606022
"a40ba4537518361c13aab1d9b0648387f7c88aaa",
606002606023
[

‎tests/wpt/meta/css/css-logical/animation-004.html.ini‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,3 @@
1616

1717
[Transitions update when the writing-mode is changed through a CSS variable]
1818
expected: FAIL
19-
20-
[Transitions from physical to logical update when the direction is changed]
21-
expected: FAIL

‎tests/wpt/tests/css/css-transitions/support/helper.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -323,4 +323,17 @@ root.supportsStartingStyle = () => {
323323
return sheet.cssRules.length == 1;
324324
};
325325

326+
/**
327+
* Waits for a 'transitionend' event to fire on the given element.
328+
*
329+
* @param element The DOM element to listen for the transitionend event on.
330+
* @returns {Promise<void>} A promise that resolves when the transitionend event is fired.
331+
*/
332+
root.waitForTransitionEnd = function(element) {
333+
return new Promise(resolve => {
334+
element.addEventListener('transitionend', resolve, { once: true });
335+
});
336+
};
337+
338+
326339
})(window);

‎tests/wpt/tests/css/css-transitions/transition-remove-and-change-immediate.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset=utf-8>
5+
<title>CSS Transitions Test: Removing transition and changing width applies change immediately</title>
6+
<meta name="assert" content="When a transition is removed and a width is changed after a previous transition completes, the change is immediate.">
7+
<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
8+
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="./support/helper.js"></script>
12+
13+
</head>
14+
<body>
15+
<div id="log"></div>
16+
17+
<script>
18+
promise_test(async t => {
19+
const div = addDiv(t, {
20+
style: 'transition: width 0.02s; width: 0px;'
21+
});
22+
23+
// Flush initial state
24+
getComputedStyle(div).width;
25+
div.style.width = '100px';
26+
27+
// Wait for transition to complete
28+
await waitForTransitionEnd(div);
29+
30+
// Verify the width after first transition
31+
const afterFirst = getComputedStyle(div).width;
32+
assert_equals(afterFirst, '100px', 'width should be 100px after first transition');
33+
34+
// Set width back to 0 and remove transition
35+
div.style.width = '0px';
36+
div.style.transition = '';
37+
38+
// Force layout update to ensure style computation
39+
const afterSecond = getComputedStyle(div).width;
40+
// Check width is immediately updated
41+
assert_equals(
42+
afterSecond,
43+
'0px',
44+
'width should reset to 0 immediately'
45+
);
46+
47+
}, 'Removing transition and changing width applies change immediately');
48+
</script>
49+
50+
</body>
51+
</html>

‎tests/wpt/tests/css/css-transitions/transition-zero-duration-with-delay.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset=utf-8>
5+
<title>CSS Transitions Test: 0-duration transition with delay applies after delay</title>
6+
<meta name="assert" content="Transition with 0s duration and 0.3s delay applies property change after delay period">
7+
<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
8+
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="./support/helper.js"></script>
12+
13+
</head>
14+
<body>
15+
<div id="log"></div>
16+
17+
<script>
18+
promise_test(async t => {
19+
const div = addDiv(t, {
20+
style: 'transition: width 0.1s; width: 0px;'
21+
});
22+
23+
// Flush initial state
24+
getComputedStyle(div).width;
25+
// First transition to 100px
26+
div.style.width = '100px';
27+
await waitForTransitionEnd(div);
28+
29+
// Change transition to 0s duration with 300ms delay
30+
div.style.transition = 'width 0s linear 0.3s';
31+
32+
// Set width back to 0
33+
const startTime = performance.now();
34+
div.style.width = '0px';
35+
// Immediate check - should NOT have changed yet
36+
const computedStart = getComputedStyle(div).width;
37+
assert_equals(
38+
computedStart,
39+
'100px',
40+
'Width should remain at 100px initially'
41+
);
42+
// Wait for transitionend (should trigger after 300ms delay)
43+
await waitForTransitionEnd(div);
44+
45+
// Verify final state
46+
const finalWidth = getComputedStyle(div).width;
47+
48+
assert_equals(
49+
finalWidth,
50+
'0px',
51+
'Width should reset to 0 after delay'
52+
);
53+
54+
}, '0-duration transition with delay applies change after delay period');
55+
</script>
56+
57+
</body>
58+
</html>

‎tests/wpt/tests/css/css-transitions/transitioncancel-003.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset=utf-8>
5+
<title>CSS Transitions Test: Changing transition properties mid-transition</title>
6+
<meta name="assert" content="When transition properties are changed mid-transition, the original transition completes and new transition parameters apply to subsequent changes">
7+
<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
8+
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="./support/helper.js"></script>
12+
13+
</head>
14+
<body>
15+
<div id="log"></div>
16+
17+
<script>
18+
promise_test(async t => {
19+
const div = addDiv(t, {
20+
style: 'transition: width 100ms; width: 0px;'
21+
});
22+
23+
// Flush initial state
24+
getComputedStyle(div).width;
25+
// Start first transition to 100px
26+
div.style.width = '100px';
27+
// Wait until transition starts running
28+
await new Promise(resolve => {
29+
div.addEventListener('transitionrun', resolve, { once: true });
30+
});
31+
32+
// MID-TRANSITION CHANGE: Switch to 0s duration + 100ms delay
33+
div.style.transition = 'width 0s 100ms';
34+
assert_not_equals(
35+
getComputedStyle(div).width,
36+
'100px',
37+
'Width should not reach 100px yet'
38+
);
39+
40+
// Trigger new width change mid-transition
41+
div.style.width = '0px';
42+
43+
assert_not_equals(
44+
getComputedStyle(div).width,
45+
'0px',
46+
'Width should not changed to 0px immediately'
47+
);
48+
49+
await waitForTransitionEnd(div);
50+
51+
// Final computed style
52+
assert_equals(
53+
getComputedStyle(div).width,
54+
'0px',
55+
'Final width should be 0px'
56+
);
57+
}, 'Mid-transition transition changes affect subsequent transitions');
58+
</script>
59+
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)