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

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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