LibWeb: Use Flex type in GridSize

Userland/Libraries/LibWeb/CSS/GridTrackSize.cpp

@@ -14,7 +14,7 @@ GridSize::GridSize(LengthPercentage length_percentage)
     : m_type(Type::LengthPercentage)
     , m_length_percentage(length_percentage) {};
 
-GridSize::GridSize(double flex_factor)
+GridSize::GridSize(Flex flex_factor)
     : m_type(Type::FlexibleLength)
     , m_length_percentage { Length::make_px(0) }
     , m_flex_factor(flex_factor)
@@ -87,7 +87,7 @@ String GridSize::to_string() const
     case Type::LengthPercentage:
         return m_length_percentage.to_string();
     case Type::FlexibleLength:
-        return MUST(String::formatted("{}fr", m_flex_factor));
+        return m_flex_factor.to_string();
     case Type::MaxContent:
         return "max-content"_string;
     case Type::MinContent:

Userland/Libraries/LibWeb/CSS/GridTrackSize.h

@@ -22,7 +22,7 @@ public:
     };
 
     GridSize(LengthPercentage);
-    GridSize(double);
+    GridSize(Flex);
     GridSize(Type);
     GridSize();
     ~GridSize();
@@ -38,7 +38,7 @@ public:
     bool is_min_content() const { return m_type == Type::MinContent; }
 
     LengthPercentage length_percentage() const { return m_length_percentage; }
-    double flex_factor() const { return m_flex_factor; }
+    double flex_factor() const { return m_flex_factor.to_fr(); }
 
     // https://www.w3.org/TR/css-grid-2/#layout-algorithm
     // An intrinsic sizing function (min-content, max-content, auto, fit-content()).
@@ -57,13 +57,13 @@ public:
     {
         return m_type == other.type()
             && m_length_percentage == other.length_percentage()
-            && m_flex_factor == other.flex_factor();
+            && m_flex_factor == other.m_flex_factor;
     }
 
 private:
     Type m_type;
     LengthPercentage m_length_percentage;
-    double m_flex_factor { 0 };
+    Flex m_flex_factor { 0, Flex::Type::Fr };
 };
 
 class GridMinMax {

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -5118,17 +5118,15 @@ RefPtr<StyleValue> Parser::parse_as_css_value(PropertyID property_id)
 Optional<CSS::GridSize> Parser::parse_grid_size(ComponentValue const& component_value)
 {
     if (component_value.is_function()) {
-        if (auto maybe_calculated = parse_calculated_value(component_value))
-            return GridSize(LengthPercentage(maybe_calculated.release_nonnull()));
+        if (auto maybe_calculated = parse_calculated_value(component_value)) {
+            if (maybe_calculated->resolves_to_length_percentage())
+                return GridSize(LengthPercentage(maybe_calculated.release_nonnull()));
+            // FIXME: Support calculated <flex>
+        }
 
         return {};
     }
     auto token = component_value.token();
-    if (token.is(Token::Type::Dimension) && token.dimension_unit().equals_ignoring_ascii_case("fr"sv)) {
-        auto numeric_value = token.dimension_value();
-        if (numeric_value)
-            return GridSize(numeric_value);
-    }
     if (token.is(Token::Type::Ident) && token.ident().equals_ignoring_ascii_case("auto"sv))
         return GridSize::make_auto();
     if (token.is(Token::Type::Ident) && token.ident().equals_ignoring_ascii_case("max-content"sv))
@@ -5142,6 +5140,8 @@ Optional<CSS::GridSize> Parser::parse_grid_size(ComponentValue const& component_
         return GridSize(dimension->length());
     else if (dimension->is_percentage())
         return GridSize(dimension->percentage());
+    else if (dimension->is_flex())
+        return GridSize(dimension->flex());
     return {};
 }