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.
This commit is contained in:
Sam Atkins 2024-11-29 13:02:30 +00:00 committed by Andreas Kling
commit e4d55a6037
Notes: github-actions[bot] 2024-11-30 10:03:02 +00:00
13 changed files with 127 additions and 121 deletions

View file

@ -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'