LibWeb: Use shortest serialization for shorthands with repeated values

For shorthands where all the values are repeated, we now only output
the value once.

Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp

@@ -396,6 +396,17 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
         return builder.to_string_without_validation();
     }
     default:
+        auto all_properties_same_value = true;
+        auto first_property_value = m_properties.values.first();
+        for (auto i = 1u; i < m_properties.values.size(); ++i) {
+            if (m_properties.values[i] != first_property_value) {
+                all_properties_same_value = false;
+                break;
+            }
+        }
+        if (all_properties_same_value)
+            return first_property_value->to_string(mode);
+
         StringBuilder builder;
         auto first = true;
         for (auto& value : m_properties.values) {

Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt

@@ -364,7 +364,7 @@ All supported properties and their default values exposed from CSSStylePropertie
 'font-weight': '400'
 'fontWidth': 'normal'
 'font-width': 'normal'
-'gap': 'normal normal'
+'gap': 'normal'
 'grid': ''
 'gridArea': ''
 'grid-area': ''
@@ -382,8 +382,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'grid-column-gap': 'normal'
 'gridColumnStart': 'auto'
 'grid-column-start': 'auto'
-'gridGap': 'normal normal'
+'gridGap': 'normal'
-'grid-gap': 'normal normal'
+'grid-gap': 'normal'
 'gridRow': 'auto'
 'grid-row': 'auto'
 'gridRowEnd': 'auto'
@@ -405,15 +405,15 @@ All supported properties and their default values exposed from CSSStylePropertie
 'image-rendering': 'auto'
 'inlineSize': '284px'
 'inline-size': '284px'
-'inset': 'auto auto auto auto'
+'inset': 'auto'
-'insetBlock': 'auto auto auto auto'
+'insetBlock': 'auto'
-'inset-block': 'auto auto auto auto'
+'inset-block': 'auto'
 'insetBlockEnd': 'auto'
 'inset-block-end': 'auto'
 'insetBlockStart': 'auto'
 'inset-block-start': 'auto'
-'insetInline': 'auto auto auto auto'
+'insetInline': 'auto'
-'inset-inline': 'auto auto auto auto'
+'inset-inline': 'auto'
 'insetInlineEnd': 'auto'
 'inset-inline-end': 'auto'
 'insetInlineStart': 'auto'
@@ -439,16 +439,16 @@ All supported properties and their default values exposed from CSSStylePropertie
 'listStyleType': 'disc'
 'list-style-type': 'disc'
 'margin': '8px'
-'marginBlock': '8px 8px 8px 8px'
+'marginBlock': '8px'
-'margin-block': '8px 8px 8px 8px'
+'margin-block': '8px'
 'marginBlockEnd': '8px'
 'margin-block-end': '8px'
 'marginBlockStart': '8px'
 'margin-block-start': '8px'
 'marginBottom': '8px'
 'margin-bottom': '8px'
-'marginInline': '8px 8px 8px 8px'
+'marginInline': '8px'
-'margin-inline': '8px 8px 8px 8px'
+'margin-inline': '8px'
 'marginInlineEnd': '8px'
 'margin-inline-end': '8px'
 'marginInlineStart': '8px'
@@ -509,16 +509,16 @@ All supported properties and their default values exposed from CSSStylePropertie
 'overflowY': 'visible'
 'overflow-y': 'visible'
 'padding': '0px'
-'paddingBlock': '0px 0px 0px 0px'
+'paddingBlock': '0px'
-'padding-block': '0px 0px 0px 0px'
+'padding-block': '0px'
 'paddingBlockEnd': '0px'
 'padding-block-end': '0px'
 'paddingBlockStart': '0px'
 'padding-block-start': '0px'
 'paddingBottom': '0px'
 'padding-bottom': '0px'
-'paddingInline': '0px 0px 0px 0px'
+'paddingInline': '0px'
-'padding-inline': '0px 0px 0px 0px'
+'padding-inline': '0px'
 'paddingInlineEnd': '0px'
 'padding-inline-end': '0px'
 'paddingInlineStart': '0px'

Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-001.txt

@@ -2,5 +2,5 @@ Harness status: OK
 
 Found 1 tests
 
-1 Fail
+1 Pass
-Fail	gap is interpolable
+Pass	gap is interpolable

Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-002.txt

@@ -2,5 +2,5 @@ Harness status: OK
 
 Found 1 tests
 
-1 Fail
+1 Pass
-Fail	gap: normal is not interpolable
+Pass	gap: normal is not interpolable

Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-003.txt

@@ -2,5 +2,5 @@ Harness status: OK
 
 Found 1 tests
 
-1 Fail
+1 Pass
-Fail	Default gap is not interpolable
+Pass	Default gap is not interpolable

Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-parsing-002.txt

@@ -2,20 +2,20 @@ Harness status: OK
 
 Found 16 tests
 
-6 Pass
+12 Pass
-10 Fail
+4 Fail
-Fail	e.style['gap'] = "normal" should set the property value
+Pass	e.style['gap'] = "normal" should set the property value
-Fail	e.style['gap'] = "10px" should set the property value
+Pass	e.style['gap'] = "10px" should set the property value
-Fail	e.style['gap'] = "normal normal" should set the property value
+Pass	e.style['gap'] = "normal normal" should set the property value
-Fail	e.style['gap'] = "10px 10px" should set the property value
+Pass	e.style['gap'] = "10px 10px" should set the property value
 Pass	e.style['column-gap'] = "normal" should set the property value
 Pass	e.style['column-gap'] = "10px" should set the property value
 Pass	e.style['row-gap'] = "normal" should set the property value
 Pass	e.style['row-gap'] = "10px" should set the property value
 Fail	'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'
-Fail	getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'
+Pass	getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'
 Fail	'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'
-Fail	getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'
+Pass	getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'
 Fail	'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'
 Pass	getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'
 Fail	'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'

Tests/LibWeb/Text/expected/wpt-import/css/css-align/parsing/gap-valid.txt

@@ -0,0 +1,14 @@
+Harness status: OK
+
+Found 9 tests
+
+9 Pass
+Pass	e.style['gap'] = "normal normal" should set the property value
+Pass	e.style['gap'] = "10px 10px" should set the property value
+Pass	e.style['gap'] = "20% 20%" should set the property value
+Pass	e.style['gap'] = "calc(20% + 10px) calc(20% + 10px)" should set the property value
+Pass	e.style['gap'] = "normal 10px" should set the property value
+Pass	e.style['gap'] = "10px 20%" should set the property value
+Pass	e.style['gap'] = "20% calc(20% + 10px)" should set the property value
+Pass	e.style['gap'] = "calc(20% + 10px) 0px" should set the property value
+Pass	e.style['gap'] = "0px normal" should set the property value

Tests/LibWeb/Text/input/wpt-import/css/css-align/parsing/gap-valid.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Box Alignment Level 3: parsing gap with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap">
+<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("gap", "normal normal", "normal");
+test_valid_value("gap", "10px 10px", "10px");
+test_valid_value("gap", "20% 20%", "20%");
+test_valid_value("gap", "calc(20% + 10px) calc(20% + 10px)", "calc(20% + 10px)");
+
+test_valid_value("gap", "normal 10px");
+test_valid_value("gap", "10px 20%");
+test_valid_value("gap", "20% calc(20% + 10px)");
+test_valid_value("gap", "calc(20% + 10px) 0px");
+test_valid_value("gap", "0px normal");
+</script>
+</body>
+</html>