From 906c69c6d1cc60e28d978dee83c3b96c39cf78a3 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Fri, 29 Mar 2024 22:19:16 +0100 Subject: [PATCH] LibWeb: Don't fall apart on `transition: none` in CSS Fixes a crash when loading https://soundcloud.com/ --- Tests/LibWeb/Layout/expected/css-transition-none.txt | 10 ++++++++++ Tests/LibWeb/Layout/input/css-transition-none.html | 5 +++++ Userland/Libraries/LibWeb/CSS/StyleComputer.cpp | 8 ++++++++ 3 files changed, 23 insertions(+) create mode 100644 Tests/LibWeb/Layout/expected/css-transition-none.txt create mode 100644 Tests/LibWeb/Layout/input/css-transition-none.html diff --git a/Tests/LibWeb/Layout/expected/css-transition-none.txt b/Tests/LibWeb/Layout/expected/css-transition-none.txt new file mode 100644 index 00000000000..50833160f2d --- /dev/null +++ b/Tests/LibWeb/Layout/expected/css-transition-none.txt @@ -0,0 +1,10 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x16 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x0 children: not-inline + BlockContainer
at (8,8) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x16] + PaintableWithLines (BlockContainer) [8,8 784x0] + PaintableWithLines (BlockContainer
) [8,8 784x0] diff --git a/Tests/LibWeb/Layout/input/css-transition-none.html b/Tests/LibWeb/Layout/input/css-transition-none.html new file mode 100644 index 00000000000..46fce594414 --- /dev/null +++ b/Tests/LibWeb/Layout/input/css-transition-none.html @@ -0,0 +1,5 @@ +
diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index ab3a8241298..a4768349df2 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -684,6 +684,14 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i } if (property_id == CSS::PropertyID::Transition) { + if (!value.is_transition()) { + // Handle `none` as a shorthand for `all 0s ease 0s`. + set_longhand_property(CSS::PropertyID::TransitionProperty, IdentifierStyleValue::create(CSS::ValueID::All)); + set_longhand_property(CSS::PropertyID::TransitionDuration, TimeStyleValue::create(CSS::Time::make_seconds(0))); + set_longhand_property(CSS::PropertyID::TransitionDelay, TimeStyleValue::create(CSS::Time::make_seconds(0))); + set_longhand_property(CSS::PropertyID::TransitionTimingFunction, IdentifierStyleValue::create(CSS::ValueID::Ease)); + return; + } auto const& transitions = value.as_transition().transitions(); Array>, 4> transition_values; for (auto const& transition : transitions) {