diff --git a/Documentation/CSSProperties.md b/Documentation/CSSProperties.md index 29f462c54a7..772c3ae7f3c 100644 --- a/Documentation/CSSProperties.md +++ b/Documentation/CSSProperties.md @@ -60,5 +60,5 @@ bool Paintable::is_visible() const ## JavaScript Some properties have special rules for getting the computed value from JS. For these, you will need to add to -`CSSStyleProperties::style_value_for_computed_property()`. Shorthands that are constructed in an unusual way (as in, not -using `ShorthandStyleValue`) also need handling inside `CSSStyleProperties::get_property_internal()`. +`CSSStyleProperties::style_value_for_computed_property()`. Shorthands that are serialized in an unusual way +also need handling inside `CSSShorthandStyleValue::to_string()`. diff --git a/Libraries/LibWeb/CSS/CSSStyleProperties.cpp b/Libraries/LibWeb/CSS/CSSStyleProperties.cpp index 194031705a6..1d9dc406a61 100644 --- a/Libraries/LibWeb/CSS/CSSStyleProperties.cpp +++ b/Libraries/LibWeb/CSS/CSSStyleProperties.cpp @@ -430,30 +430,6 @@ Optional CSSStyleProperties::get_property_internal(PropertyID pro { // 2. If property is a shorthand property, then follow these substeps: if (property_is_shorthand(property_id)) { - - // AD-HOC: Handle shorthands that require manual construction. - switch (property_id) { - case PropertyID::Border: { - auto width = get_property_internal(PropertyID::BorderWidth); - auto style = get_property_internal(PropertyID::BorderStyle); - auto color = get_property_internal(PropertyID::BorderColor); - // `border` only has a reasonable value if all four sides are the same. - if (!width.has_value() || width->value->is_value_list() || !style.has_value() || style->value->is_value_list() || !color.has_value() || color->value->is_value_list()) - return {}; - if (width->important != style->important || width->important != color->important) - return {}; - return StyleProperty { - .important = width->important, - .property_id = property_id, - .value = ShorthandStyleValue::create(property_id, - { PropertyID::BorderWidth, PropertyID::BorderStyle, PropertyID::BorderColor }, - { width->value, style->value, color->value }) - }; - } - default: - break; - } - // 1. Let list be a new empty array. Vector> list; Optional last_important_flag; diff --git a/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp index fdd6601fdc1..2a3d4cb57e3 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp @@ -238,6 +238,22 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const return MUST(builder.to_string()); } + case PropertyID::Border: { + auto all_longhands_same_value = [](ValueComparingRefPtr const& shorthand) -> bool { + VERIFY(shorthand); + VERIFY(shorthand->is_shorthand()); + + auto longhands = shorthand->as_shorthand().values(); + + return all_of(longhands, [&](auto const& longhand) { return longhand == longhands[0]; }); + }; + + // `border` only has a reasonable value if all four sides are the same. + if (!all_longhands_same_value(longhand(PropertyID::BorderWidth)) || !all_longhands_same_value(longhand(PropertyID::BorderStyle)) || !all_longhands_same_value(longhand(PropertyID::BorderColor))) + return ""_string; + + return default_to_string(); + } case PropertyID::BorderImage: { auto source = longhand(PropertyID::BorderImageSource); auto slice = longhand(PropertyID::BorderImageSlice); diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom/shorthand-values.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom/shorthand-values.txt index 0ccfa5c34a2..1f0465c77f7 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/cssom/shorthand-values.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom/shorthand-values.txt @@ -2,15 +2,15 @@ Harness status: OK Found 20 tests -14 Pass -6 Fail +15 Pass +5 Fail Pass The serialization of border: 1px; border-top: 1px; should be canonical. Pass The serialization of border: 1px solid red; should be canonical. Pass The serialization of border: 1px red; should be canonical. Pass The serialization of border: red; should be canonical. Fail The serialization of border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-image: none; should be canonical. Fail The serialization of border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; should be canonical. -Fail The serialization of border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px; should be canonical. +Pass The serialization of border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px; should be canonical. Fail The serialization of border: 1px; border-top: 2px; should be canonical. Fail The serialization of border: 1px; border-top: 1px !important; should be canonical. Fail The serialization of border: 1px; border-top-color: red; should be canonical.