LibWeb: Handle serialization of invalid border in all contexts

Previously as we handled this in `get_property_internal` there were some
contexts that we missed, for instance `CSSStyleProperties::serialized`.

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()`.

Libraries/LibWeb/CSS/CSSStyleProperties.cpp

@@ -430,30 +430,6 @@ Optional<StyleProperty> 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<ValueComparingNonnullRefPtr<CSSStyleValue const>> list;
         Optional<Important> last_important_flag;

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<CSSStyleValue const> 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);

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.