eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-03 21:12:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Ensure registered transitions are reflective of properties

Browse Source 
Previously we would only update these if:
a) We had a cascaded value for `transition-property`
b) The source of that cascaded value had changed since we last
   registered transitions

This meant that there were a lot of changes we didn't apply:
 - Changes exclusively to properties other than `transition-property`
   (e.g. `transition-duration`, `transition-behavior`, etc)
 - Removing the `transition-property` property
 - Updating the `transition-property` property in a way that didn't
   change it's source (e.g. setting it within inline-style)

Unfortunately this does mean that we now register transitions for all
properties on most elements since "all" is the initial value for
"transition-property" which isn't great for performance, but that can be
looked at in later commits.
This commit is contained in:
Callum Law
2025-11-18 22:15:15 +13:00
committed by Jelle Raaijmakers
parent 46abc0e8e2
commit b2b889e1da
Notes: github-actions[bot] 2025-11-23 08:44:36 +00:00 
Author: https://github.com/Calme1709
Commit: https://github.com/LadybirdBrowser/ladybird/commit/b2b889e1dab
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6854
Reviewed-by: https://github.com/gmta ✅
13 changed files with 98 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
Tests/LibWeb/Text/input/wpt-import/css/css-transitions/transition-remove-and-change-immediate.html Normal file
View 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>