diff --git a/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp index 9dbbf997c09..c640628c2dd 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp @@ -107,6 +107,31 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const auto origin = longhand(PropertyID::BackgroundOrigin); auto clip = longhand(PropertyID::BackgroundClip); + auto serialize_layer = [mode](Optional color_value_string, String image_value_string, String position_x_value_string, String position_y_value_string, String size_value_string, String repeat_value_string, String attachment_value_string, String origin_value_string, String clip_value_string) { + StringBuilder builder; + + Vector property_ids = { PropertyID::BackgroundColor, PropertyID::BackgroundImage, PropertyID::BackgroundPositionX, PropertyID::BackgroundPositionY, PropertyID::BackgroundSize, PropertyID::BackgroundRepeat, PropertyID::BackgroundAttachment, PropertyID::BackgroundOrigin, PropertyID::BackgroundClip }; + Vector> property_value_strings = { move(color_value_string), move(image_value_string), move(position_x_value_string), move(position_y_value_string), move(size_value_string), move(repeat_value_string), move(attachment_value_string), move(origin_value_string), move(clip_value_string) }; + + for (size_t i = 0; i < property_ids.size(); i++) { + if (!property_value_strings[i].has_value()) + continue; + + auto intial_property_string_value = property_initial_value(property_ids[i])->to_string(mode); + + if (property_value_strings[i].value() != intial_property_string_value) { + if (!builder.is_empty()) + builder.append(" "sv); + builder.append(property_value_strings[i].value()); + } + } + + if (builder.is_empty()) + return "none"_string; + + return builder.to_string_without_validation(); + }; + auto get_layer_count = [](auto style_value) -> size_t { return style_value->is_value_list() ? style_value->as_value_list().size() : 1; }; @@ -114,7 +139,7 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const auto layer_count = max(get_layer_count(image), max(get_layer_count(position_x), max(get_layer_count(position_y), max(get_layer_count(size), max(get_layer_count(repeat), max(get_layer_count(attachment), max(get_layer_count(origin), get_layer_count(clip)))))))); if (layer_count == 1) { - return MUST(String::formatted("{} {} {} {} {} {} {} {} {}", color->to_string(mode), image->to_string(mode), position_x->to_string(mode), position_y->to_string(mode), size->to_string(mode), repeat->to_string(mode), attachment->to_string(mode), origin->to_string(mode), clip->to_string(mode))); + return serialize_layer(color->to_string(mode), image->to_string(mode), position_x->to_string(mode), position_y->to_string(mode), size->to_string(mode), repeat->to_string(mode), attachment->to_string(mode), origin->to_string(mode), clip->to_string(mode)); } auto get_layer_value_string = [mode](ValueComparingRefPtr const& style_value, size_t index) { @@ -127,9 +152,12 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const for (size_t i = 0; i < layer_count; i++) { if (i) builder.append(", "sv); + + Optional maybe_color_value_string; if (i == layer_count - 1) - builder.appendff("{} ", color->to_string(mode)); - builder.appendff("{} {} {} {} {} {} {} {}", get_layer_value_string(image, i), get_layer_value_string(position_x, i), get_layer_value_string(position_y, i), get_layer_value_string(size, i), get_layer_value_string(repeat, i), get_layer_value_string(attachment, i), get_layer_value_string(origin, i), get_layer_value_string(clip, i)); + maybe_color_value_string = color->to_string(mode); + + builder.append(serialize_layer(maybe_color_value_string, get_layer_value_string(image, i), get_layer_value_string(position_x, i), get_layer_value_string(position_y, i), get_layer_value_string(size, i), get_layer_value_string(repeat, i), get_layer_value_string(attachment, i), get_layer_value_string(origin, i), get_layer_value_string(clip, i))); } return MUST(builder.to_string()); diff --git a/Tests/LibWeb/Text/expected/background-style-declaration-cssText-crash.txt b/Tests/LibWeb/Text/expected/background-style-declaration-cssText-crash.txt index ece2e7a4a02..643522233a6 100644 --- a/Tests/LibWeb/Text/expected/background-style-declaration-cssText-crash.txt +++ b/Tests/LibWeb/Text/expected/background-style-declaration-cssText-crash.txt @@ -1,2 +1,2 @@ -:root { background: transparent none 1px 1px auto auto repeat scroll padding-box border-box; } +:root { background: 1px 1px; } PASS (didn't crash) diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt b/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt index 6c18da36daf..e67de32ed0c 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt +++ b/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt @@ -174,7 +174,7 @@ All supported properties and their default values exposed from CSSStylePropertie 'aspect-ratio': 'auto' 'backdropFilter': 'none' 'backdrop-filter': 'none' -'background': 'rgba(0, 0, 0, 0) none 0% 0% auto auto repeat scroll padding-box border-box' +'background': 'none' 'backgroundAttachment': 'scroll' 'background-attachment': 'scroll' 'backgroundBlendMode': 'normal'