LibWeb: Convert flex-basis to LengthPercentage

The flexbox logic confuses me so regressions are possible, though our
test page looks the same as before so it should be fine.

Renamed FlexBasis::Length -> LengthPercentage too, for clarity.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -69,9 +69,9 @@ struct Transformation {
 
 struct FlexBasisData {
     CSS::FlexBasis type { CSS::FlexBasis::Auto };
-    CSS::Length length {};
+    Optional<CSS::LengthPercentage> length_percentage;
 
-    bool is_definite() const { return type == CSS::FlexBasis::Length; }
+    bool is_definite() const { return type == CSS::FlexBasis::LengthPercentage; }
 };
 
 struct BoxShadowData {

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -439,6 +439,13 @@ static NonnullRefPtr<StyleValue> value_or_default(Optional<StyleProperty> proper
     return default_style;
 }
 
+static NonnullRefPtr<StyleValue> style_value_for_length_percentage(LengthPercentage const& length_percentage)
+{
+    if (length_percentage.is_percentage())
+        return PercentageStyleValue::create(length_percentage.percentage());
+    return LengthStyleValue::create(length_percentage.length());
+}
+
 RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout::NodeWithStyle const& layout_node, PropertyID property_id) const
 {
     switch (property_id) {
@@ -474,8 +481,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         switch (layout_node.computed_values().flex_basis().type) {
         case FlexBasis::Content:
             return IdentifierStyleValue::create(CSS::ValueID::Content);
-        case FlexBasis::Length:
+        case FlexBasis::LengthPercentage:
-            return LengthStyleValue::create(layout_node.computed_values().flex_basis().length);
+            return style_value_for_length_percentage(*layout_node.computed_values().flex_basis().length_percentage);
         case FlexBasis::Auto:
             return IdentifierStyleValue::create(CSS::ValueID::Auto);
         default:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -194,18 +194,22 @@ Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
 
 Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
 {
-    auto value = property(CSS::PropertyID::FlexBasis);
+    auto maybe_value = property(CSS::PropertyID::FlexBasis);
-    if (!value.has_value())
+    if (!maybe_value.has_value())
         return {};
+    auto& value = maybe_value.value();
 
-    if (value.value()->is_identifier() && value.value()->to_identifier() == CSS::ValueID::Content)
+    if (value->is_identifier() && value->to_identifier() == CSS::ValueID::Content)
         return { { CSS::FlexBasis::Content, {} } };
 
-    if (value.value()->has_auto())
+    if (value->has_auto())
         return { { CSS::FlexBasis::Auto, {} } };
 
-    if (value.value()->has_length())
+    if (value->is_percentage())
-        return { { CSS::FlexBasis::Length, value.value()->to_length() } };
+        return { { CSS::FlexBasis::LengthPercentage, value->as_percentage().percentage() } };
+
+    if (value->has_length())
+        return { { CSS::FlexBasis::LengthPercentage, value->to_length() } };
 
     return {};
 }

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -112,7 +112,7 @@ enum class Cursor {
 
 enum class FlexBasis {
     Content,
-    Length,
+    LengthPercentage,
     Auto,
 };
 
@@ -1185,7 +1185,7 @@ private:
 
 class PercentageStyleValue final : public StyleValue {
 public:
-    static NonnullRefPtr<PercentageStyleValue> create(Percentage&& percentage)
+    static NonnullRefPtr<PercentageStyleValue> create(Percentage percentage)
     {
         return adopt_ref(*new PercentageStyleValue(move(percentage)));
     }

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

@@ -17,9 +17,12 @@
 
 namespace Web::Layout {
 
-static float get_pixel_size(Box const& box, CSS::Length const& length)
+static float get_pixel_size(Box const& box, CSS::LengthPercentage const& length_percentage)
 {
-    return length.resolved(CSS::Length::make_px(0), box, box.containing_block()->width()).to_px(box);
+    auto inner_main_size = CSS::Length::make_px(box.containing_block()->width());
+    return length_percentage.resolved(inner_main_size)
+        .resolved(CSS::Length::make_px(0), box, box.containing_block()->width())
+        .to_px(box);
 }
 
 FlexFormattingContext::FlexFormattingContext(Box& flex_container, FormattingContext* parent)
@@ -461,7 +464,7 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
 
         // A. If the item has a definite used flex basis, that’s the flex base size.
         if (used_flex_basis.is_definite()) {
-            auto specified_base_size = get_pixel_size(child_box, used_flex_basis.length);
+            auto specified_base_size = get_pixel_size(child_box, used_flex_basis.length_percentage.value());
             if (specified_base_size == 0)
                 return calculated_main_size(flex_item.box);
             return specified_base_size;