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) {