LibWeb: Allow comma- or space-separated StyleValueLists

This lets us produce valid CSS in its to_string() method, instead of
always adding commas as before. :^)

Also, finally added a Formatter for StyleValues.

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

@@ -2498,7 +2498,7 @@ RefPtr<StyleValue> Parser::parse_comma_separated_value_list(Vector<StyleComponen
         return {};
     }
 
-    return StyleValueList::create(move(values));
+    return StyleValueList::create(move(values), StyleValueList::Separator::Comma);
 }
 
 RefPtr<StyleValue> Parser::parse_simple_comma_separated_value_list(Vector<StyleComponentValueRule> const& component_values)
@@ -2670,13 +2670,13 @@ RefPtr<StyleValue> Parser::parse_background_value(Vector<StyleComponentValueRule
             background_color = property_initial_value(PropertyID::BackgroundColor);
         return BackgroundStyleValue::create(
             background_color.release_nonnull(),
-            StyleValueList::create(move(background_images)),
+            StyleValueList::create(move(background_images), StyleValueList::Separator::Comma),
-            StyleValueList::create(move(background_positions)),
+            StyleValueList::create(move(background_positions), StyleValueList::Separator::Comma),
-            StyleValueList::create(move(background_sizes)),
+            StyleValueList::create(move(background_sizes), StyleValueList::Separator::Comma),
-            StyleValueList::create(move(background_repeats)),
+            StyleValueList::create(move(background_repeats), StyleValueList::Separator::Comma),
-            StyleValueList::create(move(background_attachments)),
+            StyleValueList::create(move(background_attachments), StyleValueList::Separator::Comma),
-            StyleValueList::create(move(background_origins)),
+            StyleValueList::create(move(background_origins), StyleValueList::Separator::Comma),
-            StyleValueList::create(move(background_clips)));
+            StyleValueList::create(move(background_clips), StyleValueList::Separator::Comma));
     }
 
     if (!background_color)
@@ -3127,7 +3127,7 @@ RefPtr<StyleValue> Parser::parse_border_radius_shorthand_value(Vector<StyleCompo
     border_radii.append(BorderRadiusStyleValue::create(bottom_left(horizontal_radii),
         vertical_radii.is_empty() ? bottom_left(horizontal_radii) : bottom_left(vertical_radii)));
 
-    return StyleValueList::create(move(border_radii));
+    return StyleValueList::create(move(border_radii), StyleValueList::Separator::Space);
 }
 
 RefPtr<StyleValue> Parser::parse_box_shadow_value(Vector<StyleComponentValueRule> const& component_values)
@@ -3457,7 +3457,7 @@ RefPtr<StyleValue> Parser::parse_font_family_value(Vector<StyleComponentValueRul
 
     if (font_families.is_empty())
         return nullptr;
-    return StyleValueList::create(move(font_families));
+    return StyleValueList::create(move(font_families), StyleValueList::Separator::Comma);
 }
 
 RefPtr<StyleValue> Parser::parse_list_style_value(Vector<StyleComponentValueRule> const& component_values)
@@ -3648,7 +3648,7 @@ RefPtr<StyleValue> Parser::parse_transform_value(Vector<StyleComponentValueRule>
 
         transformations.append(TransformationStyleValue::create(maybe_function.value(), move(values)));
     }
-    return StyleValueList::create(move(transformations));
+    return StyleValueList::create(move(transformations), StyleValueList::Separator::Space);
 }
 
 RefPtr<StyleValue> Parser::parse_as_css_value(PropertyID property_id)
@@ -3816,7 +3816,7 @@ Result<NonnullRefPtr<StyleValue>, Parser::ParsingResult> Parser::parse_css_value
             parsed_values.append(parsed_value.release_nonnull());
         }
         if (!parsed_values.is_empty() && parsed_values.size() <= property_maximum_value_count(property_id))
-            return { StyleValueList::create(move(parsed_values)) };
+            return { StyleValueList::create(move(parsed_values), StyleValueList::Separator::Space) };
     }
 
     return ParsingResult::SyntaxError;

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -83,7 +83,7 @@ static RefPtr<StyleValue> style_value_for_display(CSS::Display display)
             break;
         }
 
-        return StyleValueList::create(move(values));
+        return StyleValueList::create(move(values), StyleValueList::Separator::Space);
     }
 
     if (display.is_internal()) {
@@ -550,7 +550,7 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         values.append(style_value_for_length_percentage(margin.right));
         values.append(style_value_for_length_percentage(margin.bottom));
         values.append(style_value_for_length_percentage(margin.left));
-        return StyleValueList::create(move(values));
+        return StyleValueList::create(move(values), StyleValueList::Separator::Space);
     }
     case CSS::PropertyID::MarginTop:
         return style_value_for_length_percentage(layout_node.computed_values().margin().top);
@@ -567,7 +567,7 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         values.append(style_value_for_length_percentage(padding.right));
         values.append(style_value_for_length_percentage(padding.bottom));
         values.append(style_value_for_length_percentage(padding.left));
-        return StyleValueList::create(move(values));
+        return StyleValueList::create(move(values), StyleValueList::Separator::Space);
     }
     case CSS::PropertyID::PaddingTop:
         return style_value_for_length_percentage(layout_node.computed_values().padding().top);

Userland/Libraries/LibWeb/CSS/StyleValue.cpp

@@ -595,15 +595,19 @@ String UnresolvedStyleValue::to_string() const
 
 String StyleValueList::to_string() const
 {
-    StringBuilder builder;
+    String separator = "";
-    builder.appendff("List[{}](", m_values.size());
+    switch (m_separator) {
-    for (size_t i = 0; i < m_values.size(); ++i) {
+    case Separator::Space:
-        if (i)
+        separator = " ";
-            builder.append(',');
+        break;
-        builder.append(m_values[i].to_string());
+    case Separator::Comma:
+        separator = ", ";
+        break;
+    default:
+        VERIFY_NOT_REACHED();
     }
-    builder.append(')');
+
-    return builder.to_string();
+    return String::join(separator, m_values);
 }
 
 }

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -1329,7 +1329,11 @@ private:
 
 class StyleValueList final : public StyleValue {
 public:
-    static NonnullRefPtr<StyleValueList> create(NonnullRefPtrVector<StyleValue>&& values) { return adopt_ref(*new StyleValueList(move(values))); }
+    enum class Separator {
+        Space,
+        Comma,
+    };
+    static NonnullRefPtr<StyleValueList> create(NonnullRefPtrVector<StyleValue>&& values, Separator separator) { return adopt_ref(*new StyleValueList(move(values), separator)); }
 
     size_t size() const { return m_values.size(); }
     NonnullRefPtrVector<StyleValue> const& values() const { return m_values; }
@@ -1343,13 +1347,23 @@ public:
     virtual String to_string() const override;
 
 private:
-    StyleValueList(NonnullRefPtrVector<StyleValue>&& values)
+    StyleValueList(NonnullRefPtrVector<StyleValue>&& values, Separator separator)
         : StyleValue(Type::ValueList)
+        , m_separator(separator)
         , m_values(move(values))
     {
     }
 
+    Separator m_separator;
     NonnullRefPtrVector<StyleValue> m_values;
 };
 
 }
+
+template<>
+struct AK::Formatter<Web::CSS::StyleValue> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::StyleValue const& style_value)
+    {
+        return Formatter<StringView>::format(builder, style_value.to_string());
+    }
+};