Prechádzať zdrojové kódy

LibWeb: Don't fall apart on `transition: none` in CSS

Fixes a crash when loading https://soundcloud.com/
Andreas Kling 1 rok pred
rodič
commit
906c69c6d1

+ 10 - 0
Tests/LibWeb/Layout/expected/css-transition-none.txt

@@ -0,0 +1,10 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
+      BlockContainer <div> at (8,8) content-size 784x0 children: inline
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
+      PaintableWithLines (BlockContainer<DIV>) [8,8 784x0]

+ 5 - 0
Tests/LibWeb/Layout/input/css-transition-none.html

@@ -0,0 +1,5 @@
+<!doctype html><style>
+div {
+    transition: none;
+}
+</style><div>

+ 8 - 0
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<Vector<ValueComparingNonnullRefPtr<StyleValue const>>, 4> transition_values;
         for (auto const& transition : transitions) {