LibWeb: Fix broken handling of `flex: <flex-grow>` shorthand

This is a tiny bit messy because:

- The spec says we should expand this to `flex: <flex-grow> 1 0`
- All major engines expand it to `flex: <flex-grow> 1 0%`

Spec bug: https://github.com/w3c/csswg-drafts/issues/5742

2 files changed, 28 insertions, 14 deletions

diff --git a/Tests/LibWeb/Layout/expected/flex-grow-2.txt b/Tests/LibWeb/Layout/expected/flex-grow-2.txt
index a42104409f..2542329f6b 100644
--- a/Tests/LibWeb/Layout/expected/flex-grow-2.txt
+++ b/Tests/LibWeb/Layout/expected/flex-grow-2.txt
@@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
       Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
         BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
           TextNode <#text>
-        BlockContainer <div.box> at (10,10) content-size 132.333343x100 flex-item children: inline
+        BlockContainer <div.box> at (10,10) content-size 82.333335x100 flex-item children: inline
           line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
             frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
               "1"
           TextNode <#text>
         BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
           TextNode <#text>
-        BlockContainer <div.box> at (144.333343,10) content-size 164.666671x100 flex-item children: inline
+        BlockContainer <div.box> at (94.333335,10) content-size 164.666671x100 flex-item children: inline
           line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [144.333343,10 8.8125x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [94.333335,10 8.8125x17.46875]
               "2"
           TextNode <#text>
         BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
           TextNode <#text>
-        BlockContainer <div.box> at (311,10) content-size 197x100 flex-item children: inline
+        BlockContainer <div.box> at (261,10) content-size 247x100 flex-item children: inline
           line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [311,10 9.09375x17.46875]
+            frag 0 from TextNode start: 0, length: 1, rect: [261,10 9.09375x17.46875]
               "3"
           TextNode <#text>
         BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index 5aa739a1eb..757a119c08 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -5121,22 +5121,36 @@ RefPtr<StyleValue> Parser::parse_filter_value_list_value(Vector<ComponentValue>
 RefPtr<StyleValue> Parser::parse_flex_value(Vector<ComponentValue> const& component_values)
 {
     if (component_values.size() == 1) {
+        // One-value syntax: <flex-grow> | <flex-basis> | none
         auto value = parse_css_value(component_values[0]);
         if (!value)
             return nullptr;
 
-        switch (value->to_identifier()) {
-        case ValueID::Auto: {
-            auto one = NumericStyleValue::create_integer(1);
-            return FlexStyleValue::create(one, one, IdentifierStyleValue::create(ValueID::Auto));
+        if (value->is_identifier() && property_accepts_value(PropertyID::Flex, *value)) {
+            switch (value->to_identifier()) {
+            case ValueID::None: {
+                auto zero = NumericStyleValue::create_integer(0);
+                return FlexStyleValue::create(zero, zero, IdentifierStyleValue::create(ValueID::Auto));
+            }
+            default:
+                return value;
+            }
         }
-        case ValueID::None: {
-            auto zero = NumericStyleValue::create_integer(0);
-            return FlexStyleValue::create(zero, zero, IdentifierStyleValue::create(ValueID::Auto));
+
+        if (property_accepts_value(PropertyID::FlexGrow, *value)) {
+            // NOTE: The spec says that flex-basis should be 0 here, but other engines currently use 0%.
+            // https://github.com/w3c/csswg-drafts/issues/5742
+            auto zero_percent = NumericStyleValue::create_integer(0);
+            auto one = NumericStyleValue::create_integer(1);
+            return FlexStyleValue::create(*value, one, zero_percent);
         }
-        default:
-            break;
+
+        if (property_accepts_value(PropertyID::FlexBasis, *value)) {
+            auto one = NumericStyleValue::create_integer(1);
+            return FlexStyleValue::create(one, one, *value);
         }
+
+        return nullptr;
     }
 
     RefPtr<StyleValue> flex_grow;