LibWeb/CSS: Use ShorthandStyleValue to serialize shorthands

This wins us 65 new WPT subtest passes! It also shows up that we're
doing the wrong thing in ShorthandStyleValue in places, notably with
the grid properties. However, having one place to fix instead of two
will make it easier to correct them. :^)

In order to be fully correct, we should use the algorithm here:
https://drafts.csswg.org/cssom/#serialize-a-css-value

However, it's quite hand-wavy. What we do have in the meantime is
`ShorthandStyleValue::to_string()`, where we special-case the
serialization rules for shorthands with a generic fallback that's
equivalent to what the previous `get_property_value()` code was doing.

Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2018-2024, Andreas Kling <andreas@ladybird.org>
+ * Copyright (c) 2023-2024, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -11,6 +12,7 @@
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/StyleComputer.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
+#include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
 #include <LibWeb/Infra/Strings.h>
@@ -277,11 +279,12 @@ String CSSStyleDeclaration::get_property_value(StringView property_name) const
     // 2. If property is a shorthand property, then follow these substeps:
     if (property_is_shorthand(property_id.value())) {
         // 1. Let list be a new empty array.
-        StringBuilder list;
+        Vector<ValueComparingNonnullRefPtr<CSSStyleValue const>> list;
         Optional<Important> last_important_flag;
 
         // 2. For each longhand property longhand that property maps to, in canonical order, follow these substeps:
-        for (auto longhand_property_id : longhands_for_shorthand(property_id.value())) {
+        Vector<PropertyID> longhand_ids = longhands_for_shorthand(property_id.value());
+        for (auto longhand_property_id : longhand_ids) {
             // 1. If longhand is a case-sensitive match for a property name of a CSS declaration in the declarations, let declaration be that CSS declaration, or null otherwise.
             auto declaration = property(longhand_property_id);
 
@@ -290,9 +293,7 @@ String CSSStyleDeclaration::get_property_value(StringView property_name) const
                 return {};
 
             // 3. Append the declaration to list.
-            if (!list.is_empty())
-                list.append(' ');
-            list.append(declaration->value->to_string());
+            list.append(declaration->value);
 
             if (last_important_flag.has_value() && declaration->important != *last_important_flag)
                 return {};
@@ -300,7 +301,8 @@ String CSSStyleDeclaration::get_property_value(StringView property_name) const
         }
 
         // 3. If important flags of all declarations in list are same, then return the serialization of list.
-        return list.to_string_without_validation();
+        // NOTE: Currently we implement property-specific shorthand serialization in ShorthandStyleValue::to_string().
+        return ShorthandStyleValue::create(property_id.value(), longhand_ids, list)->to_string();
 
         // 4. Return the empty string.
         // NOTE: This is handled by the loop.

Tests/LibWeb/Text/expected/HTML/place-items-shorthand.txt

@@ -1,41 +1,41 @@
 === place-items: normal
-place-items: normal normal
+place-items: normal
 align-items: normal
 justify-items: normal
 === place-items: stretch
-place-items: stretch stretch
+place-items: stretch
 align-items: stretch
 justify-items: stretch
 === place-items: start
-place-items: start start
+place-items: start
 align-items: start
 justify-items: start
 === place-items: end
-place-items: end end
+place-items: end
 align-items: end
 justify-items: end
 === place-items: self-start
-place-items: self-start self-start
+place-items: self-start
 align-items: self-start
 justify-items: self-start
 === place-items: self-end
-place-items: self-end self-end
+place-items: self-end
 align-items: self-end
 justify-items: self-end
 === place-items: center
-place-items: center center
+place-items: center
 align-items: center
 justify-items: center
 === place-items: flex-start
-place-items: flex-start flex-start
+place-items: flex-start
 align-items: flex-start
 justify-items: flex-start
 === place-items: flex-end
-place-items: flex-end flex-end
+place-items: flex-end
 align-items: flex-end
 justify-items: flex-end
 === place-items: baseline
-place-items: baseline baseline
+place-items: baseline
 align-items: baseline
 justify-items: baseline
 === place-items: normal start

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

@@ -57,9 +57,9 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'WebkitBorderBottomRightRadius': '0px'
 'webkitBorderBottomRightRadius': '0px'
 '-webkit-border-bottom-right-radius': '0px'
-'WebkitBorderRadius': '0px 0px 0px 0px'
-'webkitBorderRadius': '0px 0px 0px 0px'
-'-webkit-border-radius': '0px 0px 0px 0px'
+'WebkitBorderRadius': '0px 0px 0px 0px / 0px 0px 0px 0px'
+'webkitBorderRadius': '0px 0px 0px 0px / 0px 0px 0px 0px'
+'-webkit-border-radius': '0px 0px 0px 0px / 0px 0px 0px 0px'
 'WebkitBorderTopLeftRadius': '0px'
 'webkitBorderTopLeftRadius': '0px'
 '-webkit-border-top-left-radius': '0px'
@@ -159,7 +159,7 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'aspect-ratio': 'auto'
 'backdropFilter': 'none'
 'backdrop-filter': 'none'
-'background': 'scroll border-box rgba(0, 0, 0, 0) none padding-box left 0% top 0% repeat auto auto'
+'background': 'rgba(0, 0, 0, 0) none left 0% top 0% auto auto repeat scroll padding-box border-box'
 'backgroundAttachment': 'scroll'
 'background-attachment': 'scroll'
 'backgroundClip': 'border-box'
@@ -205,8 +205,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'border-left-style': 'none'
 'borderLeftWidth': 'medium'
 'border-left-width': 'medium'
-'borderRadius': '0px 0px 0px 0px'
-'border-radius': '0px 0px 0px 0px'
+'borderRadius': '0px 0px 0px 0px / 0px 0px 0px 0px'
+'border-radius': '0px 0px 0px 0px / 0px 0px 0px 0px'
 'borderRight': 'medium none rgb(0, 0, 0)'
 'border-right': 'medium none rgb(0, 0, 0)'
 'borderRightColor': 'rgb(0, 0, 0)'
@@ -255,7 +255,7 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'column-span': 'none'
 'columnWidth': 'auto'
 'column-width': 'auto'
-'columns': 'auto auto'
+'columns': 'auto'
 'content': 'normal'
 'contentVisibility': 'visible'
 'content-visibility': 'visible'
@@ -290,7 +290,7 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'flexWrap': 'nowrap'
 'flex-wrap': 'nowrap'
 'float': 'none'
-'font': 'serif 16px normal normal normal 400 normal'
+'font': 'normal normal 400 normal 16px / normal serif'
 'fontFamily': 'serif'
 'font-family': 'serif'
 'fontFeatureSettings': 'normal'
@@ -312,17 +312,17 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'fontWidth': 'normal'
 'font-width': 'normal'
 'gap': 'normal normal'
-'grid': 'none auto auto'
-'gridArea': 'auto auto auto auto'
-'grid-area': 'auto auto auto auto'
+'grid': ''
+'gridArea': ''
+'grid-area': ''
 'gridAutoColumns': 'auto'
 'grid-auto-columns': 'auto'
 'gridAutoFlow': 'row'
 'grid-auto-flow': 'row'
 'gridAutoRows': 'auto'
 'grid-auto-rows': 'auto'
-'gridColumn': 'auto auto'
-'grid-column': 'auto auto'
+'gridColumn': 'auto'
+'grid-column': 'auto'
 'gridColumnEnd': 'auto'
 'grid-column-end': 'auto'
 'gridColumnGap': 'normal'
@@ -331,16 +331,16 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'grid-column-start': 'auto'
 'gridGap': 'normal normal'
 'grid-gap': 'normal normal'
-'gridRow': 'auto auto'
-'grid-row': 'auto auto'
+'gridRow': 'auto'
+'grid-row': 'auto'
 'gridRowEnd': 'auto'
 'grid-row-end': 'auto'
 'gridRowGap': 'normal'
 'grid-row-gap': 'normal'
 'gridRowStart': 'auto'
 'grid-row-start': 'auto'
-'gridTemplate': 'none auto auto'
-'grid-template': 'none auto auto'
+'gridTemplate': ''
+'grid-template': ''
 'gridTemplateAreas': 'none'
 'grid-template-areas': 'none'
 'gridTemplateColumns': 'auto'
@@ -376,8 +376,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'letter-spacing': 'normal'
 'lineHeight': 'normal'
 'line-height': 'normal'
-'listStyle': 'disc outside none'
-'list-style': 'disc outside none'
+'listStyle': 'outside none disc'
+'list-style': 'outside none disc'
 'listStyleImage': 'none'
 'list-style-image': 'none'
 'listStylePosition': 'outside'
@@ -469,12 +469,12 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'padding-right': '0px'
 'paddingTop': '0px'
 'padding-top': '0px'
-'placeContent': 'normal normal'
-'place-content': 'normal normal'
+'placeContent': 'normal'
+'place-content': 'normal'
 'placeItems': 'normal legacy'
 'place-items': 'normal legacy'
-'placeSelf': 'auto auto'
-'place-self': 'auto auto'
+'placeSelf': 'auto'
+'place-self': 'auto'
 'pointerEvents': 'auto'
 'pointer-events': 'auto'
 'position': 'static'
@@ -518,8 +518,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'text-align': 'start'
 'textAnchor': 'start'
 'text-anchor': 'start'
-'textDecoration': 'rgb(0, 0, 0) none solid auto'
-'text-decoration': 'rgb(0, 0, 0) none solid auto'
+'textDecoration': 'none auto solid rgb(0, 0, 0)'
+'text-decoration': 'none auto solid rgb(0, 0, 0)'
 'textDecorationColor': 'rgb(0, 0, 0)'
 'text-decoration-color': 'rgb(0, 0, 0)'
 'textDecorationLine': 'none'

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-area-computed.txt

@@ -6,11 +6,11 @@ Rerun
 
 Found 30 tests
 
-6 Pass
-24 Fail
+9 Pass
+21 Fail
 Details
 Result	Test Name	MessageFail	Property grid-area value 'auto / auto / auto / auto'	
-Fail	Property grid-row value 'auto / auto'	
+Pass	Property grid-row value 'auto / auto'	
 Pass	Property grid-column-end value 'auto'	
 Fail	Property grid-row value '-zπ'	
 Pass	Property grid-row-start value 'AZ'	
@@ -25,7 +25,7 @@ Fail	Property grid-column-start value '-44 Z'
 Fail	Property grid-row-end value '1 -πA'	
 Fail	Property grid-column-end value '5 π_'	
 Fail	Property grid-area value 'span 2 i / auto / auto / auto'	
-Fail	Property grid-row value 'span 2 / auto'	
+Pass	Property grid-row value 'span 2 / auto'	
 Fail	Property grid-column-start value 'span 1 i'	
 Pass	Property grid-row-start value 'span 1'	
 Fail	Property grid-row-end value 'span 2 i'	
@@ -35,7 +35,7 @@ Fail	Property grid-row value 'span i / auto'
 Fail	Property grid-area value 'auto / i / auto / i'	
 Fail	Property grid-area value 'auto / i / 2 j'	
 Fail	Property grid-area value 'auto / i / 2 j / span 3 k'	
-Fail	Property grid-row value 'auto / i'	
+Pass	Property grid-row value 'auto / i'	
 Fail	Property grid-column value '2 j / span 3 k'	
 Fail	Property grid-column-end value '\31st'	
 Fail	Property grid-column-end value '\31 st'	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-area-valid.txt

@@ -6,16 +6,16 @@ Rerun
 
 Found 57 tests
 
-6 Pass
-51 Fail
+13 Pass
+44 Fail
 Details
 Result	Test Name	MessageFail	e.style['grid-area'] = "auto" should set the property value	
 Fail	e.style['grid-area'] = "auto / auto" should set the property value	
 Fail	e.style['grid-area'] = "auto / auto / auto" should set the property value	
 Fail	e.style['grid-area'] = "auto / auto / auto / auto" should set the property value	
 Fail	e.style['grid-area'] = "AuTo" should set the property value	
-Fail	e.style['grid-row'] = "auto" should set the property value	
-Fail	e.style['grid-row'] = "auto/auto" should set the property value	
+Pass	e.style['grid-row'] = "auto" should set the property value	
+Pass	e.style['grid-row'] = "auto/auto" should set the property value	
 Pass	e.style['grid-column-end'] = "AuTo" should set the property value	
 Fail	e.style['grid-area'] = "--a" should set the property value	
 Fail	e.style['grid-row'] = "-zπ" should set the property value	
@@ -27,7 +27,7 @@ Pass	e.style['grid-row-end'] = "_9" should set the property value
 Fail	e.style['grid-area'] = "1" should set the property value	
 Fail	e.style['grid-area'] = "+90 -a-" should set the property value	
 Fail	e.style['grid-row'] = "az 2" should set the property value	
-Fail	e.style['grid-column'] = "9" should set the property value	
+Pass	e.style['grid-column'] = "9" should set the property value	
 Fail	e.style['grid-column'] = "-19 zA" should set the property value	
 Fail	e.style['grid-column'] = "-A0 33" should set the property value	
 Pass	e.style['grid-row-start'] = "-19" should set the property value	
@@ -39,7 +39,7 @@ Fail	e.style['grid-column-end'] = "π_ +5" should set the property value
 Fail	e.style['grid-area'] = "span 2 i" should set the property value	
 Fail	e.style['grid-area'] = "i 2 SpAn" should set the property value	
 Fail	e.style['grid-area'] = "span 1 i" should set the property value	
-Fail	e.style['grid-row'] = "span 2" should set the property value	
+Pass	e.style['grid-row'] = "span 2" should set the property value	
 Fail	e.style['grid-column'] = "i SpAn" should set the property value	
 Fail	e.style['grid-row-start'] = "span i" should set the property value	
 Fail	e.style['grid-column-start'] = "SpAn i 2" should set the property value	
@@ -51,17 +51,17 @@ Fail	e.style['grid-area'] = "auto / i / auto / 2 i" should set the property valu
 Fail	e.style['grid-area'] = "1 / i / auto / i" should set the property value	
 Fail	e.style['grid-area'] = "1 / auto / auto / auto" should set the property value	
 Fail	e.style['grid-area'] = "1 / auto / i / auto" should set the property value	
-Fail	e.style['grid-area'] = "1 / j / i / k" should set the property value	
+Pass	e.style['grid-area'] = "1 / j / i / k" should set the property value	
 Fail	e.style['grid-area'] = "1 / auto / 2 / auto" should set the property value	
 Fail	e.style['grid-area'] = "1 / i / 2 / auto" should set the property value	
 Fail	e.style['grid-area'] = "i / i / auto / auto" should set the property value	
 Fail	e.style['grid-area'] = "i / auto / i / auto" should set the property value	
 Fail	e.style['grid-area'] = "auto / i / 2 j" should set the property value	
 Fail	e.style['grid-area'] = "auto / i / 2 j / span 3 k" should set the property value	
-Fail	e.style['grid-row'] = "auto / i" should set the property value	
+Pass	e.style['grid-row'] = "auto / i" should set the property value	
 Fail	e.style['grid-row'] = "i / auto" should set the property value	
 Fail	e.style['grid-row'] = "2 i / auto" should set the property value	
-Fail	e.style['grid-row'] = "1 / auto" should set the property value	
+Pass	e.style['grid-row'] = "1 / auto" should set the property value	
 Fail	e.style['grid-column'] = "2 j / span 3 k" should set the property value	
 Fail	e.style['grid-column-end'] = "\\31st" should set the property value	
 Fail	e.style['grid-column-end'] = "\\31 st" should set the property value	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-column-shortest-serialization.txt

@@ -6,18 +6,19 @@ Rerun
 
 Found 16 tests
 
-16 Fail
+8 Pass
+8 Fail
 Details
-Result	Test Name	MessageFail	Property grid-column value 'auto / auto'	
-Fail	Property grid-column value 'auto'	
-Fail	Property grid-column value '10 / auto'	
-Fail	Property grid-column value '10'	
-Fail	Property grid-column value '-10 / auto'	
-Fail	Property grid-column value '-10'	
+Result	Test Name	MessagePass	Property grid-column value 'auto / auto'	
+Pass	Property grid-column value 'auto'	
+Pass	Property grid-column value '10 / auto'	
+Pass	Property grid-column value '10'	
+Pass	Property grid-column value '-10 / auto'	
+Pass	Property grid-column value '-10'	
 Fail	Property grid-column value 'first / first'	
 Fail	Property grid-column value 'first'	
-Fail	Property grid-column value 'span 2 / auto'	
-Fail	Property grid-column value 'span 2'	
+Pass	Property grid-column value 'span 2 / auto'	
+Pass	Property grid-column value 'span 2'	
 Fail	Property grid-column value '2 first / auto'	
 Fail	Property grid-column value '2 first'	
 Fail	Property grid-column value 'span first / auto'	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-row-shortest-serialization.txt

@@ -6,16 +6,17 @@ Rerun
 
 Found 15 tests
 
-15 Fail
+8 Pass
+7 Fail
 Details
-Result	Test Name	MessageFail	Property grid-row value 'auto / auto'	
-Fail	Property grid-row value 'auto'	
-Fail	Property grid-row value '10 / auto'	
-Fail	Property grid-row value '10'	
-Fail	Property grid-row value '-10 / auto'	
-Fail	Property grid-row value '-10'	
-Fail	Property grid-row value 'span 2 / auto'	
-Fail	Property grid-row value 'span 2'	
+Result	Test Name	MessagePass	Property grid-row value 'auto / auto'	
+Pass	Property grid-row value 'auto'	
+Pass	Property grid-row value '10 / auto'	
+Pass	Property grid-row value '10'	
+Pass	Property grid-row value '-10 / auto'	
+Pass	Property grid-row value '-10'	
+Pass	Property grid-row value 'span 2 / auto'	
+Pass	Property grid-row value 'span 2'	
 Fail	Property grid-row value '3 last / auto'	
 Fail	Property grid-row value '3 last'	
 Fail	Property grid-row value 'span first / auto'	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-invalid.txt

@@ -6,40 +6,40 @@ Rerun
 
 Found 34 tests
 
-8 Pass
-26 Fail
+21 Pass
+13 Fail
 Details
 Result	Test Name	MessagePass	e.style['grid'] = "none none" should not set the property value	
 Pass	e.style['grid'] = "none []" should not set the property value	
 Fail	e.style['grid'] = "10px" should not set the property value	
 Fail	e.style['grid'] = "20%" should not set the property value	
 Fail	e.style['grid'] = "5fr" should not set the property value	
-Fail	e.style['grid'] = "[a]" should not set the property value	
+Pass	e.style['grid'] = "[a]" should not set the property value	
 Fail	e.style['grid'] = "[a] 10px" should not set the property value	
 Fail	e.style['grid'] = "[a] 10px []" should not set the property value	
-Fail	e.style['grid'] = "[]" should not set the property value	
+Pass	e.style['grid'] = "[]" should not set the property value	
 Fail	e.style['grid'] = "10px \"a\"" should not set the property value	
 Fail	e.style['grid'] = "[] 10px \"a\"" should not set the property value	
 Fail	e.style['grid'] = "10px [] \"a\"" should not set the property value	
-Fail	e.style['grid'] = "[] [] \"a\"" should not set the property value	
-Fail	e.style['grid'] = "\"a\" none" should not set the property value	
+Pass	e.style['grid'] = "[] [] \"a\"" should not set the property value	
+Pass	e.style['grid'] = "\"a\" none" should not set the property value	
 Fail	e.style['grid'] = "\"a\" 10px 10px" should not set the property value	
 Fail	e.style['grid'] = "\"a\" [a] 10px" should not set the property value	
 Fail	e.style['grid'] = "\"a\" [a] 10px [a]" should not set the property value	
 Fail	e.style['grid'] = "\"a\" [a] [a] 10px" should not set the property value	
 Fail	e.style['grid'] = "\"a\" 10px [a] [a]" should not set the property value	
-Fail	e.style['grid'] = "\"a\" [a] [a]" should not set the property value	
-Fail	e.style['grid'] = "[a] \"a\" [a] [a]" should not set the property value	
-Fail	e.style['grid'] = "\"a\" \"a\" [a] [a]" should not set the property value	
-Fail	e.style['grid'] = "\"a\" [a] [a] / none" should not set the property value	
-Fail	e.style['grid'] = "\"a\" \"a\" [a] [a] / none" should not set the property value	
-Fail	e.style['grid'] = "none / \"a\"" should not set the property value	
-Fail	e.style['grid'] = "\"a\" / none" should not set the property value	
-Fail	e.style['grid'] = "none / [] \"a\"" should not set the property value	
+Pass	e.style['grid'] = "\"a\" [a] [a]" should not set the property value	
+Pass	e.style['grid'] = "[a] \"a\" [a] [a]" should not set the property value	
+Pass	e.style['grid'] = "\"a\" \"a\" [a] [a]" should not set the property value	
+Pass	e.style['grid'] = "\"a\" [a] [a] / none" should not set the property value	
+Pass	e.style['grid'] = "\"a\" \"a\" [a] [a] / none" should not set the property value	
+Pass	e.style['grid'] = "none / \"a\"" should not set the property value	
+Pass	e.style['grid'] = "\"a\" / none" should not set the property value	
+Pass	e.style['grid'] = "none / [] \"a\"" should not set the property value	
 Pass	e.style['grid'] = "none / \"a\" []" should not set the property value	
 Pass	e.style['grid'] = "none / \"a\" [] 10px" should not set the property value	
 Pass	e.style['grid'] = "auto-flow 100px" should not set the property value	
-Fail	e.style['grid'] = "auto-flow / auto-flow" should not set the property value	
+Pass	e.style['grid'] = "auto-flow / auto-flow" should not set the property value	
 Pass	e.style['grid'] = "auto-flow 1fr / auto-flow 1fr" should not set the property value	
 Pass	e.style['grid'] = "dense auto-flow / dense auto-flow" should not set the property value	
 Pass	e.style['grid'] = "auto / auto-flow foo()" should not set the property value	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt

@@ -6,8 +6,8 @@ Rerun
 
 Found 121 tests
 
-26 Pass
-95 Fail
+30 Pass
+91 Fail
 Details
 Result	Test Name	MessageFail	e.style.cssText = grid: auto-flow auto / 100px 100px should set grid	
 Fail	e.style.cssText = grid: auto-flow auto / 100px 100px should set grid-template-areas	
@@ -17,7 +17,7 @@ Fail	e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas:
 Fail	e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid-template-areas	
 Fail	e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid	
 Pass	e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid-auto-flow	
-Fail	e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid-template	
+Pass	e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid-template	
 Fail	cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-template: 30px 40px / 50px 60px;' in its serialization	
 Fail	cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-rows: auto;' in its serialization	
 Fail	cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-columns: auto;' in its serialization	
@@ -45,10 +45,10 @@ Fail	e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(aut
 Fail	e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(auto-fit, 20px) should set grid	
 Fail	e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(auto-fit, 20px) should set grid-template-columns	
 Pass	e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-flow: inherit should set grid	
-Fail	e.style.cssText = grid: 1px / 2px; grid-auto-flow: row should set grid	
+Pass	e.style.cssText = grid: 1px / 2px; grid-auto-flow: row should set grid	
 Fail	e.style.cssText = grid: none / 2px; grid-auto-flow: row should set grid	
-Fail	e.style.cssText = grid: 1px / 2px; grid-auto-columns: auto should set grid	
-Fail	e.style.cssText = grid: 1px / 2px; grid-auto-rows: auto should set grid	
+Pass	e.style.cssText = grid: 1px / 2px; grid-auto-columns: auto should set grid	
+Pass	e.style.cssText = grid: 1px / 2px; grid-auto-rows: auto should set grid	
 Fail	e.style.cssText = grid: 1px / auto-flow 2px; grid-auto-rows: auto should set grid	
 Fail	e.style.cssText = grid: 1px / auto-flow; grid-auto-columns: auto should set grid	
 Fail	e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-columns: auto should set grid	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-valid.txt

@@ -6,11 +6,12 @@ Rerun
 
 Found 49 tests
 
-49 Fail
+5 Pass
+44 Fail
 Details
 Result	Test Name	MessageFail	e.style['grid'] = "none" should set the property value	
 Fail	e.style['grid'] = "none / none" should set the property value	
-Fail	e.style['grid'] = "auto / auto" should set the property value	
+Pass	e.style['grid'] = "auto / auto" should set the property value	
 Fail	e.style['grid'] = "none / [a] 0px" should set the property value	
 Fail	e.style['grid'] = "none / [] 0px" should set the property value	
 Fail	e.style['grid'] = "[a] 10px / auto" should set the property value	
@@ -18,8 +19,8 @@ Fail	e.style['grid'] = "[a] 10px / none" should set the property value
 Fail	e.style['grid'] = "[] 10px [] / [] auto []" should set the property value	
 Fail	e.style['grid'] = "[a] \"a\" 10px" should set the property value	
 Fail	e.style['grid'] = "[a] \"a\" 10px []" should set the property value	
-Fail	e.style['grid'] = "\"a\" 10px" should set the property value	
-Fail	e.style['grid'] = "[] \"a\" 10px" should set the property value	
+Pass	e.style['grid'] = "\"a\" 10px" should set the property value	
+Pass	e.style['grid'] = "[] \"a\" 10px" should set the property value	
 Fail	e.style['grid'] = "[a] \"a\" 10px [a]" should set the property value	
 Fail	e.style['grid'] = "\"a\"" should set the property value	
 Fail	e.style['grid'] = "\"a\" auto" should set the property value	
@@ -35,7 +36,7 @@ Fail	e.style['grid'] = "\"a\" [] \"b\"" should set the property value
 Fail	e.style['grid'] = "\"a\" [a] [b] \"b\"" should set the property value	
 Fail	e.style['grid'] = "\"a\" [a] \"b\"" should set the property value	
 Fail	e.style['grid'] = "\"a\" / 0" should set the property value	
-Fail	e.style['grid'] = "\"a\" 10px / 10px" should set the property value	
+Pass	e.style['grid'] = "\"a\" 10px / 10px" should set the property value	
 Fail	e.style['grid'] = "\"a\" [a] \"b\" 10px" should set the property value	
 Fail	e.style['grid'] = "\"a\" [a] \"b\" 10px [a]" should set the property value	
 Fail	e.style['grid'] = "\"a\" [a] [a] \"b\" 10px" should set the property value	
@@ -56,4 +57,4 @@ Fail	e.style['grid'] = "none / auto-flow 100px" should set the property value
 Fail	e.style['grid'] = "auto-flow 1fr / none" should set the property value	
 Fail	e.style['grid'] = "auto / auto-flow 100px" should set the property value	
 Fail	e.style['grid'] = "auto-flow 1fr / auto" should set the property value	
-Fail	e.style['grid'] = "1fr / 1fr" should set the property value	
+Pass	e.style['grid'] = "1fr / 1fr" should set the property value	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-important.txt

@@ -6,6 +6,6 @@ Rerun
 
 Found 1 tests
 
-1 Fail
+1 Pass
 Details
-Result	Test Name	MessageFail	grid-template followed by !important	
+Result	Test Name	MessagePass	grid-template followed by !important	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand-invalid.txt

@@ -6,8 +6,8 @@ Rerun
 
 Found 66 tests
 
-7 Pass
-59 Fail
+19 Pass
+47 Fail
 Details
 Result	Test Name	MessageFail	e.style['grid-template'] = "auto" should not set the property value	
 Pass	e.style['grid-template'] = "none none" should not set the property value	
@@ -15,7 +15,7 @@ Pass	e.style['grid-template'] = "none []" should not set the property value
 Fail	e.style['grid-template'] = "10px" should not set the property value	
 Fail	e.style['grid-template'] = "20%" should not set the property value	
 Fail	e.style['grid-template'] = "5fr" should not set the property value	
-Fail	e.style['grid-template'] = "[a]" should not set the property value	
+Pass	e.style['grid-template'] = "[a]" should not set the property value	
 Fail	e.style['grid-template'] = "[a] 10px" should not set the property value	
 Fail	e.style['grid-template'] = "[a] repeat(2, 10px)" should not set the property value	
 Fail	e.style['grid-template'] = "[a] repeat(auto-fill, 10px)" should not set the property value	
@@ -24,7 +24,7 @@ Fail	e.style['grid-template'] = "[a] 10px []" should not set the property value
 Fail	e.style['grid-template'] = "[a] repeat(2, 10px) []" should not set the property value	
 Fail	e.style['grid-template'] = "[a] repeat(auto-fill, 10px) []" should not set the property value	
 Fail	e.style['grid-template'] = "[a] repeat(auto-fit, 10px) []" should not set the property value	
-Fail	e.style['grid-template'] = "[]" should not set the property value	
+Pass	e.style['grid-template'] = "[]" should not set the property value	
 Fail	e.style['grid-template'] = "10px \"a\"" should not set the property value	
 Fail	e.style['grid-template'] = "repeat(2, 10px) \"a\"" should not set the property value	
 Fail	e.style['grid-template'] = "repeat(auto-fill, 10px) \"a\"" should not set the property value	
@@ -37,8 +37,8 @@ Fail	e.style['grid-template'] = "10px [] \"a\"" should not set the property valu
 Fail	e.style['grid-template'] = "repeat(2, 10px) [] \"a\"" should not set the property value	
 Fail	e.style['grid-template'] = "repeat(auto-fill, 10px) [] \"a\"" should not set the property value	
 Fail	e.style['grid-template'] = "repeat(auto-fit, 10px) [] \"a\"" should not set the property value	
-Fail	e.style['grid-template'] = "[] [] \"a\"" should not set the property value	
-Fail	e.style['grid-template'] = "\"a\" none" should not set the property value	
+Pass	e.style['grid-template'] = "[] [] \"a\"" should not set the property value	
+Pass	e.style['grid-template'] = "\"a\" none" should not set the property value	
 Fail	e.style['grid-template'] = "\"a\" 10px 10px" should not set the property value	
 Fail	e.style['grid-template'] = "\"a\" repeat(2, 10px) 10px" should not set the property value	
 Fail	e.style['grid-template'] = "\"a\" 10px repeat(2, 10px)" should not set the property value	
@@ -62,14 +62,14 @@ Fail	e.style['grid-template'] = "\"a\" 10px [a] [a]" should not set the property
 Fail	e.style['grid-template'] = "\"a\" repeat(2, 10px) [a] [a]" should not set the property value	
 Fail	e.style['grid-template'] = "\"a\" repeat(auto-fill, 10px) [a] [a]" should not set the property value	
 Fail	e.style['grid-template'] = "\"a\" repeat(auto-fit, 10px) [a] [a]" should not set the property value	
-Fail	e.style['grid-template'] = "\"a\" [a] [a]" should not set the property value	
-Fail	e.style['grid-template'] = "[a] \"a\" [a] [a]" should not set the property value	
-Fail	e.style['grid-template'] = "\"a\" \"a\" [a] [a]" should not set the property value	
-Fail	e.style['grid-template'] = "\"a\" [a] [a] / none" should not set the property value	
-Fail	e.style['grid-template'] = "\"a\" \"a\" [a] [a] / none" should not set the property value	
-Fail	e.style['grid-template'] = "none / \"a\"" should not set the property value	
-Fail	e.style['grid-template'] = "\"a\" / none" should not set the property value	
-Fail	e.style['grid-template'] = "none / [] \"a\"" should not set the property value	
+Pass	e.style['grid-template'] = "\"a\" [a] [a]" should not set the property value	
+Pass	e.style['grid-template'] = "[a] \"a\" [a] [a]" should not set the property value	
+Pass	e.style['grid-template'] = "\"a\" \"a\" [a] [a]" should not set the property value	
+Pass	e.style['grid-template'] = "\"a\" [a] [a] / none" should not set the property value	
+Pass	e.style['grid-template'] = "\"a\" \"a\" [a] [a] / none" should not set the property value	
+Pass	e.style['grid-template'] = "none / \"a\"" should not set the property value	
+Pass	e.style['grid-template'] = "\"a\" / none" should not set the property value	
+Pass	e.style['grid-template'] = "none / [] \"a\"" should not set the property value	
 Pass	e.style['grid-template'] = "none / \"a\" []" should not set the property value	
 Pass	e.style['grid-template'] = "none / \"a\" [] 10px" should not set the property value	
 Pass	e.style['grid-template'] = "none / \"a\" [] repeat(2, 10px)" should not set the property value	

Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand-valid.txt

@@ -6,11 +6,12 @@ Rerun
 
 Found 40 tests
 
-40 Fail
+4 Pass
+36 Fail
 Details
 Result	Test Name	MessageFail	e.style['grid-template'] = "none" should set the property value	
 Fail	e.style['grid-template'] = "none / none" should set the property value	
-Fail	e.style['grid-template'] = "auto / auto" should set the property value	
+Pass	e.style['grid-template'] = "auto / auto" should set the property value	
 Fail	e.style['grid-template'] = "none / [a] 0px" should set the property value	
 Fail	e.style['grid-template'] = "none / [] 0px" should set the property value	
 Fail	e.style['grid-template'] = "[a] 10px / auto" should set the property value	
@@ -18,8 +19,8 @@ Fail	e.style['grid-template'] = "[a] 10px / none" should set the property value
 Fail	e.style['grid-template'] = "[] 10px [] / [] auto []" should set the property value	
 Fail	e.style['grid-template'] = "[a] \"a\" 10px" should set the property value	
 Fail	e.style['grid-template'] = "[a] \"a\" 10px []" should set the property value	
-Fail	e.style['grid-template'] = "\"a\" 10px" should set the property value	
-Fail	e.style['grid-template'] = "[] \"a\" 10px" should set the property value	
+Pass	e.style['grid-template'] = "\"a\" 10px" should set the property value	
+Pass	e.style['grid-template'] = "[] \"a\" 10px" should set the property value	
 Fail	e.style['grid-template'] = "[a] \"a\" 10px [a]" should set the property value	
 Fail	e.style['grid-template'] = "\"a\"" should set the property value	
 Fail	e.style['grid-template'] = "\"a\" auto" should set the property value	
@@ -35,7 +36,7 @@ Fail	e.style['grid-template'] = "\"a\" [] \"b\"" should set the property value
 Fail	e.style['grid-template'] = "\"a\" [a] [b] \"b\"" should set the property value	
 Fail	e.style['grid-template'] = "\"a\" [a] \"b\"" should set the property value	
 Fail	e.style['grid-template'] = "\"a\" / 0" should set the property value	
-Fail	e.style['grid-template'] = "\"a\" 10px / 10px" should set the property value	
+Pass	e.style['grid-template'] = "\"a\" 10px / 10px" should set the property value	
 Fail	e.style['grid-template'] = "\"a\" calc(100% - 10px) / calc(10px)" should set the property value	
 Fail	e.style['grid-template'] = "\"a\" [a] \"b\" 10px" should set the property value	
 Fail	e.style['grid-template'] = "\"a\" [a] \"b\" 10px [a]" should set the property value