OSSForks/ladybird
1
0
Fork 0
mirror of https://github.com/zebrajr/ladybird.git synced 2025-12-06 12:20:00 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

LibWeb: Dont skip invalid properties when coordinating transition list

Browse Source 
Unrecognized property names should still be kept in the list to preserve
matching of indices (e.g. that the Nth property should associate with
the Nth duration)
This commit is contained in:
Callum Law 2025-10-18 17:57:24 +13:00 committed by Sam Atkins
parent fd2f3b1f03
commit e78cb71eb3
3 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Libraries/LibWeb/CSS/StyleComputer.cpp
View File

@ -1371,14 +1371,18 @@ static void compute_transitioned_properties(ComputedProperties const& style, DOM
if (property_value->is_keyword()) {
auto keyword = property_value->as_keyword().keyword();
if (keyword == Keyword::None)
if (keyword == Keyword::None) {
properties.append({});
continue;
}
if (keyword == Keyword::All)
properties_for_this_transition = expanded_longhands_for_shorthand(PropertyID::All);
} else {
auto maybe_property = property_id_from_string(property_value->as_custom_ident().custom_ident());
if (!maybe_property.has_value())
if (!maybe_property.has_value()) {
properties.append({});
continue;
}
auto transition_property = maybe_property.release_value();
if (property_is_shorthand(transition_property)) {

3
Tests/LibWeb/Text/expected/css/transition-coordination.txt Normal file
View File

@ -0,0 +1,3 @@
left: 1000
right: 2000
top: 2000

27
Tests/LibWeb/Text/input/css/transition-coordination.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<style>
#foo {
transition-property: non-property-ident, top, left, right;
transition-duration: 1s, 2s;
}
</style>
<div id="foo" style="top: 0; left: 0; right: 0"></div>
<script src="../include.js"></script>
<script>
promiseTest(async () => {
await animationFrame();
await animationFrame();
foo.style.top = "10px";
foo.style.left = "10px";
foo.style.right = "10px";
for (const animation of document.getAnimations()) {
println(
`${animation.transitionProperty}: ${animation.effect.getTiming().duration}`
);
}
});
</script>
</html>