beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-21 23:20:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Tests/LibWeb: Import WPT tests for CSS grid properties parsing

Browse source 
Increase test coverage for our grid implementation.
This commit is contained in:
Aliaksandr Kalenik 2024-11-03 21:38:07 +01:00 committed by Alexander Kalenik
parent 0db171c36e
commit d13011bfbc
Notes: github-actions[bot] 2024-11-03 21:03:18 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/d13011bfbcc
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2145
99 changed files with 5440 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-area-computed.txt Normal file
View file

@ -0,0 +1,41 @@
Summary
Harness status: OK
Rerun
Found 30 tests
6 Pass
24 Fail
Details
Result Test Name MessageFail Property grid-area value 'auto / auto / auto / auto'
Fail 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'
Fail Property grid-column-start value '-_π'
Pass Property grid-row-end value '_9'
Fail Property grid-area value '1 / 90 -a- / auto / auto'
Fail Property grid-row value '2 az / auto'
Fail Property grid-column value '9 / -19 zA'
Pass Property grid-row-start value '-19'
Fail Property grid-row-start value '9 -Z_'
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'
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'
Pass Property grid-column-end value 'span 2'
Fail Property grid-row-start value 'span i'
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'
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'

36
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-area-invalid.txt Normal file
View file

@ -0,0 +1,36 @@
Summary
Harness status: OK
Rerun
Found 25 tests
21 Pass
4 Fail
Details
Result Test Name MessagePass e.style['grid-area'] = "'string'" should not set the property value
Pass e.style['grid-row'] = "1.0" should not set the property value
Pass e.style['grid-column'] = "1 2" should not set the property value
Pass e.style['grid-row-start'] = "+-3" should not set the property value
Pass e.style['grid-column-start'] = "0" should not set the property value
Fail e.style['grid-row-end'] = "span" should not set the property value
Fail e.style['grid-column-end'] = "sPaN" should not set the property value
Pass e.style['grid-column-end'] = "\"1st\"" should not set the property value
Pass e.style['grid-column-end'] = "1st" should not set the property value
Pass e.style['grid-column-start'] = "auto 1" should not set the property value
Pass e.style['grid-row-start'] = "1 auto" should not set the property value
Pass e.style['grid-area'] = "auto / initial" should not set the property value
Pass e.style['grid-row'] = "auto / inherit" should not set the property value
Pass e.style['grid-column'] = "auto / unset" should not set the property value
Pass e.style['grid-area'] = "auto / auto / auto / auto / auto" should not set the property value
Fail e.style['grid-row'] = "1 / 2 / 3" should not set the property value
Fail e.style['grid-column'] = "a / b / c" should not set the property value
Pass e.style['grid-row-end'] = "span 1 / span 2" should not set the property value
Pass e.style['grid-area'] = "auto 2 auto 4" should not set the property value
Pass e.style['grid-row'] = "33 -A0 auto" should not set the property value
Pass e.style['grid-row'] = "auto i 2 j span 3 k" should not set the property value
Pass e.style['grid-row-end'] = "1 auto" should not set the property value
Pass e.style['grid-row-end'] = "span 1 auto" should not set the property value
Pass e.style['grid-row-end'] = "span auto 1" should not set the property value
Pass e.style['grid-row-end'] = "1 auto span" should not set the property value

64
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-area-shorthand.txt Normal file
View file

@ -0,0 +1,64 @@
Summary
Harness status: OK
Rerun
Found 53 tests
42 Pass
11 Fail
Details
Result Test Name MessagePass e.style['grid-area'] = "auto" should set grid-column-end
Pass e.style['grid-area'] = "auto" should set grid-column-start
Pass e.style['grid-area'] = "auto" should set grid-row-end
Pass e.style['grid-area'] = "auto" should set grid-row-start
Pass e.style['grid-area'] = "auto" should not set unrelated longhands
Pass e.style['grid-area'] = "--a" should set grid-column-end
Pass e.style['grid-area'] = "--a" should set grid-column-start
Pass e.style['grid-area'] = "--a" should set grid-row-end
Pass e.style['grid-area'] = "--a" should set grid-row-start
Pass e.style['grid-area'] = "--a" should not set unrelated longhands
Pass e.style['grid-area'] = "a / b" should set grid-column-end
Pass e.style['grid-area'] = "a / b" should set grid-column-start
Fail e.style['grid-area'] = "a / b" should set grid-row-end
Pass e.style['grid-area'] = "a / b" should set grid-row-start
Pass e.style['grid-area'] = "a / b" should not set unrelated longhands
Fail e.style['grid-area'] = "a / b / c" should set grid-column-end
Pass e.style['grid-area'] = "a / b / c" should set grid-column-start
Pass e.style['grid-area'] = "a / b / c" should set grid-row-end
Pass e.style['grid-area'] = "a / b / c" should set grid-row-start
Pass e.style['grid-area'] = "a / b / c" should not set unrelated longhands
Pass e.style['grid-area'] = "a / b / c / d" should set grid-column-end
Pass e.style['grid-area'] = "a / b / c / d" should set grid-column-start
Pass e.style['grid-area'] = "a / b / c / d" should set grid-row-end
Pass e.style['grid-area'] = "a / b / c / d" should set grid-row-start
Pass e.style['grid-area'] = "a / b / c / d" should not set unrelated longhands
Fail e.style['grid-area'] = "+90 -a- / 2 i span" should set grid-column-end
Fail e.style['grid-area'] = "+90 -a- / 2 i span" should set grid-column-start
Fail e.style['grid-area'] = "+90 -a- / 2 i span" should set grid-row-end
Fail e.style['grid-area'] = "+90 -a- / 2 i span" should set grid-row-start
Fail e.style['grid-area'] = "+90 -a- / 2 i span" should not set unrelated longhands
Pass e.style['grid-area'] = "1 / 2 / 3 / 4" should set grid-column-end
Pass e.style['grid-area'] = "1 / 2 / 3 / 4" should set grid-column-start
Pass e.style['grid-area'] = "1 / 2 / 3 / 4" should set grid-row-end
Pass e.style['grid-area'] = "1 / 2 / 3 / 4" should set grid-row-start
Pass e.style['grid-area'] = "1 / 2 / 3 / 4" should not set unrelated longhands
Pass e.style['grid-row'] = "auto" should set grid-row-end
Pass e.style['grid-row'] = "auto" should set grid-row-start
Pass e.style['grid-row'] = "auto" should not set unrelated longhands
Pass e.style['grid-row'] = "one / 2" should set grid-row-end
Pass e.style['grid-row'] = "one / 2" should set grid-row-start
Pass e.style['grid-row'] = "one / 2" should not set unrelated longhands
Fail e.style['grid-row'] = "1 two / four 3" should set grid-row-end
Fail e.style['grid-row'] = "1 two / four 3" should set grid-row-start
Pass e.style['grid-row'] = "1 two / four 3" should not set unrelated longhands
Pass e.style['grid-column'] = "5 span" should set grid-column-end
Pass e.style['grid-column'] = "5 span" should set grid-column-start
Pass e.style['grid-column'] = "5 span" should not set unrelated longhands
Pass e.style['grid-column'] = "1 / two" should set grid-column-end
Pass e.style['grid-column'] = "1 / two" should set grid-column-start
Pass e.style['grid-column'] = "1 / two" should not set unrelated longhands
Fail e.style['grid-column'] = "span 1 two / four 3 span" should set grid-column-end
Fail e.style['grid-column'] = "span 1 two / four 3 span" should set grid-column-start
Pass e.style['grid-column'] = "span 1 two / four 3 span" should not set unrelated longhands

68
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-area-valid.txt Normal file
View file

@ -0,0 +1,68 @@
Summary
Harness status: OK
Rerun
Found 57 tests
6 Pass
51 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-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
Fail e.style['grid-row'] = "-zπ/-zπ" should set the property value
Fail e.style['grid-row'] = "i / i" should set the property value
Pass e.style['grid-row-start'] = "AZ" should set the property value
Fail e.style['grid-column-start'] = "-_π" should set the property value
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
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
Fail e.style['grid-row-start'] = "9 -Z_" should set the property value
Pass e.style['grid-column-start'] = "+90" should set the property value
Fail e.style['grid-column-start'] = "Z -44" should set the property value
Fail e.style['grid-row-end'] = "1 -πA" should set the property value
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
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
Fail e.style['grid-row-end'] = "2 i span" should set the property value
Pass e.style['grid-column-end'] = "2 SpAn" should set the property value
Fail e.style['grid-area'] = "auto / i" should set the property value
Fail e.style['grid-area'] = "auto / i / auto / i" should set the property value
Fail e.style['grid-area'] = "auto / i / auto / 2 i" should set the property value
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
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
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
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
Fail e.style['grid-column'] = "\\31st / \\31 st" should set the property value

36
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-columns-computed.txt Normal file
View file

@ -0,0 +1,36 @@
Summary
Harness status: OK
Rerun
Found 25 tests
18 Pass
7 Fail
Details
Result Test Name MessagePass Property grid-auto-columns value '1px'
Fail Property grid-auto-columns value 'calc(10px + 0.5em)'
Fail Property grid-auto-columns value 'calc(10px - 0.5em)'
Pass Property grid-auto-columns value '4%'
Pass Property grid-auto-columns value '5fr'
Pass Property grid-auto-columns value 'min-content'
Pass Property grid-auto-columns value 'max-content'
Pass Property grid-auto-columns value 'auto'
Pass Property grid-auto-columns value 'minmax(1px, 5fr)'
Fail Property grid-auto-columns value 'minmax(calc(10px + 0.5em), max-content)'
Fail Property grid-auto-columns value 'minmax(calc(10px - 0.5em), max-content)'
Pass Property grid-auto-columns value 'minmax(4%, auto)'
Fail Property grid-auto-columns value 'minmax(min-content, calc(10px + 0.5em))'
Pass Property grid-auto-columns value 'minmax(auto, 4%)'
Pass Property grid-auto-columns value 'fit-content(1px)'
Fail Property grid-auto-columns value 'fit-content(calc(10px + 0.5em))'
Fail Property grid-auto-columns value 'fit-content(calc(10px - 0.5em))'
Pass Property grid-auto-columns value 'fit-content(4%)'
Pass Property grid-auto-columns value '0px'
Pass Property grid-auto-columns value '0%'
Pass Property grid-auto-columns value '0fr'
Pass Property grid-auto-columns value 'minmax(auto, 0%)'
Pass Property grid-auto-columns value 'fit-content(0px)'
Pass Property grid-auto-columns value '1px 2px 3px 0px'
Pass Property grid-auto-columns value 'fit-content(1px) minmax(2px, 3px) 4px'

26
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-columns-invalid.txt Normal file
View file

@ -0,0 +1,26 @@
Summary
Harness status: OK
Rerun
Found 15 tests
4 Pass
11 Fail
Details
Result Test Name MessageFail e.style['grid-auto-columns'] = "none" should not set the property value
Fail e.style['grid-auto-columns'] = "-1px" should not set the property value
Fail e.style['grid-auto-columns'] = "-4%" should not set the property value
Fail e.style['grid-auto-columns'] = "minmax(1px)" should not set the property value
Fail e.style['grid-auto-columns'] = "minmax(1px, 2px, 3px)" should not set the property value
Fail e.style['grid-auto-columns'] = "minmax(5fr, 1px)" should not set the property value
Fail e.style['grid-auto-columns'] = "minmax(6px, -7%)" should not set the property value
Fail e.style['grid-auto-columns'] = "minmax(8px, -9fr)" should not set the property value
Fail e.style['grid-auto-columns'] = "fit-content(-1px)" should not set the property value
Fail e.style['grid-auto-columns'] = "fit-content(1px, 2px)" should not set the property value
Fail e.style['grid-auto-columns'] = "fit-content(1px auto)" should not set the property value
Pass e.style['grid-auto-columns'] = "2em / 3em" should not set the property value
Pass e.style['grid-auto-columns'] = "auto, 10%" should not set the property value
Pass e.style['grid-auto-columns'] = "1px [a] 1px" should not set the property value
Pass e.style['grid-auto-columns'] = "[] 1px []" should not set the property value

40
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-columns-valid.txt Normal file
View file

@ -0,0 +1,40 @@
Summary
Harness status: OK
Rerun
Found 30 tests
30 Pass
Details
Result Test Name MessagePass e.style['grid-auto-columns'] = "1px" should set the property value
Pass e.style['grid-auto-columns'] = "2em" should set the property value
Pass e.style['grid-auto-columns'] = "calc(2em + 3ex)" should set the property value
Pass e.style['grid-auto-columns'] = "4%" should set the property value
Pass e.style['grid-auto-columns'] = "5fr" should set the property value
Pass e.style['grid-auto-columns'] = "min-content" should set the property value
Pass e.style['grid-auto-columns'] = "max-content" should set the property value
Pass e.style['grid-auto-columns'] = "auto" should set the property value
Pass e.style['grid-auto-columns'] = "auto /**/" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(1px, 5fr)" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(2em, min-content)" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(calc(2em + 3ex), max-content)" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(4%, auto)" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(5vmin, 1px)" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(min-content, 2em)" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(max-content, calc(2em + 3ex))" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(auto, 4%)" should set the property value
Pass e.style['grid-auto-columns'] = "fit-content(1px)" should set the property value
Pass e.style['grid-auto-columns'] = "fit-content(2em)" should set the property value
Pass e.style['grid-auto-columns'] = "fit-content(calc(2em + 3ex))" should set the property value
Pass e.style['grid-auto-columns'] = "fit-content(4%)" should set the property value
Pass e.style['grid-auto-columns'] = "0px" should set the property value
Pass e.style['grid-auto-columns'] = "0%" should set the property value
Pass e.style['grid-auto-columns'] = "0fr" should set the property value
Pass e.style['grid-auto-columns'] = "minmax(auto, 0%)" should set the property value
Pass e.style['grid-auto-columns'] = "fit-content(0px)" should set the property value
Pass e.style['grid-auto-columns'] = "auto auto" should set the property value
Pass e.style['grid-auto-columns'] = "auto 10px" should set the property value
Pass e.style['grid-auto-columns'] = "1px 2px 3px 0px" should set the property value
Pass e.style['grid-auto-columns'] = "fit-content(1px) minmax(2px, 3px) 4px" should set the property value

18
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-flow-computed.txt Normal file
View file

@ -0,0 +1,18 @@
Summary
Harness status: OK
Rerun
Found 7 tests
4 Pass
3 Fail
Details
Result Test Name MessagePass Property grid-auto-flow value 'row'
Pass Property grid-auto-flow value 'column'
Fail Property grid-auto-flow value 'row dense'
Pass Property grid-auto-flow value 'column dense'
Fail Property grid-auto-flow value 'dense row'
Pass Property grid-auto-flow value 'dense column'
Fail Property grid-auto-flow value 'dense'

13
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-flow-invalid.txt Normal file
View file

@ -0,0 +1,13 @@
Summary
Harness status: OK
Rerun
Found 3 tests
3 Pass
Details
Result Test Name MessagePass e.style['grid-auto-flow'] = "auto" should not set the property value
Pass e.style['grid-auto-flow'] = "row dense column" should not set the property value
Pass e.style['grid-auto-flow'] = "dense row dense" should not set the property value

18
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-flow-valid.txt Normal file
View file

@ -0,0 +1,18 @@
Summary
Harness status: OK
Rerun
Found 7 tests
4 Pass
3 Fail
Details
Result Test Name MessagePass e.style['grid-auto-flow'] = "row" should set the property value
Pass e.style['grid-auto-flow'] = "column" should set the property value
Fail e.style['grid-auto-flow'] = "row dense" should set the property value
Fail e.style['grid-auto-flow'] = "dense row" should set the property value
Fail e.style['grid-auto-flow'] = "dense" should set the property value
Pass e.style['grid-auto-flow'] = "column dense" should set the property value
Pass e.style['grid-auto-flow'] = "dense column" should set the property value

36
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-rows-computed.txt Normal file
View file

@ -0,0 +1,36 @@
Summary
Harness status: OK
Rerun
Found 25 tests
18 Pass
7 Fail
Details
Result Test Name MessagePass Property grid-auto-rows value '1px'
Fail Property grid-auto-rows value 'calc(10px + 0.5em)'
Fail Property grid-auto-rows value 'calc(10px - 0.5em)'
Pass Property grid-auto-rows value '4%'
Pass Property grid-auto-rows value '5fr'
Pass Property grid-auto-rows value 'min-content'
Pass Property grid-auto-rows value 'max-content'
Pass Property grid-auto-rows value 'auto'
Pass Property grid-auto-rows value 'minmax(1px, 5fr)'
Fail Property grid-auto-rows value 'minmax(calc(10px + 0.5em), max-content)'
Fail Property grid-auto-rows value 'minmax(calc(10px - 0.5em), max-content)'
Pass Property grid-auto-rows value 'minmax(4%, auto)'
Fail Property grid-auto-rows value 'minmax(min-content, calc(10px + 0.5em))'
Pass Property grid-auto-rows value 'minmax(auto, 4%)'
Pass Property grid-auto-rows value 'fit-content(1px)'
Fail Property grid-auto-rows value 'fit-content(calc(10px + 0.5em))'
Fail Property grid-auto-rows value 'fit-content(calc(10px - 0.5em))'
Pass Property grid-auto-rows value 'fit-content(4%)'
Pass Property grid-auto-rows value '0px'
Pass Property grid-auto-rows value '0%'
Pass Property grid-auto-rows value '0fr'
Pass Property grid-auto-rows value 'minmax(auto, 0%)'
Pass Property grid-auto-rows value 'fit-content(0px)'
Pass Property grid-auto-rows value '1px 2px 3px 0px'
Pass Property grid-auto-rows value 'fit-content(1px) minmax(2px, 3px) 4px'

25
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-rows-invalid.txt Normal file
View file

@ -0,0 +1,25 @@
Summary
Harness status: OK
Rerun
Found 14 tests
4 Pass
10 Fail
Details
Result Test Name MessageFail e.style['grid-auto-rows'] = "none" should not set the property value
Fail e.style['grid-auto-rows'] = "-1px" should not set the property value
Fail e.style['grid-auto-rows'] = "-4%" should not set the property value
Fail e.style['grid-auto-rows'] = "minmax(1px)" should not set the property value
Fail e.style['grid-auto-rows'] = "minmax(1px, 2px, 3px)" should not set the property value
Fail e.style['grid-auto-rows'] = "minmax(5fr, 1px)" should not set the property value
Fail e.style['grid-auto-rows'] = "minmax(6px, -7%)" should not set the property value
Fail e.style['grid-auto-rows'] = "fit-content(-1px)" should not set the property value
Fail e.style['grid-auto-rows'] = "fit-content(1px, 2px)" should not set the property value
Fail e.style['grid-auto-rows'] = "fit-content(1px auto)" should not set the property value
Pass e.style['grid-auto-rows'] = "2em / 3em" should not set the property value
Pass e.style['grid-auto-rows'] = "auto, 10%" should not set the property value
Pass e.style['grid-auto-rows'] = "1px [a] 1px" should not set the property value
Pass e.style['grid-auto-rows'] = "[] 1px []" should not set the property value

40
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-auto-rows-valid.txt Normal file
View file

@ -0,0 +1,40 @@
Summary
Harness status: OK
Rerun
Found 30 tests
30 Pass
Details
Result Test Name MessagePass e.style['grid-auto-rows'] = "1px" should set the property value
Pass e.style['grid-auto-rows'] = "2em" should set the property value
Pass e.style['grid-auto-rows'] = "calc(2em + 3ex)" should set the property value
Pass e.style['grid-auto-rows'] = "4%" should set the property value
Pass e.style['grid-auto-rows'] = "5fr" should set the property value
Pass e.style['grid-auto-rows'] = "min-content" should set the property value
Pass e.style['grid-auto-rows'] = "max-content" should set the property value
Pass e.style['grid-auto-rows'] = "auto" should set the property value
Pass e.style['grid-auto-rows'] = "auto /**/" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(1px, 5fr)" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(2em, min-content)" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(calc(2em + 3ex), max-content)" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(4%, auto)" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(5vmin, 1px)" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(min-content, 2em)" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(max-content, calc(2em + 3ex))" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(auto, 4%)" should set the property value
Pass e.style['grid-auto-rows'] = "fit-content(1px)" should set the property value
Pass e.style['grid-auto-rows'] = "fit-content(2em)" should set the property value
Pass e.style['grid-auto-rows'] = "fit-content(calc(2em + 3ex))" should set the property value
Pass e.style['grid-auto-rows'] = "fit-content(4%)" should set the property value
Pass e.style['grid-auto-rows'] = "0px" should set the property value
Pass e.style['grid-auto-rows'] = "0%" should set the property value
Pass e.style['grid-auto-rows'] = "0fr" should set the property value
Pass e.style['grid-auto-rows'] = "minmax(auto, 0%)" should set the property value
Pass e.style['grid-auto-rows'] = "fit-content(0px)" should set the property value
Pass e.style['grid-auto-rows'] = "auto auto" should set the property value
Pass e.style['grid-auto-rows'] = "auto 10px" should set the property value
Pass e.style['grid-auto-rows'] = "1px 2px 3px 0px" should set the property value
Pass e.style['grid-auto-rows'] = "fit-content(1px) minmax(2px, 3px) 4px" should set the property value

42
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-column-invalid.txt Normal file
View file

@ -0,0 +1,42 @@
Summary
Harness status: OK
Rerun
Found 31 tests
1 Pass
30 Fail
Details
Result Test Name MessagePass e.style['grid-column'] = "4 5" should not set the property value
Fail e.style['grid-column'] = "4 /" should not set the property value
Fail e.style['grid-column'] = "5 5" should not set the property value
Fail e.style['grid-column'] = "5 / /" should not set the property value
Fail e.style['grid-column'] = "0 / 5" should not set the property value
Fail e.style['grid-column'] = "6 / 0" should not set the property value
Fail e.style['grid-column'] = "0" should not set the property value
Fail e.style['grid-column'] = "span" should not set the property value
Fail e.style['grid-column'] = "span / span" should not set the property value
Fail e.style['grid-column'] = "span span / span span" should not set the property value
Fail e.style['grid-column'] = "5 5 / span 2" should not set the property value
Fail e.style['grid-column'] = "5 first last / span 2" should not set the property value
Fail e.style['grid-column'] = "5 / first last 2" should not set the property value
Fail e.style['grid-column'] = "first last / span 2" should not set the property value
Fail e.style['grid-column'] = "5 / first last" should not set the property value
Fail e.style['grid-column'] = "5 5 span / 2" should not set the property value
Fail e.style['grid-column'] = "span 3 5 / 1" should not set the property value
Fail e.style['grid-column'] = "span last first / 1" should not set the property value
Fail e.style['grid-column'] = "2 / span last first" should not set the property value
Fail e.style['grid-column'] = "span 1 last first / 1" should not set the property value
Fail e.style['grid-column'] = "2 / span last 3 first" should not set the property value
Fail e.style['grid-column'] = "1 span 2 first / 1" should not set the property value
Fail e.style['grid-column'] = "2 / 3 span 3 first" should not set the property value
Fail e.style['grid-column'] = "span -1 / -2" should not set the property value
Fail e.style['grid-column'] = "-1 / -2 span" should not set the property value
Fail e.style['grid-column'] = "0 span / 0" should not set the property value
Fail e.style['grid-column'] = "0 / span 0" should not set the property value
Fail e.style['grid-column'] = "span -3 'first' / 3 last" should not set the property value
Fail e.style['grid-column'] = "first span 1 / last" should not set the property value
Fail e.style['grid-column'] = "3 first / 2 span last" should not set the property value
Fail e.style['grid-column'] = "3 / 1 span 2" should not set the property value

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

@ -0,0 +1,26 @@
Summary
Harness status: OK
Rerun
Found 16 tests
16 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'
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'
Fail Property grid-column value '2 first / auto'
Fail Property grid-column value '2 first'
Fail Property grid-column value 'span first / auto'
Fail Property grid-column value 'span first'
Fail Property grid-column value 'span 2 first / auto'
Fail Property grid-column value 'span 2 first'

59
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-column-shorthand.txt Normal file
View file

@ -0,0 +1,59 @@
Summary
Harness status: OK
Rerun
Found 48 tests
36 Pass
12 Fail
Details
Result Test Name MessagePass e.style['grid-column'] = "auto / auto" should set grid-column-end
Pass e.style['grid-column'] = "auto / auto" should set grid-column-start
Pass e.style['grid-column'] = "auto / auto" should not set unrelated longhands
Pass e.style['grid-column'] = "auto" should set grid-column-end
Pass e.style['grid-column'] = "auto" should set grid-column-start
Pass e.style['grid-column'] = "auto" should not set unrelated longhands
Pass e.style['grid-column'] = "10 / auto" should set grid-column-end
Pass e.style['grid-column'] = "10 / auto" should set grid-column-start
Pass e.style['grid-column'] = "10 / auto" should not set unrelated longhands
Pass e.style['grid-column'] = "10" should set grid-column-end
Pass e.style['grid-column'] = "10" should set grid-column-start
Pass e.style['grid-column'] = "10" should not set unrelated longhands
Pass e.style['grid-column'] = "-10 / auto" should set grid-column-end
Pass e.style['grid-column'] = "-10 / auto" should set grid-column-start
Pass e.style['grid-column'] = "-10 / auto" should not set unrelated longhands
Pass e.style['grid-column'] = "-10" should set grid-column-end
Pass e.style['grid-column'] = "-10" should set grid-column-start
Pass e.style['grid-column'] = "-10" should not set unrelated longhands
Pass e.style['grid-column'] = "span 2 / auto" should set grid-column-end
Pass e.style['grid-column'] = "span 2 / auto" should set grid-column-start
Pass e.style['grid-column'] = "span 2 / auto" should not set unrelated longhands
Pass e.style['grid-column'] = "span 2" should set grid-column-end
Pass e.style['grid-column'] = "span 2" should set grid-column-start
Pass e.style['grid-column'] = "span 2" should not set unrelated longhands
Pass e.style['grid-column'] = "3 last / auto" should set grid-column-end
Fail e.style['grid-column'] = "3 last / auto" should set grid-column-start
Pass e.style['grid-column'] = "3 last / auto" should not set unrelated longhands
Fail e.style['grid-column'] = "3 last" should set grid-column-end
Fail e.style['grid-column'] = "3 last" should set grid-column-start
Pass e.style['grid-column'] = "3 last" should not set unrelated longhands
Fail e.style['grid-column'] = "span first / auto" should set grid-column-end
Fail e.style['grid-column'] = "span first / auto" should set grid-column-start
Fail e.style['grid-column'] = "span first / auto" should not set unrelated longhands
Fail e.style['grid-column'] = "span first" should set grid-column-end
Fail e.style['grid-column'] = "span first" should set grid-column-start
Fail e.style['grid-column'] = "span first" should not set unrelated longhands
Pass e.style['grid-column'] = "span 2 first / auto" should set grid-column-end
Fail e.style['grid-column'] = "span 2 first / auto" should set grid-column-start
Pass e.style['grid-column'] = "span 2 first / auto" should not set unrelated longhands
Fail e.style['grid-column'] = "span 2 first" should set grid-column-end
Fail e.style['grid-column'] = "span 2 first" should set grid-column-start
Pass e.style['grid-column'] = "span 2 first" should not set unrelated longhands
Pass e.style['grid-column'] = "last / last" should set grid-column-end
Pass e.style['grid-column'] = "last / last" should set grid-column-start
Pass e.style['grid-column'] = "last / last" should not set unrelated longhands
Pass e.style['grid-column'] = "last" should set grid-column-end
Pass e.style['grid-column'] = "last" should set grid-column-start
Pass e.style['grid-column'] = "last" should not set unrelated longhands

51
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt Normal file
View file

@ -0,0 +1,51 @@
Summary
Harness status: OK
Rerun
Found 40 tests
8 Pass
32 Fail
Details
Result Test Name MessagePass Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFixedElement' : grid-template-columns = '7px 11px', grid-template-rows = '17px 2px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentElement' : grid-template-columns = '400px 800px', grid-template-rows = '150px 450px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentWithoutSize' : grid-template-columns = '3.5px 7px', grid-template-rows = '4px 12px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoElement' : grid-template-columns = '0px 17px', grid-template-rows = '0px 3px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithEMElement' : grid-template-columns = '100px 120px', grid-template-rows = '150px 170px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithThreeItems' : grid-template-columns = '15px 0px 100px', grid-template-rows = '120px 18px 0px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFitContentAndFitAvailable' : grid-template-columns = 'none', grid-template-rows = 'none'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContent' : grid-template-columns = '0px 0px', grid-template-rows = '0px 0px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContentWithChildrenElement' : grid-template-columns = '7px 17px', grid-template-rows = '16px 3px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndFixed' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndMinMaxContent' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionFraction' : grid-template-columns = '320px 480px', grid-template-rows = '225px 375px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionMinMax' : grid-template-columns = '45px 755px', grid-template-rows = '586px 14px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcCalc' : grid-template-columns = '200px 100px', grid-template-rows = '150px 75px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndFixed' : grid-template-columns = '400px 80px', grid-template-rows = '88px 150px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndMinMax' : grid-template-columns = '190px 80px', grid-template-rows = '150px 53px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcInsideMinMax' : grid-template-columns = '400px 120px', grid-template-rows = '150px 175px'
Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoInsideMinMax' : grid-template-columns = '0px 30px', grid-template-rows = '132px 60px'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '18px 22px', element.style.gridTemplateColumns = '18px 22px', grid-template-rows = '66px 70px', element.style.gridTemplateRows = '66px 70px'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '440px 640px', element.style.gridTemplateColumns = '55% 80%', grid-template-rows = '240px 378px', element.style.gridTemplateRows = '40% 63%'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '0px 0px', element.style.gridTemplateColumns = 'auto auto', grid-template-rows = '0px 0px', element.style.gridTemplateRows = 'auto auto'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '0px 160px 22px', element.style.gridTemplateColumns = 'auto 16em 22px', grid-template-rows = '336px 100px 0px', element.style.gridTemplateRows = '56% 10em auto'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '160px 20px', element.style.gridTemplateColumns = '16em minmax(16px, 20px)', grid-template-rows = '90px 0px', element.style.gridTemplateRows = 'minmax(10%, 15%) auto'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '160px 640px', element.style.gridTemplateColumns = '16em 2fr', grid-template-rows = '600px 0px', element.style.gridTemplateRows = '14fr auto'
Pass Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '25px 20px', element.style.gridTemplateColumns = 'calc(25px) calc(2em)', grid-template-rows = '0px 60px', element.style.gridTemplateRows = 'auto calc(10%)'
Fail Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '345px 92px', element.style.gridTemplateColumns = 'calc(25px + 40%) minmax(min-content, calc(10% + 12px))', grid-template-rows = '100px 0px', element.style.gridTemplateRows = 'minmax(calc(75% - 350px), max-content) auto'
Fail Test setting wrong/invalid values through CSS
Fail Test setting bad JS values: grid-template-columns = 'none auto', grid-template-rows = 'none auto'
Fail Test setting bad JS values: grid-template-columns = 'none 16em', grid-template-rows = 'none 56%'
Fail Test setting bad JS values: grid-template-columns = 'none none', grid-template-rows = 'none none'
Fail Test setting bad JS values: grid-template-columns = 'auto none', grid-template-rows = 'auto none'
Fail Test setting bad JS values: grid-template-columns = 'auto none 16em', grid-template-rows = 'auto 18em none'
Fail Test setting bad JS values: grid-template-columns = '-webkit-fit-content -webkit-fit-content', grid-template-rows = '-webkit-fit-available -webkit-fit-available'
Fail Test setting bad JS values: grid-template-columns = '-10px minmax(16px, 32px)', grid-template-rows = 'minmax(10%, 15%) -10vw'
Fail Test setting bad JS values: grid-template-columns = '10px minmax(16px, -1vw)', grid-template-rows = 'minmax(-1%, 15%) 10vw'
Fail Test setting bad JS values: grid-template-columns = '10px calc(16px 30px)', grid-template-rows = 'calc(25px + auto) 2em'
Fail Test setting bad JS values: grid-template-columns = 'minmax(min-content, calc() 250px', grid-template-rows = 'calc(2em('
Fail Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
Fail Test the default value
Fail Test setting grid-template-columns and grid-template-rows to 'initial' through JS

52
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.txt Normal file
View file

@ -0,0 +1,52 @@
Summary
Harness status: OK
Rerun
Found 42 tests
42 Fail
Details
Result Test Name MessageFail Element 'gridMinContentFixedAndAuto' grid-template-columns value computes to '15px 75px'
Fail Element 'gridAutoAndAuto' grid-template-columns value computes to '45px 45px'
Fail Element 'gridMinContentAndMinContentFixed' grid-template-columns value computes to '20px 30px'
Fail Element 'gridMaxContentAndMinContent' grid-template-columns value computes to '70px 20px'
Fail Element 'gridFixedMinContentAndMaxContent' grid-template-columns value computes to '10px 80px'
Fail Element 'gridFixedMaxContentAndMinContent' grid-template-columns value computes to '60px 30px'
Fail Element 'gridMinContentAndMaxContentFixed' grid-template-columns value computes to '20px 70px'
Fail Element 'gridMaxContentFixedAndAuto' grid-template-columns value computes to '65px 25px'
Fail Element 'gridAutoMinContent' grid-template-columns value computes to '70px 20px'
Fail Element 'gridAutoMaxContent' grid-template-columns value computes to '20px 70px'
Fail Element 'gridMaxContentAndMinContentFixed' grid-template-columns value computes to '70px 20px'
Fail Element 'gridMaxContentAndMaxContentFixed' grid-template-columns value computes to '55px 35px'
Fail Element 'gridMinContentFixedAndAutoUnsortedConstrained' grid-template-columns value computes to '0px 40px'
Fail Element 'gridAutoAndAutoUnsortedConstrained' grid-template-columns value computes to '10px 30px'
Fail Element 'gridMinContentAndMinContentFixedUnsortedConstrained' grid-template-columns value computes to '0px 40px'
Fail Element 'gridMaxContentAndMinContentUnsortedConstrained' grid-template-columns value computes to '0px 70px'
Fail Element 'gridFixedMinContentAndMaxContentUnsortedConstrained' grid-template-columns value computes to '10px 70px'
Fail Element 'gridFixedMaxContentAndMinContentUnsortedConstrained' grid-template-columns value computes to '10px 40px'
Fail Element 'gridMinContentAndMaxContentFixedUnsortedConstrained' grid-template-columns value computes to '0px 90px'
Fail Element 'gridMaxContentFixedAndAutoUnsortedConstrained' grid-template-columns value computes to '10px 40px'
Fail Element 'gridAutoMinContentUnsortedConstrained' grid-template-columns value computes to '0px 60px'
Fail Element 'gridAutoMaxContentUnsortedConstrained' grid-template-columns value computes to '0px 90px'
Fail Element 'gridMaxContentAndMinContentFixedUnsortedConstrained' grid-template-columns value computes to '50px 40px'
Fail Element 'gridMaxContentAndMaxContentFixedUnsortedConstrained' grid-template-columns value computes to '40px 70px'
Fail Element 'gridMinContentFixedAndAutoUnsorted' grid-template-columns value computes to '15px 90px'
Fail Element 'gridAutoAndAutoUnsorted' grid-template-columns value computes to '60px 30px'
Fail Element 'gridMinContentAndMinContentFixedUnsorted' grid-template-columns value computes to '0px 40px'
Fail Element 'gridMaxContentAndMinContentUnsorted' grid-template-columns value computes to '0px 70px'
Fail Element 'gridFixedMinContentAndMaxContentUnsorted' grid-template-columns value computes to '10px 70px'
Fail Element 'gridFixedMaxContentAndMinContentUnsorted' grid-template-columns value computes to '50px 40px'
Fail Element 'gridMinContentAndMaxContentFixedUnsorted' grid-template-columns value computes to '0px 90px'
Fail Element 'gridMaxContentFixedAndAutoUnsorted' grid-template-columns value computes to '15px 70px'
Fail Element 'gridAutoMinContentUnsorted' grid-template-columns value computes to '50px 60px'
Fail Element 'gridAutoMaxContentUnsorted' grid-template-columns value computes to '0px 90px'
Fail Element 'gridMaxContentAndMinContentFixedUnsorted' grid-template-columns value computes to '50px 40px'
Fail Element 'gridMaxContentAndMaxContentFixedUnsorted' grid-template-columns value computes to '40px 70px'
Fail Element 'gridMinContentFixedAndAutoAboveLimits' grid-template-columns value computes to '15px 95px'
Fail Element 'gridMaxContentFixedAndAutoAboveLimits' grid-template-columns value computes to '15px 135px'
Fail Element 'gridMinContentFixedAndFixedFixedAndAuto' grid-template-columns value computes to '20px 20px 60px'
Fail Element 'gridAutoAndFixedFixedAndMaxContentFixed' grid-template-columns value computes to '110px 20px 20px'
Fail Element 'gridMaxContentAndMaxContentFixedAndMaxContent' grid-template-columns value computes to '70px 20px 50px'
Fail Element 'gridAutoAndMinContentFixedAndMinContent' grid-template-columns value computes to '55px 30px 65px'

42
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-row-invalid.txt Normal file
View file

@ -0,0 +1,42 @@
Summary
Harness status: OK
Rerun
Found 31 tests
1 Pass
30 Fail
Details
Result Test Name MessagePass e.style['grid-row'] = "5 8" should not set the property value
Fail e.style['grid-row'] = "5 /" should not set the property value
Fail e.style['grid-row'] = "8 auto" should not set the property value
Fail e.style['grid-row'] = "8 / /" should not set the property value
Fail e.style['grid-row'] = "0 / 6" should not set the property value
Fail e.style['grid-row'] = "8 / 0" should not set the property value
Fail e.style['grid-row'] = "0" should not set the property value
Fail e.style['grid-row'] = "span" should not set the property value
Fail e.style['grid-row'] = "span / span" should not set the property value
Fail e.style['grid-row'] = "span span / span span" should not set the property value
Fail e.style['grid-row'] = "4 4 / 3 span" should not set the property value
Fail e.style['grid-row'] = "first 4 last / 3 span" should not set the property value
Fail e.style['grid-row'] = "4 / first 3 last" should not set the property value
Fail e.style['grid-row'] = "first last / 3 span" should not set the property value
Fail e.style['grid-row'] = "4 / first last" should not set the property value
Fail e.style['grid-row'] = "span 4 4 / 3" should not set the property value
Fail e.style['grid-row'] = "5 span 4 / 3" should not set the property value
Fail e.style['grid-row'] = "span first last / 3" should not set the property value
Fail e.style['grid-row'] = "3 / span first last" should not set the property value
Fail e.style['grid-row'] = "span first last 7 / 3" should not set the property value
Fail e.style['grid-row'] = "3 / span first 5 last" should not set the property value
Fail e.style['grid-row'] = "1 span last 7 / 3" should not set the property value
Fail e.style['grid-row'] = "3 / 5 span first 5" should not set the property value
Fail e.style['grid-row'] = "-3 span / -4" should not set the property value
Fail e.style['grid-row'] = "-3 / span -4" should not set the property value
Fail e.style['grid-row'] = "span 0 / 0" should not set the property value
Fail e.style['grid-row'] = "0 / 0 span" should not set the property value
Fail e.style['grid-row'] = "last -2 span / 1 nav" should not set the property value
Fail e.style['grid-row'] = "2 span first / last" should not set the property value
Fail e.style['grid-row'] = "5 nav / last span 7" should not set the property value
Fail e.style['grid-row'] = "5 / 3 span 3" should not set the property value

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

@ -0,0 +1,25 @@
Summary
Harness status: OK
Rerun
Found 15 tests
15 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'
Fail Property grid-row value '3 last / auto'
Fail Property grid-row value '3 last'
Fail Property grid-row value 'span first / auto'
Fail Property grid-row value 'span first'
Fail Property grid-row value 'span 2 first / auto'
Fail Property grid-row value 'span 2 first'
Fail Property grid-row value 'last / last'

59
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-row-shorthand.txt Normal file
View file

@ -0,0 +1,59 @@
Summary
Harness status: OK
Rerun
Found 48 tests
36 Pass
12 Fail
Details
Result Test Name MessagePass e.style['grid-row'] = "auto / auto" should set grid-row-end
Pass e.style['grid-row'] = "auto / auto" should set grid-row-start
Pass e.style['grid-row'] = "auto / auto" should not set unrelated longhands
Pass e.style['grid-row'] = "auto" should set grid-row-end
Pass e.style['grid-row'] = "auto" should set grid-row-start
Pass e.style['grid-row'] = "auto" should not set unrelated longhands
Pass e.style['grid-row'] = "10 / auto" should set grid-row-end
Pass e.style['grid-row'] = "10 / auto" should set grid-row-start
Pass e.style['grid-row'] = "10 / auto" should not set unrelated longhands
Pass e.style['grid-row'] = "10" should set grid-row-end
Pass e.style['grid-row'] = "10" should set grid-row-start
Pass e.style['grid-row'] = "10" should not set unrelated longhands
Pass e.style['grid-row'] = "-10 / auto" should set grid-row-end
Pass e.style['grid-row'] = "-10 / auto" should set grid-row-start
Pass e.style['grid-row'] = "-10 / auto" should not set unrelated longhands
Pass e.style['grid-row'] = "-10" should set grid-row-end
Pass e.style['grid-row'] = "-10" should set grid-row-start
Pass e.style['grid-row'] = "-10" should not set unrelated longhands
Pass e.style['grid-row'] = "span 2 / auto" should set grid-row-end
Pass e.style['grid-row'] = "span 2 / auto" should set grid-row-start
Pass e.style['grid-row'] = "span 2 / auto" should not set unrelated longhands
Pass e.style['grid-row'] = "span 2" should set grid-row-end
Pass e.style['grid-row'] = "span 2" should set grid-row-start
Pass e.style['grid-row'] = "span 2" should not set unrelated longhands
Pass e.style['grid-row'] = "3 last / auto" should set grid-row-end
Fail e.style['grid-row'] = "3 last / auto" should set grid-row-start
Pass e.style['grid-row'] = "3 last / auto" should not set unrelated longhands
Fail e.style['grid-row'] = "3 last" should set grid-row-end
Fail e.style['grid-row'] = "3 last" should set grid-row-start
Pass e.style['grid-row'] = "3 last" should not set unrelated longhands
Fail e.style['grid-row'] = "span first / auto" should set grid-row-end
Fail e.style['grid-row'] = "span first / auto" should set grid-row-start
Fail e.style['grid-row'] = "span first / auto" should not set unrelated longhands
Fail e.style['grid-row'] = "span first" should set grid-row-end
Fail e.style['grid-row'] = "span first" should set grid-row-start
Fail e.style['grid-row'] = "span first" should not set unrelated longhands
Pass e.style['grid-row'] = "span 2 first / auto" should set grid-row-end
Fail e.style['grid-row'] = "span 2 first / auto" should set grid-row-start
Pass e.style['grid-row'] = "span 2 first / auto" should not set unrelated longhands
Fail e.style['grid-row'] = "span 2 first" should set grid-row-end
Fail e.style['grid-row'] = "span 2 first" should set grid-row-start
Pass e.style['grid-row'] = "span 2 first" should not set unrelated longhands
Pass e.style['grid-row'] = "last / last" should set grid-row-end
Pass e.style['grid-row'] = "last / last" should set grid-row-start
Pass e.style['grid-row'] = "last / last" should not set unrelated longhands
Pass e.style['grid-row'] = "last" should set grid-row-end
Pass e.style['grid-row'] = "last" should set grid-row-start
Pass e.style['grid-row'] = "last" should not set unrelated longhands

45
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-invalid.txt Normal file
View file

@ -0,0 +1,45 @@
Summary
Harness status: OK
Rerun
Found 34 tests
8 Pass
26 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
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
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
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'] = "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 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

132
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt Normal file
View file

@ -0,0 +1,132 @@
Summary
Harness status: OK
Rerun
Found 121 tests
26 Pass
95 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
Pass e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid
Fail e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid-auto-flow
Fail e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid-auto-rows
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
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
Pass cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-flow: column;' in its serialization
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: 20px should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: 20px should set grid-template
Fail cssText ('grid: auto-flow / 10px; grid-template-rows: 20px') must contain 'grid: 20px / 10px;' in its serialization
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px) should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px) should set grid-template-rows
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px) repeat(3, 30px) should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px) repeat(3, 30px) should set grid-template-rows
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(auto-fill, 20px) should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(auto-fill, 20px) should set grid-template-rows
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(auto-fit, 20px) should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: repeat(auto-fit, 20px) should set grid-template-rows
Fail e.style.cssText = grid: 10px / auto; grid-template-columns: 20px should set grid
Fail e.style.cssText = grid: 10px / auto; grid-template-columns: 20px should set grid-template
Fail cssText ('grid: 10px / auto; grid-template-columns: 20px') must contain 'grid: 10px / 20px;' in its serialization
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px) should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px) should set grid-template-columns
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px) repeat(3, 30px) should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px) repeat(3, 30px) should set grid-template-columns
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(auto-fill, 20px) should set grid
Fail e.style.cssText = grid: auto-flow / 10px; grid-template-columns: repeat(auto-fill, 20px) should set grid-template-columns
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
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
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
Fail e.style.cssText = grid: auto-flow 1px / none; grid-auto-columns: auto should set grid
Fail e.style.cssText = grid: auto-flow dense / 2px; grid-auto-rows: auto should set grid
Pass e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-columns: 3px should set grid
Pass e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-columns: 3px should set grid-auto-columns
Fail e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-columns: 3px should set grid-auto-flow
Fail e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-columns: 3px should set grid-auto-rows
Fail e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-columns: 3px should set grid-template-columns
Fail e.style.cssText = grid: auto-flow 1px / 2px; grid-auto-columns: 3px should set grid-template-rows
Pass e.style.cssText = grid: 1px / auto-flow 2px; grid-auto-rows: 3px should set grid
Fail e.style.cssText = grid: 1px / auto-flow 2px; grid-auto-rows: 3px should set grid-auto-columns
Fail e.style.cssText = grid: 1px / auto-flow 2px; grid-auto-rows: 3px should set grid-auto-flow
Pass e.style.cssText = grid: 1px / auto-flow 2px; grid-auto-rows: 3px should set grid-auto-rows
Fail e.style.cssText = grid: 1px / auto-flow 2px; grid-auto-rows: 3px should set grid-template-columns
Fail e.style.cssText = grid: 1px / auto-flow 2px; grid-auto-rows: 3px should set grid-template-rows
Pass e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: 3px should set grid
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: 3px should set grid-auto-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: 3px should set grid-auto-flow
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: 3px should set grid-auto-rows
Pass e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: 3px should set grid-template-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: 3px should set grid-template-rows
Pass e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px) should set grid
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px) should set grid-auto-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px) should set grid-auto-flow
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px) should set grid-auto-rows
Pass e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px) should set grid-template-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px) should set grid-template-rows
Pass e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px) should set grid
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px) should set grid-auto-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px) should set grid-auto-flow
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px) should set grid-auto-rows
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px) should set grid-template-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px) should set grid-template-rows
Pass e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px) should set grid
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px) should set grid-auto-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px) should set grid-auto-flow
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px) should set grid-auto-rows
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px) should set grid-template-columns
Fail e.style.cssText = grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px) should set grid-template-rows
Pass e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: 3px should set grid
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: 3px should set grid-auto-columns
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: 3px should set grid-auto-flow
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: 3px should set grid-auto-rows
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: 3px should set grid-template-columns
Pass e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: 3px should set grid-template-rows
Pass e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px) should set grid
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px) should set grid-auto-columns
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px) should set grid-auto-flow
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px) should set grid-auto-rows
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px) should set grid-template-columns
Pass e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px) should set grid-template-rows
Pass e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px) should set grid
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px) should set grid-auto-columns
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px) should set grid-auto-flow
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px) should set grid-auto-rows
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px) should set grid-template-columns
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px) should set grid-template-rows
Pass e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid-auto-columns
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid-auto-flow
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid-auto-rows
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid-template-columns
Fail e.style.cssText = grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px) should set grid-template-rows
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas
Pass e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid-template-columns
Pass e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four" should set grid-template-rows
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid-template-areas
Pass e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid-template-columns
Pass e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four" should set grid-template-rows
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid-template-columns
Pass e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four" should set grid-template-rows
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid-template-areas
Fail e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid-template-columns
Pass e.style.cssText = grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four" should set grid-template-rows

59
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-valid.txt Normal file
View file

@ -0,0 +1,59 @@
Summary
Harness status: OK
Rerun
Found 49 tests
49 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
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
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
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
Fail e.style['grid'] = "\"a a a\"" should set the property value
Fail e.style['grid'] = "\"a\" / 10px" should set the property value
Fail e.style['grid'] = "\"a\" / 20%" should set the property value
Fail e.style['grid'] = "\"a\" / 5fr" should set the property value
Fail e.style['grid'] = "[a] \"a\"" should set the property value
Fail e.style['grid'] = "[a] \"a\" [a]" should set the property value
Fail e.style['grid'] = "[] \"a\"" should set the property value
Fail e.style['grid'] = "\"a\" [] [] \"b\"" should set the property value
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
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
Fail e.style['grid'] = "\"a\" [a] [] \"b\" 10px" should set the property value
Fail e.style['grid'] = "\"a\" 10px [a] \"b\" [a]" should set the property value
Fail e.style['grid'] = "\"a\" [a] \"b\" [a]" should set the property value
Fail e.style['grid'] = "[a] \"a\" [a] \"b\" [a]" should set the property value
Fail e.style['grid'] = "\"a\" \"a\" [a] \"b\" [a]" should set the property value
Fail e.style['grid'] = "\"a\" [a] \"b\" [a] / 0" should set the property value
Fail e.style['grid'] = "\"a\" \"a\" [a] [a] \"b\" / auto" should set the property value
Fail e.style['grid'] = "100px / auto-flow dense 100px" should set the property value
Fail e.style['grid'] = "auto-flow dense 1fr / 100px" should set the property value
Fail e.style['grid'] = "100px / dense auto-flow 100px" should set the property value
Fail e.style['grid'] = "dense auto-flow 1fr / 100px" should set the property value
Fail e.style['grid'] = "100px / auto-flow 100px" should set the property value
Fail e.style['grid'] = "auto-flow 1fr / 100px" should set the property value
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

74
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt Normal file
View file

@ -0,0 +1,74 @@
Summary
Harness status: OK
Rerun
Found 63 tests
18 Pass
45 Fail
Details
Result Test Name MessageFail e.style['grid'] = "none" should set grid-auto-columns
Fail e.style['grid'] = "none" should set grid-auto-flow
Fail e.style['grid'] = "none" should set grid-auto-rows
Pass e.style['grid'] = "none" should set grid-template-areas
Fail e.style['grid'] = "none" should set grid-template-columns
Fail e.style['grid'] = "none" should set grid-template-rows
Pass e.style['grid'] = "none" should not set unrelated longhands
Fail e.style['grid'] = "10px / 20%" should set grid-auto-columns
Fail e.style['grid'] = "10px / 20%" should set grid-auto-flow
Fail e.style['grid'] = "10px / 20%" should set grid-auto-rows
Pass e.style['grid'] = "10px / 20%" should set grid-template-areas
Pass e.style['grid'] = "10px / 20%" should set grid-template-columns
Pass e.style['grid'] = "10px / 20%" should set grid-template-rows
Pass e.style['grid'] = "10px / 20%" should not set unrelated longhands
Fail e.style['grid'] = "none / 10px" should set grid-auto-columns
Fail e.style['grid'] = "none / 10px" should set grid-auto-flow
Fail e.style['grid'] = "none / 10px" should set grid-auto-rows
Pass e.style['grid'] = "none / 10px" should set grid-template-areas
Pass e.style['grid'] = "none / 10px" should set grid-template-columns
Fail e.style['grid'] = "none / 10px" should set grid-template-rows
Pass e.style['grid'] = "none / 10px" should not set unrelated longhands
Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-columns
Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-flow
Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-rows
Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-areas
Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-columns
Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-rows
Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should not set unrelated longhands
Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-columns
Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-flow
Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-rows
Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas
Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-columns
Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-rows
Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should not set unrelated longhands
Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-columns
Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-flow
Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-rows
Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas
Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-columns
Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-rows
Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should not set unrelated longhands
Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-columns
Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-flow
Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-rows
Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas
Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-columns
Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-rows
Pass e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should not set unrelated longhands
Fail e.style['grid'] = "10px / auto-flow dense 20px" should set grid-auto-columns
Fail e.style['grid'] = "10px / auto-flow dense 20px" should set grid-auto-flow
Fail e.style['grid'] = "10px / auto-flow dense 20px" should set grid-auto-rows
Fail e.style['grid'] = "10px / auto-flow dense 20px" should set grid-template-areas
Fail e.style['grid'] = "10px / auto-flow dense 20px" should set grid-template-columns
Fail e.style['grid'] = "10px / auto-flow dense 20px" should set grid-template-rows
Fail e.style['grid'] = "10px / auto-flow dense 20px" should not set unrelated longhands
Fail e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-auto-columns
Fail e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-auto-flow
Fail e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-auto-rows
Fail e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-template-areas
Fail e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-template-columns
Fail e.style['grid'] = "auto-flow dense 30px / 40px" should set grid-template-rows
Fail e.style['grid'] = "auto-flow dense 30px / 40px" should not set unrelated longhands

20
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-computed.txt Normal file
View file

@ -0,0 +1,20 @@
Summary
Harness status: OK
Rerun
Found 9 tests
1 Pass
8 Fail
Details
Result Test Name MessagePass Property grid-template-areas value 'none'
Fail Property grid-template-areas value '"first"'
Fail Property grid-template-areas value '"first second"'
Fail Property grid-template-areas value '"1st 2nd 3rd"'
Fail Property grid-template-areas value '"first second" "third fourth"'
Fail Property grid-template-areas value '"first second" "third ." "1st 2nd" "3rd 4th"'
Fail Property grid-template-areas value '" a b "'
Fail Property grid-template-areas value '"c d"'
Fail Property grid-template-areas value '"first ..."'

22
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-invalid.txt Normal file
View file

@ -0,0 +1,22 @@
Summary
Harness status: OK
Rerun
Found 11 tests
6 Pass
5 Fail
Details
Result Test Name MessagePass e.style['grid-template-areas'] = "auto" should not set the property value
Pass e.style['grid-template-areas'] = "none \"first\"" should not set the property value
Pass e.style['grid-template-areas'] = "\"first\" none" should not set the property value
Pass e.style['grid-template-areas'] = "\"\"" should not set the property value
Pass e.style['grid-template-areas'] = "\" \"" should not set the property value
Fail e.style['grid-template-areas'] = "\".\" \"\"" should not set the property value
Fail e.style['grid-template-areas'] = "\".\" \" \"" should not set the property value
Fail e.style['grid-template-areas'] = "\"first\" \"\"" should not set the property value
Fail e.style['grid-template-areas'] = "\"first\" \"\" \"second\"" should not set the property value
Fail e.style['grid-template-areas'] = "\"first\" \" \"" should not set the property value
Pass e.style['grid-template-areas'] = "\"\" none" should not set the property value

17
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-one-cell.txt Normal file
View file

@ -0,0 +1,17 @@
Summary
Harness status: OK
Rerun
Found 6 tests
4 Pass
2 Fail
Details
Result Test Name MessagePass "grid-template-areas: 'a';" should be valid.
Pass "grid-template-areas: '.';" should be valid.
Pass "grid-template-areas: '';" should be invalid.
Fail "grid-template-areas: '' '';" should be invalid.
Fail "grid-template-areas: '$';" should be invalid.
Pass "grid-template-areas: ' ';" should be invalid.

20
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-areas-valid.txt Normal file
View file

@ -0,0 +1,20 @@
Summary
Harness status: OK
Rerun
Found 9 tests
1 Pass
8 Fail
Details
Result Test Name MessagePass e.style['grid-template-areas'] = "none" should set the property value
Fail e.style['grid-template-areas'] = "\"first\"" should set the property value
Fail e.style['grid-template-areas'] = "\"first second\"" should set the property value
Fail e.style['grid-template-areas'] = "\"1st 2nd 3rd\"" should set the property value
Fail e.style['grid-template-areas'] = "\"first second\" \"third fourth\"" should set the property value
Fail e.style['grid-template-areas'] = "\"first second\" \"third .\" \"1st 2nd\" \"3rd 4th\"" should set the property value
Fail e.style['grid-template-areas'] = "\" a \t b \"" should set the property value
Fail e.style['grid-template-areas'] = "\"c\td\"" should set the property value
Fail e.style['grid-template-areas'] = "\"first ...\"" should set the property value

35
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed-implicit-track.txt Normal file
View file

@ -0,0 +1,35 @@
Summary
Harness status: OK
Rerun
Found 24 tests
1 Pass
23 Fail
Details
Result Test Name MessagePass Property grid-template-columns value 'none' computes to '10px'
Fail Property grid-template-columns value '1px' computes to '10px 1px'
Fail Property grid-template-columns value '1px [a]' computes to '10px 1px [a]'
Fail Property grid-template-columns value '1px [a] 2px' computes to '10px 1px [a] 2px'
Fail Property grid-template-columns value '[a] 1px' computes to '10px [a] 1px'
Fail Property grid-template-columns value '[a] 1px [b]' computes to '10px [a] 1px [b]'
Fail Property grid-template-columns value '1px repeat(1, 2px) 3px' computes to '10px 1px 2px 3px'
Fail Property grid-template-columns value '1px repeat(auto-fill, 2px) 3px' computes to '10px 1px 2px 3px'
Fail Property grid-template-columns value '1px repeat(auto-fit, 2px) 3px' computes to '10px 1px 0px 3px'
Fail Property grid-template-columns value '1px [a] repeat(1, 2px 3px) [b] 4px' computes to '10px 1px [a] 2px 3px [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' computes to '10px 1px [a] 2px 3px [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' computes to '10px 1px [a] 0px 0px [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' computes to '10px 1px [a b] 0px [c d] 3px'
Fail Property grid-template-columns value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-columns value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-columns value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]' computes to '10px [a] 1px 0px [b] 0px 4px [d]'
Fail Property grid-template-columns value '100% [a] repeat(1, [b] 200% [c]) [d] 300%' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-columns value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-columns value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%' computes to '10px 1px [a b] 0px [c d] 3px'
Fail Property grid-template-columns value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-columns value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-columns value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]' computes to '10px [a] 1px 0px [b] 0px 4px [d]'

43
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed-nogrid.txt Normal file
View file

@ -0,0 +1,43 @@
Summary
Harness status: OK
Rerun
Found 32 tests
12 Pass
20 Fail
Details
Result Test Name MessageFail Property grid-template-columns value 'none'
Pass Property grid-template-columns value '1px'
Pass Property grid-template-columns value '1px [a]'
Pass Property grid-template-columns value '1px [a] 2px'
Pass Property grid-template-columns value '[a] 1px'
Pass Property grid-template-columns value '[a] 1px [b]'
Pass Property grid-template-columns value '1px repeat(1, 2px) 3px'
Fail Property grid-template-columns value '1px repeat(auto-fill, 2px) 3px'
Fail Property grid-template-columns value '1px repeat(auto-fit, 2px) 3px'
Pass Property grid-template-columns value '1px [a] repeat(1, 2px 3px) [b] 4px'
Pass Property grid-template-columns value '1px [a] repeat(2, 2px 3px) [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px'
Pass Property grid-template-columns value '1px [a] repeat(1, [b] 2px [c]) [d] 3px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px'
Pass Property grid-template-columns value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]'
Fail Property grid-template-columns value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]'
Pass Property grid-template-columns value '[a] 1px 4px [d]'
Fail Property grid-template-columns value '[a] 1px repeat(auto-fill, 2px [b] 3px) [d] 4px'
Fail Property grid-template-columns value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]'
Pass Property grid-template-rows value '100% [a] repeat(1, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%'
Fail Property grid-template-columns value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]'
Fail Property grid-template-columns value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]'
Fail Property grid-template-columns value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]'
Fail Property grid-template-columns value 'repeat(1, 2px [a] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%'
Fail Property grid-template-columns value '[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px) [e] 300%'
Fail Property grid-template-columns value 'repeat(1, [a] 2px [b] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%'
Fail Property grid-template-columns value '[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px [e]) [f] 300%'
Fail Property grid-template-columns value '[a] 1px [b c] repeat(auto-fill, [d] 200% [e f]) [g] 2px repeat(1, 3px [d e] 4px [e f]) [g] 300% [h]'

41
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed-withcontent.txt Normal file
View file

@ -0,0 +1,41 @@
Summary
Harness status: OK
Rerun
Found 30 tests
19 Pass
11 Fail
Details
Result Test Name MessagePass Property grid-template-columns value 'none'
Pass Property grid-template-columns value '20%'
Fail Property grid-template-columns value 'calc(-0.5em + 10px)'
Pass Property grid-template-columns value 'calc(0.5em + 10px)'
Pass Property grid-template-columns value 'calc(30% + 40px)'
Pass Property grid-template-columns value '5fr'
Pass Property grid-template-columns value 'min-content'
Pass Property grid-template-columns value 'max-content'
Pass Property grid-template-columns value 'auto'
Pass Property grid-template-columns value 'minmax(10px, auto)'
Pass Property grid-template-columns value 'minmax(20%, max-content)'
Pass Property grid-template-columns value 'minmax(min-content, calc(-0.5em + 10px))'
Pass Property grid-template-columns value 'minmax(auto, 0)'
Pass Property grid-template-columns value 'fit-content(70px)'
Pass Property grid-template-columns value 'fit-content(20%)'
Fail Property grid-template-columns value 'fit-content(calc(-0.5em + 10px))'
Pass Property grid-template-columns value 'repeat(1, 10px)'
Fail Property grid-template-columns value 'repeat(1, [one two] 20%)'
Pass Property grid-template-columns value 'repeat(2, minmax(10px, auto))'
Fail Property grid-template-columns value 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])'
Pass Property grid-template-columns value 'min-content repeat(5, minmax(10px, auto))'
Pass Property grid-template-columns value '[] 150px [] 1fr []'
Pass Property grid-template-columns value 'repeat(auto-fill, 200px)'
Fail Property grid-template-columns value 'repeat(auto-fit, [one] 20%)'
Fail Property grid-template-columns value 'repeat(auto-fill, minmax(100px, 5fr) [two])'
Fail Property grid-template-columns value 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])'
Fail Property grid-template-columns value '[a] 21px [b] repeat(auto-fill, [c] 22px [d] 23px [e]) [f] 24px [g]'
Fail Property grid-template-columns value '[a] 21px [b c] repeat(auto-fill, [d e] 22px [f g h] 23px [i j k l]) [m n] 24px [o]'
Fail Property grid-template-columns value '[a] repeat(2, [b] 20px [c d] 21px [e f g]) [h i] repeat(auto-fit, [j] 22px [k l m] 23px [n o p q]) [r s]'
Fail Property grid-template-columns value '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]'

35
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed.txt Normal file
View file

@ -0,0 +1,35 @@
Summary
Harness status: OK
Rerun
Found 24 tests
3 Pass
21 Fail
Details
Result Test Name MessageFail Property grid-template-columns value 'none'
Pass Property grid-template-columns value '1px'
Fail Property grid-template-columns value '1px [a]'
Fail Property grid-template-columns value '1px [a] 2px'
Fail Property grid-template-columns value '[a] 1px'
Fail Property grid-template-columns value '[a] 1px [b]'
Pass Property grid-template-columns value '1px repeat(1, 2px) 3px'
Pass Property grid-template-columns value '1px repeat(auto-fill, 2px) 3px'
Fail Property grid-template-columns value '1px repeat(auto-fit, 2px) 3px'
Fail Property grid-template-columns value '1px [a] repeat(1, 2px 3px) [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px'
Fail Property grid-template-columns value '1px [a] repeat(1, [b] 2px [c]) [d] 3px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px'
Fail Property grid-template-columns value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px'
Fail Property grid-template-columns value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]'
Fail Property grid-template-columns value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]'
Fail Property grid-template-columns value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]'
Fail Property grid-template-columns value '100% [a] repeat(1, [b] 200% [c]) [d] 300%'
Fail Property grid-template-columns value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%'
Fail Property grid-template-columns value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%'
Fail Property grid-template-columns value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]'
Fail Property grid-template-columns value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]'
Fail Property grid-template-columns value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]'

26
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-invalid.txt Normal file
View file

@ -0,0 +1,26 @@
Summary
Harness status: OK
Rerun
Found 15 tests
1 Pass
14 Fail
Details
Result Test Name MessageFail e.style['grid-template-columns'] = "-10px" should not set the property value
Fail e.style['grid-template-columns'] = "-20%" should not set the property value
Fail e.style['grid-template-columns'] = "-5fr" should not set the property value
Fail e.style['grid-template-columns'] = "minmax(5fr, calc(0.5em + 10px))" should not set the property value
Fail e.style['grid-template-columns'] = "minmax(-10px, auto)" should not set the property value
Fail e.style['grid-template-columns'] = "minmax(-20%, max-content)" should not set the property value
Fail e.style['grid-template-columns'] = "minmax(min-content, -20%)" should not set the property value
Fail e.style['grid-template-columns'] = "fit-content(-10px)" should not set the property value
Fail e.style['grid-template-columns'] = "fit-content(-20%)" should not set the property value
Pass e.style['grid-template-columns'] = "[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]" should not set the property value
Fail e.style['grid-template-columns'] = "[one]" should not set the property value
Fail e.style['grid-template-columns'] = "[one] 10px [two] [three]" should not set the property value
Fail e.style['grid-template-columns'] = "repeat(auto-fill, -10px)" should not set the property value
Fail e.style['grid-template-columns'] = "repeat(auto-fill, 10px) repeat(auto-fit, 20%)" should not set the property value
Fail e.style['grid-template-columns'] = "[auto] 1px" should not set the property value

45
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-valid.txt Normal file
View file

@ -0,0 +1,45 @@
Summary
Harness status: OK
Rerun
Found 34 tests
26 Pass
8 Fail
Details
Result Test Name MessageFail e.style['grid-template-columns'] = "none" should set the property value
Pass e.style['grid-template-columns'] = "10px" should set the property value
Pass e.style['grid-template-columns'] = "20%" should set the property value
Pass e.style['grid-template-columns'] = "calc(-0.5em + 10px)" should set the property value
Pass e.style['grid-template-columns'] = "calc(0.5em + 10px)" should set the property value
Pass e.style['grid-template-columns'] = "calc(30% + 40vw)" should set the property value
Pass e.style['grid-template-columns'] = "5fr" should set the property value
Pass e.style['grid-template-columns'] = "min-content" should set the property value
Pass e.style['grid-template-columns'] = "max-content" should set the property value
Pass e.style['grid-template-columns'] = "auto" should set the property value
Pass e.style['grid-template-columns'] = "minmax(10px, auto)" should set the property value
Pass e.style['grid-template-columns'] = "minmax(20%, max-content)" should set the property value
Pass e.style['grid-template-columns'] = "minmax(calc(-0.5em + 10px), min-content)" should set the property value
Pass e.style['grid-template-columns'] = "minmax(calc(0.5em + 10px), 5fr)" should set the property value
Pass e.style['grid-template-columns'] = "minmax(calc(30% + 40vw), 10px)" should set the property value
Pass e.style['grid-template-columns'] = "minmax(min-content, 20%)" should set the property value
Pass e.style['grid-template-columns'] = "minmax(max-content, calc(-0.5em + 10px))" should set the property value
Pass e.style['grid-template-columns'] = "minmax(auto, calc(0.5em + 10px))" should set the property value
Pass e.style['grid-template-columns'] = "fit-content(10px)" should set the property value
Pass e.style['grid-template-columns'] = "fit-content(20%)" should set the property value
Pass e.style['grid-template-columns'] = "fit-content(calc(-0.5em + 10px))" should set the property value
Pass e.style['grid-template-columns'] = "fit-content(calc(0.5em + 10px))" should set the property value
Pass e.style['grid-template-columns'] = "fit-content(calc(30% + 40vw))" should set the property value
Fail e.style['grid-template-columns'] = "repeat(1, [] 10px [])" should set the property value
Pass e.style['grid-template-columns'] = "repeat(1, [one two] 20%)" should set the property value
Pass e.style['grid-template-columns'] = "repeat(2, minmax(10px, auto))" should set the property value
Pass e.style['grid-template-columns'] = "repeat(2, fit-content(20%) [three four] 30px 40px [five six])" should set the property value
Pass e.style['grid-template-columns'] = "min-content repeat(5, minmax(10px, auto))" should set the property value
Fail e.style['grid-template-columns'] = "[] 150px [] 1fr []" should set the property value
Fail e.style['grid-template-columns'] = "repeat(auto-fill, 10px)" should set the property value
Fail e.style['grid-template-columns'] = "repeat(auto-fit, [one] 20%)" should set the property value
Fail e.style['grid-template-columns'] = "repeat(auto-fill, minmax(30px, 5fr) [two])" should set the property value
Fail e.style['grid-template-columns'] = "repeat(auto-fit, [three] minmax(max-content, 6em) [four])" should set the property value
Fail e.style['grid-template-columns'] = "[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]" should set the property value

11
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-important.txt Normal file
View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Fail
Details
Result Test Name MessageFail grid-template followed by !important

11
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-node-not-connected.txt Normal file
View file

@ -0,0 +1,11 @@
Summary
Harness status: OK
Rerun
Found 1 tests
1 Pass
Details
Result Test Name MessagePass grid-template-node-not-connected

22
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.txt Normal file
View file

@ -0,0 +1,22 @@
Summary
Harness status: OK
Rerun
Found 12 tests
12 Fail
Details
Result Test Name MessageFail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 3
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 4
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 5
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 6
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 4 / 5
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 4 / 6
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 3 / 6
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 3
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 4
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 5
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 4 / 7
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ' gridColumn = 3 / 6

27
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.txt Normal file
View file

@ -0,0 +1,27 @@
Summary
Harness status: OK
Rerun
Found 17 tests
17 Fail
Details
Result Test Name MessageFail Property grid-template-rows value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridRow = 3
Fail Property grid-template-rows value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridRow = 5
Fail Property grid-template-rows value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridRow = 3 / 8
Fail Property grid-template-rows value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridRow = 4 / span 2
Fail Property grid-template-rows value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridRow = 4 / 5
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridColumn = 3
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridColumn = 6
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridColumn = 3 / 8
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridColumn = 5 / span 2
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridColumn = 7 / span 2
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridColumn = 5 / 8
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]' gridColumn = 8 / 10
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]' gridColumn = 3
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]' gridColumn = 6
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]' gridColumn = 3 / 8
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]' gridColumn = 6 / span 2
Fail Property grid-template-columns value '[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]' gridColumn = 5 / 10

35
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed-implicit-track.txt Normal file
View file

@ -0,0 +1,35 @@
Summary
Harness status: OK
Rerun
Found 24 tests
1 Pass
23 Fail
Details
Result Test Name MessagePass Property grid-template-rows value 'none' computes to '10px'
Fail Property grid-template-rows value '1px' computes to '10px 1px'
Fail Property grid-template-rows value '1px [a]' computes to '10px 1px [a]'
Fail Property grid-template-rows value '1px [a] 2px' computes to '10px 1px [a] 2px'
Fail Property grid-template-rows value '[a] 1px' computes to '10px [a] 1px'
Fail Property grid-template-rows value '[a] 1px [b]' computes to '10px [a] 1px [b]'
Fail Property grid-template-rows value '1px repeat(1, 2px) 3px' computes to '10px 1px 2px 3px'
Fail Property grid-template-rows value '1px repeat(auto-fill, 2px) 3px' computes to '10px 1px 2px 3px'
Fail Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px' computes to '10px 1px 0px 3px'
Fail Property grid-template-rows value '1px [a] repeat(1, 2px 3px) [b] 4px' computes to '10px 1px [a] 2px 3px [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' computes to '10px 1px [a] 2px 3px [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' computes to '10px 1px [a] 0px 0px [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' computes to '10px 1px [a b] 0px [c d] 3px'
Fail Property grid-template-rows value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-rows value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-rows value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]' computes to '10px [a] 1px 0px [b] 0px 4px [d]'
Fail Property grid-template-rows value '100% [a] repeat(1, [b] 200% [c]) [d] 300%' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-rows value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%' computes to '10px 1px [a b] 2px [c d] 3px'
Fail Property grid-template-rows value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%' computes to '10px 1px [a b] 0px [c d] 3px'
Fail Property grid-template-rows value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-rows value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]' computes to '10px [a] 1px 2px [b] 3px 4px [d]'
Fail Property grid-template-rows value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]' computes to '10px [a] 1px 0px [b] 0px 4px [d]'

35
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed-nogrid.txt Normal file
View file

@ -0,0 +1,35 @@
Summary
Harness status: OK
Rerun
Found 24 tests
10 Pass
14 Fail
Details
Result Test Name MessageFail Property grid-template-rows value 'none'
Pass Property grid-template-rows value '1px'
Pass Property grid-template-rows value '1px [a]'
Pass Property grid-template-rows value '1px [a] 2px'
Pass Property grid-template-rows value '[a] 1px'
Pass Property grid-template-rows value '[a] 1px [b]'
Pass Property grid-template-rows value '1px repeat(1, 2px) 3px'
Fail Property grid-template-rows value '1px repeat(auto-fill, 2px) 3px'
Fail Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px'
Pass Property grid-template-rows value '1px [a] repeat(1, 2px 3px) [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px'
Pass Property grid-template-rows value '1px [a] repeat(1, [b] 2px [c]) [d] 3px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px'
Pass Property grid-template-rows value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]'
Fail Property grid-template-rows value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]'
Fail Property grid-template-rows value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]'
Pass Property grid-template-rows value '100% [a] repeat(1, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]'
Fail Property grid-template-rows value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]'
Fail Property grid-template-rows value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]'

38
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed-withcontent.txt Normal file
View file

@ -0,0 +1,38 @@
Summary
Harness status: OK
Rerun
Found 27 tests
16 Pass
11 Fail
Details
Result Test Name MessagePass Property grid-template-rows value 'none'
Fail Property grid-template-rows value '20%'
Fail Property grid-template-rows value 'calc(-0.5em + 10px)'
Pass Property grid-template-rows value 'calc(0.5em + 10px)'
Fail Property grid-template-rows value 'calc(30% + 40px)'
Pass Property grid-template-rows value '5fr'
Pass Property grid-template-rows value 'min-content'
Pass Property grid-template-rows value 'max-content'
Pass Property grid-template-rows value 'auto'
Pass Property grid-template-rows value 'minmax(10px, auto)'
Fail Property grid-template-rows value 'minmax(20%, max-content)'
Pass Property grid-template-rows value 'minmax(min-content, calc(-0.5em + 10px))'
Pass Property grid-template-rows value 'minmax(auto, 0)'
Pass Property grid-template-rows value 'fit-content(70px)'
Pass Property grid-template-rows value 'fit-content(20%)'
Fail Property grid-template-rows value 'fit-content(calc(-0.5em + 10px))'
Pass Property grid-template-rows value 'repeat(1, 10px)'
Fail Property grid-template-rows value 'repeat(1, [one two] 20%)'
Pass Property grid-template-rows value 'repeat(2, minmax(10px, auto))'
Fail Property grid-template-rows value 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])'
Pass Property grid-template-rows value 'min-content repeat(5, minmax(10px, auto))'
Pass Property grid-template-rows value '[] 150px [] 1fr []'
Pass Property grid-template-rows value 'repeat(auto-fill, 200px)'
Fail Property grid-template-rows value 'repeat(auto-fit, [one] 20%)'
Fail Property grid-template-rows value 'repeat(auto-fill, minmax(100px, 5fr) [two])'
Fail Property grid-template-rows value 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])'
Fail Property grid-template-rows value '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]'

35
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed.txt Normal file
View file

@ -0,0 +1,35 @@
Summary
Harness status: OK
Rerun
Found 24 tests
3 Pass
21 Fail
Details
Result Test Name MessageFail Property grid-template-rows value 'none'
Pass Property grid-template-rows value '1px'
Fail Property grid-template-rows value '1px [a]'
Fail Property grid-template-rows value '1px [a] 2px'
Fail Property grid-template-rows value '[a] 1px'
Fail Property grid-template-rows value '[a] 1px [b]'
Pass Property grid-template-rows value '1px repeat(1, 2px) 3px'
Pass Property grid-template-rows value '1px repeat(auto-fill, 2px) 3px'
Fail Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px'
Fail Property grid-template-rows value '1px [a] repeat(1, 2px 3px) [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px'
Fail Property grid-template-rows value '1px [a] repeat(1, [b] 2px [c]) [d] 3px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px'
Fail Property grid-template-rows value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px'
Fail Property grid-template-rows value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]'
Fail Property grid-template-rows value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]'
Fail Property grid-template-rows value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]'
Fail Property grid-template-rows value '100% [a] repeat(1, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%'
Fail Property grid-template-rows value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]'
Fail Property grid-template-rows value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]'
Fail Property grid-template-rows value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]'

26
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-invalid.txt Normal file
View file

@ -0,0 +1,26 @@
Summary
Harness status: OK
Rerun
Found 15 tests
1 Pass
14 Fail
Details
Result Test Name MessageFail e.style['grid-template-rows'] = "-10px" should not set the property value
Fail e.style['grid-template-rows'] = "-20%" should not set the property value
Fail e.style['grid-template-rows'] = "-5fr" should not set the property value
Fail e.style['grid-template-rows'] = "minmax(5fr, calc(0.5em + 10px))" should not set the property value
Fail e.style['grid-template-rows'] = "minmax(-10px, auto)" should not set the property value
Fail e.style['grid-template-rows'] = "minmax(-20%, max-content)" should not set the property value
Fail e.style['grid-template-rows'] = "minmax(min-content, -20%)" should not set the property value
Fail e.style['grid-template-rows'] = "fit-content(-10px)" should not set the property value
Fail e.style['grid-template-rows'] = "fit-content(-20%)" should not set the property value
Pass e.style['grid-template-rows'] = "[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]" should not set the property value
Fail e.style['grid-template-rows'] = "[one]" should not set the property value
Fail e.style['grid-template-rows'] = "[one] 10px [two] [three]" should not set the property value
Fail e.style['grid-template-rows'] = "repeat(auto-fill, -10px)" should not set the property value
Fail e.style['grid-template-rows'] = "repeat(auto-fill, 10px) repeat(auto-fit, 20%)" should not set the property value
Fail e.style['grid-template-rows'] = "[auto] 1px" should not set the property value

45
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-valid.txt Normal file
View file

@ -0,0 +1,45 @@
Summary
Harness status: OK
Rerun
Found 34 tests
26 Pass
8 Fail
Details
Result Test Name MessageFail e.style['grid-template-rows'] = "none" should set the property value
Pass e.style['grid-template-rows'] = "10px" should set the property value
Pass e.style['grid-template-rows'] = "20%" should set the property value
Pass e.style['grid-template-rows'] = "calc(-0.5em + 10px)" should set the property value
Pass e.style['grid-template-rows'] = "calc(0.5em + 10px)" should set the property value
Pass e.style['grid-template-rows'] = "calc(30% + 40vw)" should set the property value
Pass e.style['grid-template-rows'] = "5fr" should set the property value
Pass e.style['grid-template-rows'] = "min-content" should set the property value
Pass e.style['grid-template-rows'] = "max-content" should set the property value
Pass e.style['grid-template-rows'] = "auto" should set the property value
Pass e.style['grid-template-rows'] = "minmax(10px, auto)" should set the property value
Pass e.style['grid-template-rows'] = "minmax(20%, max-content)" should set the property value
Pass e.style['grid-template-rows'] = "minmax(calc(-0.5em + 10px), min-content)" should set the property value
Pass e.style['grid-template-rows'] = "minmax(calc(0.5em + 10px), 5fr)" should set the property value
Pass e.style['grid-template-rows'] = "minmax(calc(30% + 40vw), 10px)" should set the property value
Pass e.style['grid-template-rows'] = "minmax(min-content, 20%)" should set the property value
Pass e.style['grid-template-rows'] = "minmax(max-content, calc(-0.5em + 10px))" should set the property value
Pass e.style['grid-template-rows'] = "minmax(auto, calc(0.5em + 10px))" should set the property value
Pass e.style['grid-template-rows'] = "fit-content(10px)" should set the property value
Pass e.style['grid-template-rows'] = "fit-content(20%)" should set the property value
Pass e.style['grid-template-rows'] = "fit-content(calc(-0.5em + 10px))" should set the property value
Pass e.style['grid-template-rows'] = "fit-content(calc(0.5em + 10px))" should set the property value
Pass e.style['grid-template-rows'] = "fit-content(calc(30% + 40vw))" should set the property value
Fail e.style['grid-template-rows'] = "repeat(1, [] 10px [])" should set the property value
Pass e.style['grid-template-rows'] = "repeat(1, [one two] 20%)" should set the property value
Pass e.style['grid-template-rows'] = "repeat(2, minmax(10px, auto))" should set the property value
Pass e.style['grid-template-rows'] = "repeat(2, fit-content(20%) [three four] 30px 40px [five six])" should set the property value
Pass e.style['grid-template-rows'] = "min-content repeat(5, minmax(10px, auto))" should set the property value
Fail e.style['grid-template-rows'] = "[] 150px [] 1fr []" should set the property value
Fail e.style['grid-template-rows'] = "repeat(auto-fill, 10px)" should set the property value
Fail e.style['grid-template-rows'] = "repeat(auto-fit, [one] 20%)" should set the property value
Fail e.style['grid-template-rows'] = "repeat(auto-fill, minmax(30px, 5fr) [two])" should set the property value
Fail e.style['grid-template-rows'] = "repeat(auto-fit, [three] minmax(max-content, 6em) [four])" should set the property value
Fail e.style['grid-template-rows'] = "[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]" should set the property value

15
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand-areas-valid.txt Normal file
View file

@ -0,0 +1,15 @@
Summary
Harness status: OK
Rerun
Found 5 tests
5 Fail
Details
Result Test Name MessageFail grid-template: none / 1px and "grid-template-areas: "a";" should be valid.
Fail grid-template: none / none and "grid-template-areas: "a";" should be valid.
Fail grid-template: auto / 1px and "grid-template-areas: "a a a";" should be valid.
Fail grid-template: auto / auto and "grid-template-areas: "a a a";" should be valid.
Fail grid-template: 10px 20px 30px / 40px 50px 60px 70px and "grid-template-areas: "a . b ." "c d . e" "f g h .";" should be valid.

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

@ -0,0 +1,77 @@
Summary
Harness status: OK
Rerun
Found 66 tests
7 Pass
59 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
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
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'] = "[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
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
Fail e.style['grid-template'] = "repeat(auto-fit, 10px) \"a\"" 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
Fail e.style['grid-template'] = "[] repeat(auto-fit, 10px) \"a\"" 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
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
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
Fail e.style['grid-template'] = "\"a\" repeat(auto-fill, 10px) 10px" should not set the property value
Fail e.style['grid-template'] = "\"a\" 10px repeat(auto-fill, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" repeat(auto-fit, 10px) 10px" should not set the property value
Fail e.style['grid-template'] = "\"a\" 10px repeat(auto-fit, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] 10px" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] repeat(2, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] repeat(auto-fill, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] repeat(auto-fit, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] 10px [a]" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] repeat(2, 10px) [a]" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] repeat(auto-fill, 10px) [a]" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] repeat(auto-fit, 10px) [a]" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] [a] 10px" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] [a] repeat(2, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] [a] repeat(auto-fill, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" [a] [a] repeat(auto-fit, 10px)" should not set the property value
Fail e.style['grid-template'] = "\"a\" 10px [a] [a]" should not set the property value
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'] = "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
Pass e.style['grid-template'] = "none / \"a\" [] repeat(auto-fill, 10px)" should not set the property value
Pass e.style['grid-template'] = "none / \"a\" [] repeat(auto-fit, 10px)" should not set the property value

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

@ -0,0 +1,50 @@
Summary
Harness status: OK
Rerun
Found 40 tests
40 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
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
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
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
Fail e.style['grid-template'] = "\"a a a\"" should set the property value
Fail e.style['grid-template'] = "\"a\" / 10px" should set the property value
Fail e.style['grid-template'] = "\"a\" / 20%" should set the property value
Fail e.style['grid-template'] = "\"a\" / 5fr" should set the property value
Fail e.style['grid-template'] = "[a] \"a\"" should set the property value
Fail e.style['grid-template'] = "[a] \"a\" [a]" should set the property value
Fail e.style['grid-template'] = "[] \"a\"" should set the property value
Fail e.style['grid-template'] = "\"a\" [] [] \"b\"" should set the property value
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
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
Fail e.style['grid-template'] = "\"a\" [a] [a] \"b\" 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\" 10px [a] \"b\" [a]" should set the property value
Fail e.style['grid-template'] = "\"a\" [a] \"b\" [a]" should set the property value
Fail e.style['grid-template'] = "[a] \"a\" [a] \"b\" [a]" should set the property value
Fail e.style['grid-template'] = "\"a\" \"a\" [a] \"b\" [a]" should set the property value
Fail e.style['grid-template'] = "\"a\" [a] \"b\" [a] / 0" should set the property value
Fail e.style['grid-template'] = "\"a\" \"a\" [a] [a] \"b\" / auto" should set the property value
Fail e.style['grid-template'] = "\"a\" auto [a] \"b\" auto [b] / 10px" should set the property value

35
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-shorthand.txt Normal file
View file

@ -0,0 +1,35 @@
Summary
Harness status: OK
Rerun
Found 24 tests
15 Pass
9 Fail
Details
Result Test Name MessagePass e.style['grid-template'] = "none" should set grid-template-areas
Fail e.style['grid-template'] = "none" should set grid-template-columns
Fail e.style['grid-template'] = "none" should set grid-template-rows
Pass e.style['grid-template'] = "none" should not set unrelated longhands
Pass e.style['grid-template'] = "10px / 20%" should set grid-template-areas
Pass e.style['grid-template'] = "10px / 20%" should set grid-template-columns
Pass e.style['grid-template'] = "10px / 20%" should set grid-template-rows
Pass e.style['grid-template'] = "10px / 20%" should not set unrelated longhands
Pass e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-areas
Pass e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-columns
Pass e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-rows
Pass e.style['grid-template'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should not set unrelated longhands
Fail e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas
Pass e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-columns
Fail e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-rows
Pass e.style['grid-template'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should not set unrelated longhands
Fail e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas
Pass e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-columns
Fail e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-rows
Pass e.style['grid-template'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should not set unrelated longhands
Fail e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas
Fail e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-columns
Fail e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-rows
Pass e.style['grid-template'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should not set unrelated longhands

67
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-area-computed.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridArea</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#placement">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
// auto
test_computed_value("grid-area", "auto / auto / auto / auto",
["auto", "auto / auto / auto / auto"]);
test_computed_value("grid-row", "auto / auto", ["auto", "auto / auto"]);
test_computed_value("grid-column-end", "auto");
// <custom-ident>
test_computed_value("grid-row", "-zπ", [ "-zπ", "-zπ / -zπ"]);
test_computed_value("grid-row-start", "AZ");
test_computed_value("grid-column-start", "-_π");
test_computed_value("grid-row-end", "_9");
// <integer> && <custom-ident>?
test_computed_value("grid-area", "1 / 90 -a- / auto / auto",
["1 / 90 -a-", "1 / 90 -a- / auto / auto"]);
test_computed_value("grid-row", "2 az / auto", ["2 az", "2 az / auto"]);
test_computed_value("grid-column", "9 / -19 zA");
test_computed_value("grid-row-start", "-19");
test_computed_value("grid-row-start", "9 -Z_");
test_computed_value("grid-column-start", "-44 Z");
test_computed_value("grid-row-end", "1 -πA");
test_computed_value("grid-column-end", "5 π_");
// span && [ <integer> || <custom-ident> ]
test_computed_value("grid-area", "span 2 i / auto / auto / auto",
["span 2 i", "span 2 i / auto / auto / auto"]);
test_computed_value("grid-row", "span 2 / auto", ["span 2", "span 2 / auto"]);
test_computed_value("grid-column-start", "span 1 i", "span i");
test_computed_value("grid-row-start", "span 1");
test_computed_value("grid-row-end", "span 2 i");
test_computed_value("grid-column-end", "span 2");
// https://github.com/w3c/csswg-drafts/issues/3448
test_computed_value("grid-row-start", "span i");
test_computed_value("grid-row", "span i / auto", ["span i", "span i / auto"]);
// <grid-line> [ / <grid-line> ]{0,3}
test_computed_value("grid-area", "auto / i / auto / i",
["auto / i", "auto / i / auto / i"]);
test_computed_value("grid-area", "auto / i / 2 j",
["auto / i / 2 j", "auto / i / 2 j / i"]);
test_computed_value("grid-area", "auto / i / 2 j / span 3 k");
test_computed_value("grid-row", "auto / i");
test_computed_value("grid-column", "2 j / span 3 k");
// https://github.com/w3c/csswg-drafts/issues/2858
test_computed_value("grid-column-end", "\\31st", "\\31 st");
test_computed_value("grid-column-end", "\\31 st", "\\31 st");
</script>
</body>
</html>

47
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-area-invalid.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-area with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
<meta name="assert" content="grid-area supports only the grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("grid-area", "'string'");
test_invalid_value("grid-row", "1.0");
test_invalid_value("grid-column", "1 2");
test_invalid_value("grid-row-start", "+-3");
test_invalid_value("grid-column-start", "0");
test_invalid_value("grid-row-end", "span");
test_invalid_value("grid-column-end", "sPaN");
test_invalid_value("grid-column-end", '"1st"');
test_invalid_value("grid-column-end", "1st");
test_invalid_value("grid-column-start", "auto 1");
test_invalid_value("grid-row-start", "1 auto");
test_invalid_value("grid-area", "auto / initial");
test_invalid_value("grid-row", "auto / inherit");
test_invalid_value("grid-column", "auto / unset");
test_invalid_value("grid-area", "auto / auto / auto / auto / auto");
test_invalid_value("grid-row", "1 / 2 / 3")
test_invalid_value("grid-column", "a / b / c");
test_invalid_value("grid-row-end", "span 1 / span 2");
test_invalid_value("grid-area", "auto 2 auto 4");
test_invalid_value("grid-row", "33 -A0 auto");
test_invalid_value("grid-row", "auto i 2 j span 3 k");
// https://github.com/w3c/csswg-drafts/issues/2856
test_invalid_value("grid-row-end", "1 auto");
test_invalid_value("grid-row-end", "span 1 auto");
test_invalid_value("grid-row-end", "span auto 1");
test_invalid_value("grid-row-end", "1 auto span");
</script>
</body>
</html>

99
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-area-shorthand.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-area sets longhands</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
test_shorthand_value('grid-area', 'auto', {
'grid-row-start': 'auto',
'grid-column-start': 'auto',
'grid-row-end': 'auto',
'grid-column-end': 'auto'
});
// <custom-ident>
test_shorthand_value('grid-area', '--a', {
'grid-row-start': '--a',
'grid-column-start': '--a',
'grid-row-end': '--a',
'grid-column-end': '--a'
});
test_shorthand_value('grid-area', 'a / b', {
'grid-row-start': 'a',
'grid-column-start': 'b',
'grid-row-end': 'a',
'grid-column-end': 'b'
});
test_shorthand_value('grid-area', 'a / b / c', {
'grid-row-start': 'a',
'grid-column-start': 'b',
'grid-row-end': 'c',
'grid-column-end': 'b'
});
test_shorthand_value('grid-area', 'a / b / c / d', {
'grid-row-start': 'a',
'grid-column-start': 'b',
'grid-row-end': 'c',
'grid-column-end': 'd'
});
// <integer> && <custom-ident>?
// span && [ <integer> || <custom-ident> ]
test_shorthand_value('grid-area', '+90 -a- / 2 i span', {
'grid-row-start': '90 -a-',
'grid-column-start': 'span 2 i',
'grid-row-end': 'auto',
'grid-column-end': 'auto'
});
test_shorthand_value('grid-area', '1 / 2 / 3 / 4', {
'grid-row-start': '1',
'grid-column-start': '2',
'grid-row-end': '3',
'grid-column-end': '4'
});
test_shorthand_value('grid-row', 'auto', {
'grid-row-start': 'auto',
'grid-row-end': 'auto'
});
test_shorthand_value('grid-row', 'one / 2', {
'grid-row-start': 'one',
'grid-row-end': '2'
});
test_shorthand_value('grid-row', '1 two / four 3', {
'grid-row-start': '1 two',
'grid-row-end': '3 four'
});
test_shorthand_value('grid-column', '5 span', {
'grid-column-start': 'span 5',
'grid-column-end': 'auto'
});
test_shorthand_value('grid-column', '1 / two', {
'grid-column-start': '1',
'grid-column-end': 'two'
});
test_shorthand_value('grid-column', 'span 1 two / four 3 span', {
'grid-column-start': 'span two',
'grid-column-end': 'span 3 four'
});
</script>
</body>
</html>

88
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-area-valid.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-area with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// auto
test_valid_value("grid-area", "auto");
test_valid_value("grid-area", "auto / auto", "auto");
test_valid_value("grid-area", "auto / auto / auto", "auto");
test_valid_value("grid-area", "auto / auto / auto / auto", "auto");
test_valid_value("grid-area", "AuTo", "auto");
test_valid_value("grid-row", "auto");
test_valid_value("grid-row", "auto/auto", "auto");
test_valid_value("grid-column-end", "AuTo", "auto");
// <custom-ident>
test_valid_value("grid-area", "--a");
test_valid_value("grid-row", "-zπ");
test_valid_value("grid-row", "-zπ/-zπ", "-zπ");
test_valid_value("grid-row", "i / i", "i");
test_valid_value("grid-row-start", "AZ");
test_valid_value("grid-column-start", "-_π");
test_valid_value("grid-row-end", "_9");
// <integer> && <custom-ident>?
test_valid_value("grid-area", "1");
test_valid_value("grid-area", "+90 -a-", "90 -a-");
test_valid_value("grid-row", "az 2", "2 az");
test_valid_value("grid-column", "9");
test_valid_value("grid-column", "-19 zA");
test_valid_value("grid-column", "-A0 33", "33 -A0");
test_valid_value("grid-row-start", "-19");
test_valid_value("grid-row-start", "9 -Z_");
test_valid_value("grid-column-start", "+90", "90");
test_valid_value("grid-column-start", "Z -44", "-44 Z");
test_valid_value("grid-row-end", "1 -πA");
test_valid_value("grid-column-end", "π_ +5", "5 π_");
// span && [ <integer> || <custom-ident> ]
test_valid_value("grid-area", "span 2 i");
test_valid_value("grid-area", "i 2 SpAn", "span 2 i");
test_valid_value("grid-area", "span 1 i", "span i")
test_valid_value("grid-row", "span 2");
test_valid_value("grid-column", "i SpAn", "span i");
test_valid_value("grid-row-start", "span i");
test_valid_value("grid-column-start", "SpAn i 2", "span 2 i");
test_valid_value("grid-row-end", "2 i span", "span 2 i");
test_valid_value("grid-column-end", "2 SpAn", "span 2");
// <grid-line> [ / <grid-line> ]{0,3}
test_valid_value("grid-area", "auto / i");
test_valid_value("grid-area", "auto / i / auto / i", "auto / i");
test_valid_value("grid-area", "auto / i / auto / 2 i");
test_valid_value("grid-area", "1 / i / auto / i", "1 / i");
test_valid_value("grid-area", "1 / auto / auto / auto", "1");
test_valid_value("grid-area", "1 / auto / i / auto", "1 / auto / i");
test_valid_value("grid-area", "1 / j / i / k");
test_valid_value("grid-area", "1 / auto / 2 / auto", "1 / auto / 2");
test_valid_value("grid-area", "1 / i / 2 / auto");
test_valid_value("grid-area", "i / i / auto / auto");
test_valid_value("grid-area", "i / auto / i / auto", "i / auto");
test_valid_value("grid-area", "auto / i / 2 j");
test_valid_value("grid-area", "auto / i / 2 j / span 3 k");
test_valid_value("grid-row", "auto / i");
test_valid_value("grid-row", "i / auto");
test_valid_value("grid-row", "2 i / auto", "2 i");
test_valid_value("grid-row", "1 / auto", "1");
test_valid_value("grid-column", "2 j / span 3 k");
// https://github.com/w3c/csswg-drafts/issues/2858
// '\\31 st' in Blink, Firefox, EdgeHTML and Safari serialize invalid values.
test_valid_value("grid-column-end", "\\31st", ["\\31 st", "\\31st"]);
test_valid_value("grid-column-end", "\\31 st", ["\\31 st", "\\31st"]);
test_valid_value("grid-column", "\\31st / \\31 st", ["\\31 st", "\\31st"]);
</script>
</body>
</html>

58
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-columns-computed.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridAutoColumns</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
// <track-breadth>
// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-auto-columns", "1px");
test_computed_value("grid-auto-columns", "calc(10px + 0.5em)", "30px");
test_computed_value("grid-auto-columns", "calc(10px - 0.5em)", "0px");
test_computed_value("grid-auto-columns", "4%");
test_computed_value("grid-auto-columns", "5fr");
test_computed_value("grid-auto-columns", "min-content");
test_computed_value("grid-auto-columns", "max-content");
test_computed_value("grid-auto-columns", "auto");
// minmax( <inflexible-breadth> , <track-breadth> )
// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
test_computed_value("grid-auto-columns", "minmax(1px, 5fr)");
test_computed_value("grid-auto-columns", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
test_computed_value("grid-auto-columns", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
test_computed_value("grid-auto-columns", "minmax(4%, auto)");
test_computed_value("grid-auto-columns", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
test_computed_value("grid-auto-columns", "minmax(auto, 4%)");
// fit-content( <length-percentage> )
test_computed_value("grid-auto-columns", "fit-content(1px)");
test_computed_value("grid-auto-columns", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
test_computed_value("grid-auto-columns", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
test_computed_value("grid-auto-columns", "fit-content(4%)");
// 0
test_computed_value("grid-auto-columns", "0px");
test_computed_value("grid-auto-columns", "0%");
test_computed_value("grid-auto-columns", "0fr");
test_computed_value("grid-auto-columns", "minmax(auto, 0%)");
test_computed_value("grid-auto-columns", "fit-content(0px)");
// <track-size>+
// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
test_computed_value("grid-auto-columns", "1px 2px 3px 0px");
test_computed_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px");
</script>
</body>
</html>

39
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-columns-invalid.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-auto-columns with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
<meta name="assert" content="grid-auto-columns supports only the grammar '<track-size>+'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <track-breadth>
test_invalid_value("grid-auto-columns", "none");
test_invalid_value("grid-auto-columns", "-1px");
test_invalid_value("grid-auto-columns", "-4%");
// minmax( <inflexible-breadth> , <track-breadth> )
test_invalid_value("grid-auto-columns", "minmax(1px)");
test_invalid_value("grid-auto-columns", "minmax(1px, 2px, 3px)");
test_invalid_value("grid-auto-columns", "minmax(5fr, 1px)");
test_invalid_value("grid-auto-columns", "minmax(6px, -7%)");
test_invalid_value("grid-auto-columns", "minmax(8px, -9fr)");
// fit-content( <length-percentage> )
test_invalid_value("grid-auto-columns", "fit-content(-1px)");
test_invalid_value("grid-auto-columns", "fit-content(1px, 2px)");
test_invalid_value("grid-auto-columns", "fit-content(1px auto)");
// <track-size>+
test_invalid_value("grid-auto-columns", "2em / 3em");
test_invalid_value("grid-auto-columns", "auto, 10%");
test_invalid_value("grid-auto-columns", "1px [a] 1px");
test_invalid_value("grid-auto-columns", "[] 1px []");
</script>
</body>
</html>

57
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-columns-valid.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-auto-columns with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
<meta name="assert" content="grid-auto-columns supports the full grammar '<track-size>+'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <track-breadth>
// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_valid_value("grid-auto-columns", "1px");
test_valid_value("grid-auto-columns", "2em");
test_valid_value("grid-auto-columns", "calc(2em + 3ex)");
test_valid_value("grid-auto-columns", "4%");
test_valid_value("grid-auto-columns", "5fr");
test_valid_value("grid-auto-columns", "min-content");
test_valid_value("grid-auto-columns", "max-content");
test_valid_value("grid-auto-columns", "auto");
test_valid_value("grid-auto-columns", "auto /**/", "auto");
// minmax( <inflexible-breadth> , <track-breadth> )
// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
test_valid_value("grid-auto-columns", "minmax(1px, 5fr)");
test_valid_value("grid-auto-columns", "minmax(2em, min-content)");
test_valid_value("grid-auto-columns", "minmax(calc(2em + 3ex), max-content)");
test_valid_value("grid-auto-columns", "minmax(4%, auto)");
test_valid_value("grid-auto-columns", "minmax(5vmin, 1px)");
test_valid_value("grid-auto-columns", "minmax(min-content, 2em)");
test_valid_value("grid-auto-columns", "minmax(max-content, calc(2em + 3ex))");
test_valid_value("grid-auto-columns", "minmax(auto, 4%)");
// fit-content( <length-percentage> )
test_valid_value("grid-auto-columns", "fit-content(1px)");
test_valid_value("grid-auto-columns", "fit-content(2em)");
test_valid_value("grid-auto-columns", "fit-content(calc(2em + 3ex))");
test_valid_value("grid-auto-columns", "fit-content(4%)");
test_valid_value("grid-auto-columns", "0px");
test_valid_value("grid-auto-columns", "0%");
test_valid_value("grid-auto-columns", "0fr");
test_valid_value("grid-auto-columns", "minmax(auto, 0%)");
test_valid_value("grid-auto-columns", "fit-content(0px)");
// <track-size>+
test_valid_value("grid-auto-columns", "auto auto");
test_valid_value("grid-auto-columns", "auto 10px");
test_valid_value("grid-auto-columns", "1px 2px 3px 0px");
test_valid_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px");
</script>
</body>
</html>

25
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-flow-computed.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridAutoFlow</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("grid-auto-flow", "row");
test_computed_value("grid-auto-flow", "column");
test_computed_value("grid-auto-flow", "row dense", "dense");
test_computed_value("grid-auto-flow", "column dense");
test_computed_value("grid-auto-flow", "dense row", "dense");
test_computed_value("grid-auto-flow", "dense column", "column dense");
test_computed_value("grid-auto-flow", "dense", "dense");
</script>
</body>
</html>

20
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-flow-invalid.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-auto-flow with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
<meta name="assert" content="grid-auto-flow supports only the grammar '[ row | column ] || dense'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("grid-auto-flow", "auto");
test_invalid_value("grid-auto-flow", "row dense column");
test_invalid_value("grid-auto-flow", "dense row dense");
</script>
</body>
</html>

24
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-flow-valid.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-auto-flow with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
<meta name="assert" content="grid-auto-flow supports the full grammar '[ row | column ] || dense'.">
<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("grid-auto-flow", "row");
test_valid_value("grid-auto-flow", "column");
test_valid_value("grid-auto-flow", "row dense", "dense");
test_valid_value("grid-auto-flow", "dense row", "dense");
test_valid_value("grid-auto-flow", "dense");
test_valid_value("grid-auto-flow", "column dense");
test_valid_value("grid-auto-flow", "dense column", "column dense");
</script>
</body>
</html>

58
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-rows-computed.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridAutoRows</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
// <track-breadth>
// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-auto-rows", "1px");
test_computed_value("grid-auto-rows", "calc(10px + 0.5em)", "30px");
test_computed_value("grid-auto-rows", "calc(10px - 0.5em)", "0px");
test_computed_value("grid-auto-rows", "4%");
test_computed_value("grid-auto-rows", "5fr");
test_computed_value("grid-auto-rows", "min-content");
test_computed_value("grid-auto-rows", "max-content");
test_computed_value("grid-auto-rows", "auto");
// minmax( <inflexible-breadth> , <track-breadth> )
// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
test_computed_value("grid-auto-rows", "minmax(1px, 5fr)");
test_computed_value("grid-auto-rows", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
test_computed_value("grid-auto-rows", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
test_computed_value("grid-auto-rows", "minmax(4%, auto)");
test_computed_value("grid-auto-rows", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
test_computed_value("grid-auto-rows", "minmax(auto, 4%)");
// fit-content( <length-percentage> )
test_computed_value("grid-auto-rows", "fit-content(1px)");
test_computed_value("grid-auto-rows", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
test_computed_value("grid-auto-rows", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
test_computed_value("grid-auto-rows", "fit-content(4%)");
// 0
test_computed_value("grid-auto-rows", "0px");
test_computed_value("grid-auto-rows", "0%");
test_computed_value("grid-auto-rows", "0fr");
test_computed_value("grid-auto-rows", "minmax(auto, 0%)");
test_computed_value("grid-auto-rows", "fit-content(0px)");
// <track-size>+
// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
test_computed_value("grid-auto-rows", "1px 2px 3px 0px");
test_computed_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px");
</script>
</body>
</html>

38
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-rows-invalid.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-auto-rows with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
<meta name="assert" content="grid-auto-rows supports only the grammar '<track-size>+'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <track-breadth>
test_invalid_value("grid-auto-rows", "none");
test_invalid_value("grid-auto-rows", "-1px");
test_invalid_value("grid-auto-rows", "-4%");
// minmax( <inflexible-breadth> , <track-breadth> )
test_invalid_value("grid-auto-rows", "minmax(1px)");
test_invalid_value("grid-auto-rows", "minmax(1px, 2px, 3px)");
test_invalid_value("grid-auto-rows", "minmax(5fr, 1px)");
test_invalid_value("grid-auto-rows", "minmax(6px, -7%)");
// fit-content( <length-percentage> )
test_invalid_value("grid-auto-rows", "fit-content(-1px)");
test_invalid_value("grid-auto-rows", "fit-content(1px, 2px)");
test_invalid_value("grid-auto-rows", "fit-content(1px auto)");
// <track-size>+
test_invalid_value("grid-auto-rows", "2em / 3em");
test_invalid_value("grid-auto-rows", "auto, 10%");
test_invalid_value("grid-auto-rows", "1px [a] 1px");
test_invalid_value("grid-auto-rows", "[] 1px []");
</script>
</body>
</html>

57
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-auto-rows-valid.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-auto-rows with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
<meta name="assert" content="grid-auto-rows supports the full grammar '<track-size>+'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <track-breadth>
// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_valid_value("grid-auto-rows", "1px");
test_valid_value("grid-auto-rows", "2em");
test_valid_value("grid-auto-rows", "calc(2em + 3ex)");
test_valid_value("grid-auto-rows", "4%");
test_valid_value("grid-auto-rows", "5fr");
test_valid_value("grid-auto-rows", "min-content");
test_valid_value("grid-auto-rows", "max-content");
test_valid_value("grid-auto-rows", "auto");
test_valid_value("grid-auto-rows", "auto /**/", "auto");
// minmax( <inflexible-breadth> , <track-breadth> )
// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
test_valid_value("grid-auto-rows", "minmax(1px, 5fr)");
test_valid_value("grid-auto-rows", "minmax(2em, min-content)");
test_valid_value("grid-auto-rows", "minmax(calc(2em + 3ex), max-content)");
test_valid_value("grid-auto-rows", "minmax(4%, auto)");
test_valid_value("grid-auto-rows", "minmax(5vmin, 1px)");
test_valid_value("grid-auto-rows", "minmax(min-content, 2em)");
test_valid_value("grid-auto-rows", "minmax(max-content, calc(2em + 3ex))");
test_valid_value("grid-auto-rows", "minmax(auto, 4%)");
// fit-content( <length-percentage> )
test_valid_value("grid-auto-rows", "fit-content(1px)");
test_valid_value("grid-auto-rows", "fit-content(2em)");
test_valid_value("grid-auto-rows", "fit-content(calc(2em + 3ex))");
test_valid_value("grid-auto-rows", "fit-content(4%)");
test_valid_value("grid-auto-rows", "0px");
test_valid_value("grid-auto-rows", "0%");
test_valid_value("grid-auto-rows", "0fr");
test_valid_value("grid-auto-rows", "minmax(auto, 0%)");
test_valid_value("grid-auto-rows", "fit-content(0px)");
// <track-size>+
test_valid_value("grid-auto-rows", "auto auto");
test_valid_value("grid-auto-rows", "auto 10px");
test_valid_value("grid-auto-rows", "1px 2px 3px 0px");
test_valid_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px");
</script>
</body>
</html>

54
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-column-invalid.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
<meta name="assert" content="Tests invalid values for grid-column"/>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_invalid_value("grid-column", "4 5");
test_invalid_value("grid-column", "4 /");
test_invalid_value("grid-column", "5 5");
test_invalid_value("grid-column", "5 / /");
test_invalid_value("grid-column", "0 / 5");
test_invalid_value("grid-column", "6 / 0");
test_invalid_value("grid-column", "0");
test_invalid_value("grid-column", "span");
test_invalid_value("grid-column", "span / span");
test_invalid_value("grid-column", "span span / span span");
test_invalid_value("grid-column", "5 5 / span 2");
test_invalid_value("grid-column", "5 first last / span 2");
test_invalid_value("grid-column", "5 / first last 2");
test_invalid_value("grid-column", "first last / span 2");
test_invalid_value("grid-column", "5 / first last");
test_invalid_value("grid-column", "5 5 span / 2", "span 4 4 / 3");
test_invalid_value("grid-column", "span 3 5 / 1", "5 span 4 / 3");
test_invalid_value("grid-column", "span last first / 1", "span first last / 3");
test_invalid_value("grid-column", "2 / span last first", "3 / span first last");
test_invalid_value("grid-column", "span 1 last first / 1", "span first last 7 / 3");
test_invalid_value("grid-column", "2 / span last 3 first", "3 / span first 5 last");
test_invalid_value("grid-column", "1 span 2 first / 1", "1 span last 7 / 3");
test_invalid_value("grid-column", "2 / 3 span 3 first", "3 / 5 span first 5");
test_invalid_value("grid-column", "span -1 / -2");
test_invalid_value("grid-column", "-1 / -2 span");
test_invalid_value("grid-column", "0 span / 0");
test_invalid_value("grid-column", "0 / span 0");
test_invalid_value("grid-column", "span -3 'first' / 3 last");
test_invalid_value("grid-column", "first span 1 / last");
test_invalid_value("grid-column", "3 first / 2 span last");
test_invalid_value("grid-column", "3 / 1 span 2");
</script>
</body>
</html>

33
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-column-shortest-serialization.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"/>
<meta name="assert" content="grid-column computed value should be the shortest serialization possible"/>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("grid-column", "auto / auto", "auto");
test_computed_value("grid-column", "auto", "auto");
test_computed_value("grid-column", "10 / auto", "10");
test_computed_value("grid-column", "10", "10");
test_computed_value("grid-column", "-10 / auto", "-10");
test_computed_value("grid-column", "-10", "-10");
test_computed_value("grid-column", "first / first", "first");
test_computed_value("grid-column", "first", "first");
test_computed_value("grid-column", "span 2 / auto", "span 2");
test_computed_value("grid-column", "span 2", "span 2");
test_computed_value("grid-column", "2 first / auto", "2 first");
test_computed_value("grid-column", "2 first", "2 first");
test_computed_value("grid-column", "span first / auto", "span first");
test_computed_value("grid-column", "span first", "span first");
test_computed_value("grid-column", "span 2 first / auto", "span 2 first");
test_computed_value("grid-column", "span 2 first", "span 2 first");
</script>
</body>
</html>

87
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-column-shorthand.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
<meta name="assert" content="grid-column should set values for grid-column-start and grid-column-end">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
test_shorthand_value("grid-column", "auto / auto", {
"grid-column-start": "auto",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "auto", {
"grid-column-start": "auto",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "10 / auto", {
"grid-column-start": "10",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "10", {
"grid-column-start": "10",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "-10 / auto", {
"grid-column-start": "-10",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "-10", {
"grid-column-start": "-10",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "span 2 / auto", {
"grid-column-start": "span 2",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "span 2", {
"grid-column-start": "span 2",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "3 last / auto", {
"grid-column-start": "3 last",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "3 last", {
"grid-column-start": "3 last",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "span first / auto", {
"grid-column-start": "span first",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "span first", {
"grid-column-start": "span first",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "span 2 first / auto", {
"grid-column-start": "span 2 first",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "span 2 first", {
"grid-column-start": "span 2 first",
"grid-column-end": "auto"
});
test_shorthand_value("grid-column", "last / last", {
"grid-column-start": "last",
"grid-column-end": "last"
});
test_shorthand_value("grid-column", "last", {
"grid-column-start": "last",
"grid-column-end": "last"
});
</script>
</body>
</html>

322
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html Normal file
View file

@ -0,0 +1,322 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=73272">
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
<link href="/css/support/grid.css" rel="stylesheet">
<link href="/css/support/alignment.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
<meta name="assert" content="Test that setting and getting multiple grid-template-columns and grid-template-rows works as expected">
<style>
/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution. */
.definite {
width: 800px;
height: 600px;
}
.gridItem {
grid-column: 1;
grid-row: 1;
width: 7px;
height: 16px;
}
.gridItem2 {
grid-column: 2;
grid-row: 2;
width: 17px;
height: 3px;
}
.gridWithFixed {
grid-template-columns: 7px 11px;
grid-template-rows: 17px 2px;
}
.gridWithPercent {
grid-template-columns: 50% 100%;
grid-template-rows: 25% 75%;
}
.gridWithAuto {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.gridWithEM {
grid-template-columns: 10em 12em;
grid-template-rows: 15em 17em;
font: 10px Ahem;
}
.gridWithNoneAndAuto {
grid-template-columns: none auto;
grid-template-rows: none auto;
}
.gridNoneWithAndFixed {
grid-template-columns: none 15px;
grid-template-rows: none 22px;
}
.gridWithThreeItems {
grid-template-columns: 15px auto 10em;
grid-template-rows: 12em 18px auto;
font: 10px Ahem;
}
.gridWithFitContentAndFitAvailable {
grid-template-columns: -webkit-content-available;
grid-template-rows: -webkit-fit-content -webkit-fit-available;
}
.gridWithMinMaxContent {
grid-template-columns: min-content max-content;
grid-template-rows: max-content min-content;
}
.gridWithMinMaxAndFixed {
grid-template-columns: minmax(45px, 30%) 15px;
grid-template-rows: 12em minmax(35%, 10px);
font: 10px Ahem;
}
.gridWithMinMaxAndMinMaxContent {
grid-template-columns: minmax(min-content, 30%) 15px;
grid-template-rows: 12em minmax(35%, max-content);
font: 10px Ahem;
}
.gridWithFractionFraction {
grid-template-columns: 2fr 3fr;
grid-template-rows: 3fr 5fr;
}
.gridWithFractionMinMax {
grid-template-columns: minmax(min-content, 45px) 2fr;
grid-template-rows: 3fr minmax(14px, max-content);
}
.gridWithCalcCalc {
grid-template-columns: calc(200px) calc(10em);
grid-template-rows: calc(15em) calc(75px);
font: 10px Ahem;
}
.gridWithCalcAndFixed {
grid-template-columns: calc(50%) 8em;
grid-template-rows: 88px calc(25%);
font: 10px Ahem;
}
.gridWithCalcAndMinMax {
grid-template-columns: calc(30px + 20%) minmax(min-content, 80px);
grid-template-rows: minmax(25%, max-content) calc(10% - 7px);
}
.gridWithCalcInsideMinMax {
grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
font: 10px Ahem;
}
.gridWithAutoInsideMinMax {
grid-template-columns: minmax(auto, min-content) 30px;
grid-template-rows: calc(100px + 2em) minmax(10%, auto);
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
<div class="gridItem"></div>
</div>
<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement">
<div class="gridItem2"></div>
</div>
<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div>
<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
<div class="gridItem"></div>
<div class="gridItem2"></div>
</div>
<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div>
<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div>
<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div>
<script>
function testGridDefinitionsValues(id, columnValue, rowValue)
{
test(function(){
var element = document.getElementById(id);
var readColumnValue = getComputedStyle(element).gridTemplateColumns;
var readRowValue = getComputedStyle(element).gridTemplateRows;
assert_equals(readColumnValue, columnValue);
assert_equals(readRowValue, rowValue);
}, `Test getting grid-template-columns and grid-template-rows set through CSS for element '${id}' : grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`);
}
function testGridDefinitionsSetJSValues(
columnValue,
rowValue,
computedColumnValue = columnValue,
computedRowValue = rowValue,
jsColumnValue = columnValue,
jsRowValue = rowValue)
{
test(function(){
window.element = document.createElement("div");
document.body.appendChild(element);
element.style.display = "grid";
element.style.width = "800px";
element.style.height = "600px";
element.style.justifyContent = "start";
element.style.alignContent = "start";
element.style.font = "10px Ahem"; // Used to resolve em font consistently.
element.style.gridTemplateColumns = columnValue;
element.style.gridTemplateRows = rowValue;
assert_equals(getComputedStyle(element).gridTemplateColumns, computedColumnValue);
assert_equals(element.style.gridTemplateColumns, jsColumnValue);
assert_equals(getComputedStyle(element).gridTemplateRows, computedRowValue);
assert_equals(element.style.gridTemplateRows, jsRowValue);
document.body.removeChild(element);
}, `Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '${computedColumnValue}', element.style.gridTemplateColumns = '${columnValue}', grid-template-rows = '${computedRowValue}', element.style.gridTemplateRows = '${rowValue}'`);
}
function testGridDefinitionsSetBadJSValues(columnValue, rowValue)
{
test(function(){
window.element = document.createElement("div");
document.body.appendChild(element);
element.style.gridTemplateColumns = columnValue;
element.style.gridTemplateRows = rowValue;
assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
assert_equals(getComputedStyle(element).gridTemplateRows, "none");
document.body.removeChild(element);
}, `Test setting bad JS values: grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`);
}
function testDefaultValue()
{
test(function(){
var element = document.createElement("div");
document.body.appendChild(element);
assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
assert_equals(getComputedStyle(element).gridTemplateRows, "none");
document.body.removeChild(element);
}, `Test the default value`);
}
function testWrongCSSValue()
{
test(function(){
var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateColumns, "none");
assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateRows, "none");
var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateColumns, "none");
assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateRows, "none");
}, `Test setting wrong/invalid values through CSS`);
}
function testInherit()
{
test(function(){
var parentElement = document.createElement("div");
document.body.appendChild(parentElement);
parentElement.style.display = "grid";
parentElement.style.width = "800px";
parentElement.style.height = "600px";
parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
parentElement.style.gridTemplateColumns = "50px 1fr [last]";
parentElement.style.gridTemplateRows = "2em [middle] 45px";
assert_equals(getComputedStyle(parentElement).gridTemplateColumns, "50px 750px [last]");
assert_equals(getComputedStyle(parentElement).gridTemplateRows, "20px [middle] 45px");
element = document.createElement("div");
parentElement.appendChild(element);
element.style.display = "grid";
element.style.gridTemplateColumns = "inherit";
element.style.gridTemplateRows = "inherit";
assert_equals(getComputedStyle(element).gridTemplateColumns, "50px 0px [last]");
assert_equals(getComputedStyle(element).gridTemplateRows, "20px [middle] 45px");
document.body.removeChild(parentElement);
}, `Test setting grid-template-columns and grid-template-rows to 'inherit' through JS`);
}
function testInitial()
{
test(function(){
element = document.createElement("div");
document.body.appendChild(element);
element.style.display = "grid";
element.style.width = "800px";
element.style.height = "600px";
element.style.gridTemplateColumns = "150% [middle] 55px";
element.style.gridTemplateRows = "1fr [line] 2fr [line]";
assert_equals(getComputedStyle(element).gridTemplateColumns, "1200px [middle] 55px");
assert_equals(getComputedStyle(element).gridTemplateRows, "200px [line] 400px [line]");
element.style.gridTemplateColumns = "initial";
element.style.gridTemplateRows = "initial";
assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
assert_equals(getComputedStyle(element).gridTemplateRows, "none");
document.body.removeChild(element);
}, `Test setting grid-template-columns and grid-template-rows to 'initial' through JS`);
}
setup({ explicit_done: true });
document.fonts.ready.then(() => {
testGridDefinitionsValues("gridWithFixedElement", "7px 11px", "17px 2px");
testGridDefinitionsValues("gridWithPercentElement", "400px 800px", "150px 450px");
// This test failing in Firefox is caused by https://bugzilla.mozilla.org/show_bug.cgi?id=1481876
testGridDefinitionsValues("gridWithPercentWithoutSize", "3.5px 7px", "4px 12px");
testGridDefinitionsValues("gridWithAutoElement", "0px 17px", "0px 3px");
testGridDefinitionsValues("gridWithEMElement", "100px 120px", "150px 170px");
testGridDefinitionsValues("gridWithThreeItems", "15px 0px 100px", "120px 18px 0px");
testGridDefinitionsValues("gridWithFitContentAndFitAvailable", "none", "none");
testGridDefinitionsValues("gridWithMinMaxContent", "0px 0px", "0px 0px");
testGridDefinitionsValues("gridWithMinMaxContentWithChildrenElement", "7px 17px", "16px 3px");
testGridDefinitionsValues("gridWithMinMaxAndFixed", "240px 15px", "120px 210px");
testGridDefinitionsValues("gridWithMinMaxAndMinMaxContent", "240px 15px", "120px 210px");
testGridDefinitionsValues("gridWithFractionFraction", "320px 480px", "225px 375px");
testGridDefinitionsValues("gridWithFractionMinMax", "45px 755px", "586px 14px");
testGridDefinitionsValues("gridWithCalcCalc", "200px 100px", "150px 75px");
testGridDefinitionsValues("gridWithCalcAndFixed", "400px 80px", "88px 150px");
testGridDefinitionsValues("gridWithCalcAndMinMax", "190px 80px", "150px 53px");
testGridDefinitionsValues("gridWithCalcInsideMinMax", "400px 120px", "150px 175px");
testGridDefinitionsValues("gridWithAutoInsideMinMax", "0px 30px", "132px 60px");
testGridDefinitionsSetJSValues("18px 22px", "66px 70px");
testGridDefinitionsSetJSValues("55% 80%", "40% 63%", "440px 640px", "240px 378px");
testGridDefinitionsSetJSValues("auto auto", "auto auto", "0px 0px", "0px 0px");
testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "0px 160px 22px", "336px 100px 0px");
testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px 20px", "90px 0px");
testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px");
testGridDefinitionsSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)");
// This test failing in Chromium is caused by https://bugs.chromium.org/p/chromium/issues/detail?id=1050968
testGridDefinitionsSetJSValues("calc(25px + 40%) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto", "345px 92px", "100px 0px", "calc(40% + 25px) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto");
testWrongCSSValue();
testGridDefinitionsSetBadJSValues("none auto", "none auto");
testGridDefinitionsSetBadJSValues("none 16em", "none 56%");
testGridDefinitionsSetBadJSValues("none none", "none none");
testGridDefinitionsSetBadJSValues("auto none", "auto none");
testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none");
testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
// Negative values are not allowed.
testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");
testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw");
// Invalid expressions with calc
testGridDefinitionsSetBadJSValues("10px calc(16px 30px)", "calc(25px + auto) 2em");
testGridDefinitionsSetBadJSValues("minmax(min-content, calc() 250px", "calc(2em(");
testInherit();
testDefaultValue()
testInitial();
done();
});
</script>

386
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.html Normal file
View file

@ -0,0 +1,386 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=392200">
<link href="/css/support/grid.css" rel="stylesheet">
<link href="/css/support/alignment.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
<meta name="assert" content="Checks resolution of content sized grid columns and verifies that items are processed by ascending span to compute column breadths">
<style>
.grid {
font: 10px/1 Ahem;
}
.gridWidth300 {
width: 300px;
}
.gridMinContentFixedAndAuto {
grid-template-columns: minmax(min-content, 15px) auto;
}
.gridMaxContentFixedAndAuto {
grid-template-columns: minmax(max-content, 15px) auto;
}
.gridAutoAndAuto {
grid-template-columns: auto auto;
}
.gridMinContentAndMinContentFixed {
grid-template-columns: min-content minmax(min-content, 30px);
}
.gridMinContentAndMaxContentFixed {
grid-template-columns: min-content minmax(max-content, 30px);
}
.gridMaxContentAndMinContent {
grid-template-columns: max-content min-content;
}
.gridFixedMinContentAndMaxContent {
grid-template-columns: minmax(10px, min-content) max-content;
}
.gridFixedMaxContentAndMinContent {
grid-template-columns: minmax(10px, max-content) min-content;
}
.gridAutoMinContent {
grid-template-columns: auto min-content;
}
.gridAutoMaxContent {
grid-template-columns: auto max-content;
}
.gridMaxContentAndMinContentFixed {
grid-template-columns: max-content minmax(min-content, 35px);
}
.gridMaxContentAndMaxContentFixed {
grid-template-columns: max-content minmax(max-content, 35px);
}
.gridMinContentFixedAndFixedFixedAndAuto {
grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto;
}
.gridAutoAndFixedFixedAndMaxContentFixed {
grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px);
}
.gridMaxContentAndMaxContentFixedAndMaxContent {
grid-template-columns: max-content minmax(max-content, 20px) max-content;
}
.gridAutoAndMinContentFixedAndMinContent {
grid-template-columns: auto minmax(min-content, 30px) min-content;
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixed">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContent">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContent">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixed">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
</div>
<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
</div>
<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixed">
<div class="firstRowBothColumn">XXXX XXXX</div>
</div>
<!-- Check that items are processed by ascending span instead of going track by track forbidding extra space distribution. -->
<div class="constrainedContainer">
<div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsortedConstrained">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsortedConstrained">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsortedConstrained">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XX XX XX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsortedConstrained">
<div class="firstRowBothColumn">XXX XXX</div>
<div class="firstRowSecondColumn">XXXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsortedConstrained">
<div class="firstRowBothColumn">XXXXX XX</div>
<div class="firstRowSecondColumn">XXX</div>
<div class="firstRowSecondColumn">XXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsortedConstrained">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">X X</div>
<div class="firstRowSecondColumn">XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsortedConstrained">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsortedConstrained">
<div class="firstRowBothColumn">XX XX</div>
<div class="firstRowSecondColumn">XXXX</div>
<div class="firstRowSecondColumn">XXX XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoMinContent" id="gridAutoMinContentUnsortedConstrained">
<div class="firstRowBothColumn">XX XX XX XX</div>
<div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsortedConstrained">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XXX XXX</div>
<div class="firstRowSecondColumn">XXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsortedConstrained">
<div class="firstRowBothColumn">XXX XXX</div>
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsortedConstrained">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XX XX XX XX</div>
<div class="firstRowSecondColumn">XXXXXXX</div>
</div>
</div>
<!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. -->
<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoUnsorted">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
</div>
<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorted">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXX</div>
</div>
<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsorted">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XX XX XX XX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
</div>
<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsorted">
<div class="firstRowBothColumn">XXX XXX</div>
<div class="firstRowSecondColumn">XXXXXXX</div>
</div>
<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsorted">
<div class="firstRowBothColumn">XXXXX XX</div>
<div class="firstRowSecondColumn">XXX</div>
<div class="firstRowSecondColumn">XXXXX</div>
</div>
<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsorted">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">X X</div>
<div class="firstRowSecondColumn">XXXX</div>
</div>
<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsorted">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
</div>
<div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxContentFixedAndAutoUnsorted">
<div class="firstRowBothColumn">XX XX</div>
<div class="firstRowSecondColumn">XXXX</div>
<div class="firstRowSecondColumn">XXX XXX</div>
</div>
<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentUnsorted">
<div class="firstRowBothColumn">XX XX XX XX</div>
<div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
</div>
<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentUnsorted">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XXX XXX</div>
<div class="firstRowSecondColumn">XXXXX</div>
</div>
<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsorted">
<div class="firstRowBothColumn">XXX XXX</div>
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XXXX XXXX</div>
<div class="firstRowSecondColumn">XX</div>
</div>
<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsorted">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XX XX XX XX</div>
<div class="firstRowSecondColumn">XXXXXXX</div>
</div>
<!-- The next four force the grid to grow only a particular subset of tracks above the limits -->
<div class="constrainedContainer">
<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoAboveLimits">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XXXXXXXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoAboveLimits">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinContentFixedAndFixedFixedAndAuto" id="gridMinContentFixedAndFixedFixedAndAuto">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XXXXXXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFixedFixedAndMaxContentFixed">
<div class="firstRowBothColumn">XXXX XXXX</div>
<div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
</div>
</div>
<div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxContentAndMaxContentFixedAndMaxContent">
<div style="grid-row: 1; grid-column: 1;">X X X</div>
<div style="grid-row: 1; grid-column: 3;">X X</div>
<div style="grid-row: 1; grid-column: 1 / -1;">XX XX XX XX XX</div>
</div>
<div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent">
<div style="grid-row: 1; grid-column: 1;">XX</div>
<div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div>
<div style="grid-row: 1; grid-column: 3;">XXX XXX</div>
</div>
<script>
function testGridColumnsValues(id, computedColumnValue) {
test(function(){
var div = document.getElementById(id);
var readValue = getComputedStyle(div).gridTemplateColumns;
assert_equals(readValue, computedColumnValue);
}, `Element '${id}' grid-template-columns value computes to '${computedColumnValue}'`);
}
setup({ explicit_done: true });
document.fonts.ready.then(() => {
testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");
testGridColumnsValues("gridAutoAndAuto", "45px 45px");
testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");
testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px");
testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px");
testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px");
testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px");
testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px");
testGridColumnsValues("gridAutoMinContent", "70px 20px");
testGridColumnsValues("gridAutoMaxContent", "20px 70px");
testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px");
testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px");
// Check that items are processed by ascending span to compute track breadths forbidding extra space distribution.
testGridColumnsValues("gridMinContentFixedAndAutoUnsortedConstrained", "0px 40px");
testGridColumnsValues("gridAutoAndAutoUnsortedConstrained", "10px 30px");
testGridColumnsValues("gridMinContentAndMinContentFixedUnsortedConstrained", "0px 40px");
testGridColumnsValues("gridMaxContentAndMinContentUnsortedConstrained", "0px 70px");
testGridColumnsValues("gridFixedMinContentAndMaxContentUnsortedConstrained", "10px 70px");
testGridColumnsValues("gridFixedMaxContentAndMinContentUnsortedConstrained", "10px 40px");
testGridColumnsValues("gridMinContentAndMaxContentFixedUnsortedConstrained", "0px 90px");
testGridColumnsValues("gridMaxContentFixedAndAutoUnsortedConstrained", "10px 40px");
testGridColumnsValues("gridAutoMinContentUnsortedConstrained", "0px 60px");
testGridColumnsValues("gridAutoMaxContentUnsortedConstrained", "0px 90px");
testGridColumnsValues("gridMaxContentAndMinContentFixedUnsortedConstrained", "50px 40px");
testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsortedConstrained", "40px 70px");
// Check that items are processed by ascending span to compute track breadths allowing extra space distribution.
testGridColumnsValues("gridMinContentFixedAndAutoUnsorted", "15px 90px");
testGridColumnsValues("gridAutoAndAutoUnsorted", "60px 30px");
testGridColumnsValues("gridMinContentAndMinContentFixedUnsorted", "0px 40px");
testGridColumnsValues("gridMaxContentAndMinContentUnsorted", "0px 70px");
testGridColumnsValues("gridFixedMinContentAndMaxContentUnsorted", "10px 70px");
testGridColumnsValues("gridFixedMaxContentAndMinContentUnsorted", "50px 40px");
testGridColumnsValues("gridMinContentAndMaxContentFixedUnsorted", "0px 90px");
testGridColumnsValues("gridMaxContentFixedAndAutoUnsorted", "15px 70px");
testGridColumnsValues("gridAutoMinContentUnsorted", "50px 60px");
testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px");
testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px");
testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px");
// Check that only a subset of tracks grow above track limits.
testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");
testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px");
testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 60px");
testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px");
testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px");
testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 65px");
done();
});
</script>

48
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-row-invalid.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
<meta name="assert" content="Tests invalid values for grid-row"/>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_invalid_value("grid-row", "5 8");
test_invalid_value("grid-row", "5 /");
test_invalid_value("grid-row", "8 auto");
test_invalid_value("grid-row", "8 / /");
test_invalid_value("grid-row", "0 / 6");
test_invalid_value("grid-row", "8 / 0");
test_invalid_value("grid-row", "0");
test_invalid_value("grid-row", "span");
test_invalid_value("grid-row", "span / span");
test_invalid_value("grid-row", "span span / span span");
test_invalid_value("grid-row", "4 4 / 3 span");
test_invalid_value("grid-row", "first 4 last / 3 span");
test_invalid_value("grid-row", "4 / first 3 last");
test_invalid_value("grid-row", "first last / 3 span");
test_invalid_value("grid-row", "4 / first last");
test_invalid_value("grid-row", "span 4 4 / 3");
test_invalid_value("grid-row", "5 span 4 / 3");
test_invalid_value("grid-row", "span first last / 3");
test_invalid_value("grid-row", "3 / span first last");
test_invalid_value("grid-row", "span first last 7 / 3");
test_invalid_value("grid-row", "3 / span first 5 last");
test_invalid_value("grid-row", "1 span last 7 / 3");
test_invalid_value("grid-row", "3 / 5 span first 5");
test_invalid_value("grid-row", "-3 span / -4");
test_invalid_value("grid-row", "-3 / span -4");
test_invalid_value("grid-row", "span 0 / 0");
test_invalid_value("grid-row", "0 / 0 span");
test_invalid_value("grid-row", "last -2 span / 1 nav");
test_invalid_value("grid-row", "2 span first / last");
test_invalid_value("grid-row", "5 nav / last span 7");
test_invalid_value("grid-row", "5 / 3 span 3");
</script>
</body>
</html>

32
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-row-shortest-serialization.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"/>
<meta name="assert" content="grid-row computed value should be the shortest serialization possible"/>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("grid-row", "auto / auto", "auto");
test_computed_value("grid-row", "auto", "auto");
test_computed_value("grid-row", "10 / auto", "10");
test_computed_value("grid-row", "10");
test_computed_value("grid-row", "-10 / auto", "-10");
test_computed_value("grid-row", "-10");
test_computed_value("grid-row", "span 2 / auto", "span 2");
test_computed_value("grid-row", "span 2");
test_computed_value("grid-row", "3 last / auto", "3 last");
test_computed_value("grid-row", "3 last");
test_computed_value("grid-row", "span first / auto", "span first");
test_computed_value("grid-row", "span first");
test_computed_value("grid-row", "span 2 first / auto", "span 2 first");
test_computed_value("grid-row", "span 2 first");
test_computed_value("grid-row", "last / last", "last");
</script>
</body>
</html>

87
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-row-shorthand.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
<meta name="assert" content="grid-row should set values for grid-row-start and grid-row-end">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
test_shorthand_value("grid-row", "auto / auto", {
"grid-row-start": "auto",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "auto", {
"grid-row-start": "auto",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "10 / auto", {
"grid-row-start": "10",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "10", {
"grid-row-start": "10",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "-10 / auto", {
"grid-row-start": "-10",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "-10", {
"grid-row-start": "-10",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "span 2 / auto", {
"grid-row-start": "span 2",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "span 2", {
"grid-row-start": "span 2",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "3 last / auto", {
"grid-row-start": "3 last",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "3 last", {
"grid-row-start": "3 last",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "span first / auto", {
"grid-row-start": "span first",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "span first", {
"grid-row-start": "span first",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "span 2 first / auto", {
"grid-row-start": "span 2 first",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "span 2 first", {
"grid-row-start": "span 2 first",
"grid-row-end": "auto"
});
test_shorthand_value("grid-row", "last / last", {
"grid-row-start": "last",
"grid-row-end": "last"
});
test_shorthand_value("grid-row", "last", {
"grid-row-start": "last",
"grid-row-end": "last"
});
</script>
</body>
</html>

54
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-shorthand-invalid.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing 'grid' with invalid values</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
<meta name="assert" content="grid-template supports only the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("grid", 'none none');
test_invalid_value("grid", 'none []');
test_invalid_value("grid", '10px');
test_invalid_value("grid", '20%');
test_invalid_value("grid", '5fr');
test_invalid_value("grid", '[a]');
test_invalid_value("grid", '[a] 10px');
test_invalid_value("grid", '[a] 10px []');
test_invalid_value("grid", '[]');
test_invalid_value("grid", '10px "a"');
test_invalid_value("grid", '[] 10px "a"');
test_invalid_value("grid", '10px [] "a"');
test_invalid_value("grid", '[] [] "a"');
test_invalid_value("grid", '"a" none');
test_invalid_value("grid", '"a" 10px 10px');
test_invalid_value("grid", '"a" [a] 10px');
test_invalid_value("grid", '"a" [a] 10px [a]');
test_invalid_value("grid", '"a" [a] [a] 10px');
test_invalid_value("grid", '"a" 10px [a] [a]');
test_invalid_value("grid", '"a" [a] [a]');
test_invalid_value("grid", '[a] "a" [a] [a]');
test_invalid_value("grid", '"a" "a" [a] [a]');
test_invalid_value("grid", '"a" [a] [a] / none');
test_invalid_value("grid", '"a" "a" [a] [a] / none');
test_invalid_value("grid", 'none / "a"');
test_invalid_value("grid", '"a" / none');
test_invalid_value("grid", 'none / [] "a"');
test_invalid_value("grid", 'none / "a" []');
test_invalid_value("grid", 'none / "a" [] 10px');
test_invalid_value("grid", 'auto-flow 100px');
test_invalid_value("grid", 'auto-flow / auto-flow');
test_invalid_value("grid", 'auto-flow 1fr / auto-flow 1fr');
test_invalid_value("grid", 'dense auto-flow / dense auto-flow');
test_invalid_value("grid", 'auto / auto-flow foo()');
// FIXME: add more values to test full syntax
</script>
</body>
</html>

267
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.html Normal file
View file

@ -0,0 +1,267 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: only serialize 'grid' when the value can roundtrip</title>
<link rel="author" title="Daniel Libby" href="mailto:dlibby@microsoft.com">
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
<meta name="assert" content="grid shorthand must not serialize when the value cannot roundtrip.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<script>
function test_shorthand_roundtrip(cssText, properties, declarations) {
var div = document.createElement('div');
div.style.cssText = cssText;
for (let property of Object.keys(properties).sort()) {
test(function(){
const readValue = div.style[property];
if (Array.isArray(properties[property])) {
assert_in_array(readValue, properties[property], property + " serialization should be sound");
} else {
assert_equals(readValue, properties[property], property + " serialization should be canonical");
}
if (readValue != "") {
div.style[property] = "";
div.style[property] = readValue;
assert_equals(div.style[property], readValue, "serialization should round-trip");
}
}, "e.style.cssText = " + cssText + " should set " + property);
}
if (declarations) {
let cssTextSerialization = div.style.cssText;
declarations.forEach(decl => {
test(function(){
assert_true(cssTextSerialization.indexOf(decl) !== -1,
`cssText serialization ('${cssTextSerialization}') must contain contain '${decl}'`);
}, `cssText ('${cssText}') must contain '${decl}' in its serialization`);
});
}
}
test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px',
{
'grid': 'none / 100px 100px',
'grid-template-areas': 'none'
});
test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four"',
{
'grid': '',
'grid-template-areas': '"one two" "three four"',
'grid-auto-flow': 'row',
'grid-auto-rows': 'auto'
});
test_shorthand_roundtrip('grid: 30px 40px / 50px 60px; grid-auto-flow: column',
{
'grid': '',
'grid-template': '30px 40px / 50px 60px',
'grid-auto-flow': 'column',
}, [
'grid-template: 30px 40px / 50px 60px;',
'grid-auto-rows: auto;',
'grid-auto-columns: auto;',
'grid-auto-flow: column;'
]);
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: 20px',
{
'grid': '20px / 10px',
'grid-template': '20px / 10px'
}, [
'grid: 20px / 10px;'
]);
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px)',
{
'grid': 'repeat(2, 20px) / 10px',
'grid-template-rows': 'repeat(2, 20px)'
});
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px) repeat(3, 30px)',
{
'grid': 'repeat(2, 20px) repeat(3, 30px) / 10px',
'grid-template-rows': 'repeat(2, 20px) repeat(3, 30px)'
});
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(auto-fill, 20px)',
{
'grid': 'repeat(auto-fill, 20px) / 10px',
'grid-template-rows': 'repeat(auto-fill, 20px)'
});
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(auto-fit, 20px)',
{
'grid': 'repeat(auto-fit, 20px) / 10px',
'grid-template-rows': 'repeat(auto-fit, 20px)'
});
test_shorthand_roundtrip('grid: 10px / auto; grid-template-columns: 20px',
{
'grid': '10px / 20px',
'grid-template': '10px / 20px'
}, [
'grid: 10px / 20px;'
]);
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px)',
{
'grid': 'none / repeat(2, 20px)',
'grid-template-columns': 'repeat(2, 20px)'
});
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px) repeat(3, 30px)',
{
'grid': 'none / repeat(2, 20px) repeat(3, 30px)',
'grid-template-columns': 'repeat(2, 20px) repeat(3, 30px)'
});
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(auto-fill, 20px)',
{
'grid': 'none / repeat(auto-fill, 20px)',
'grid-template-columns': 'repeat(auto-fill, 20px)'
});
test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(auto-fit, 20px)',
{
'grid': 'none / repeat(auto-fit, 20px)',
'grid-template-columns': 'repeat(auto-fit, 20px)'
});
test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-flow: inherit', { 'grid': '' });
test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-flow: row', { 'grid': '1px / 2px' });
test_shorthand_roundtrip('grid: none / 2px; grid-auto-flow: row', { 'grid': 'none / 2px' });
test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-columns: auto', { 'grid': '1px / 2px' });
test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-rows: auto', { 'grid': '1px / 2px' });
test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: auto', { 'grid': '1px / auto-flow 2px' });
test_shorthand_roundtrip('grid: 1px / auto-flow; grid-auto-columns: auto', { 'grid': '1px / auto-flow' });
test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / 2px' });
test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / none' });
test_shorthand_roundtrip('grid: auto-flow dense / 2px; grid-auto-rows: auto', { 'grid': 'auto-flow dense / 2px' });
test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: 3px',
{
'grid': '',
'grid-auto-columns': '3px',
'grid-auto-rows': '1px',
'grid-auto-flow': 'row',
'grid-template-columns': '2px',
'grid-template-rows': 'none'
});
test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: 3px',
{
'grid': '',
'grid-auto-columns': '2px',
'grid-auto-rows': '3px',
'grid-auto-flow': 'column',
'grid-template-columns': 'none',
'grid-template-rows': '1px'
});
test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: 3px',
{
'grid': '',
'grid-auto-columns': '1px',
'grid-auto-rows': 'auto',
'grid-auto-flow': 'column',
'grid-template-columns': '3px',
'grid-template-rows': 'none'
});
test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px)',
{
'grid': '',
'grid-auto-columns': '1px',
'grid-auto-rows': 'auto',
'grid-auto-flow': 'column',
'grid-template-columns': 'repeat(2, 3px)',
'grid-template-rows': 'none'
});
test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px)',
{
'grid': '',
'grid-auto-columns': '1px',
'grid-auto-rows': 'auto',
'grid-auto-flow': 'column',
'grid-template-columns': 'repeat(auto-fill, 3px)',
'grid-template-rows': 'none'
});
test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px)',
{
'grid': '',
'grid-auto-columns': '1px',
'grid-auto-rows': 'auto',
'grid-auto-flow': 'column',
'grid-template-columns': 'repeat(auto-fit, 3px)',
'grid-template-rows': 'none'
});
test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: 3px',
{
'grid': '',
'grid-auto-columns': 'auto',
'grid-auto-rows': '1px',
'grid-auto-flow': 'row',
'grid-template-columns': 'none',
'grid-template-rows': '3px'
});
test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px)',
{
'grid': '',
'grid-auto-columns': 'auto',
'grid-auto-rows': '1px',
'grid-auto-flow': 'row',
'grid-template-columns': 'none',
'grid-template-rows': 'repeat(2, 3px)'
});
test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px)',
{
'grid': '',
'grid-auto-columns': 'auto',
'grid-auto-rows': '1px',
'grid-auto-flow': 'row',
'grid-template-columns': 'none',
'grid-template-rows': 'repeat(auto-fill, 3px)'
});
test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px)',
{
'grid': '',
'grid-auto-columns': 'auto',
'grid-auto-rows': '1px',
'grid-auto-flow': 'row',
'grid-template-columns': 'none',
'grid-template-rows': 'repeat(auto-fit, 3px)'
});
test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four"',
{
'grid': '',
'grid-template-areas': '"one two" "three four"',
'grid-template-rows': 'auto auto',
'grid-template-columns': 'repeat(2, 3px)'
});
test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four"',
{
'grid': '',
'grid-template-areas': '"one two" "three four"',
'grid-template-rows': 'auto auto',
'grid-template-columns': 'repeat(2, 1fr)'
});
test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four"',
{
'grid': '',
'grid-template-areas': '"one two" "three four"',
'grid-template-rows': 'auto auto',
'grid-template-columns': 'repeat(auto-fill, 3px)'
});
test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four"',
{
'grid': '',
'grid-template-areas': '"one two" "three four"',
'grid-template-rows': 'auto auto',
'grid-template-columns': 'repeat(auto-fit, 3px)'
});
</script>

71
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-shorthand-valid.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing 'grid' with valid values</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
<meta name="assert" content="grid-template supports the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <'grid-template'> values
test_valid_value("grid", 'none');
test_valid_value("grid", 'none / none', 'none');
test_valid_value("grid", 'auto / auto');
test_valid_value("grid", 'none / [a] 0px');
test_valid_value("grid", 'none / [] 0px', 'none / 0px');
test_valid_value("grid", '[a] 10px / auto');
test_valid_value("grid", '[a] 10px / none');
test_valid_value("grid", '[] 10px [] / [] auto []', '10px / auto');
test_valid_value("grid", '[a] "a" 10px');
test_valid_value("grid", '[a] "a" 10px []', '[a] "a" 10px');
test_valid_value("grid", '"a" 10px');
test_valid_value("grid", '[] "a" 10px', '"a" 10px');
test_valid_value("grid", '[a] "a" 10px [a]');
test_valid_value("grid", '"a"');
test_valid_value("grid", '"a" auto', '"a"');
test_valid_value("grid", '"a a a"', '"a a a"');
test_valid_value("grid", '"a" / 10px');
test_valid_value("grid", '"a" / 20%');
test_valid_value("grid", '"a" / 5fr');
test_valid_value("grid", '[a] "a"');
test_valid_value("grid", '[a] "a" [a]');
test_valid_value("grid", '[] "a"', '"a"');
test_valid_value("grid", '"a" [] [] "b"', '"a" "b"');
test_valid_value("grid", '"a" [] "b"', '"a" "b"');
test_valid_value("grid", '"a" [a] [b] "b"', '"a" [a b] "b"');
test_valid_value("grid", '"a" [a] "b"');
test_valid_value("grid", '"a" / 0', '"a" / 0px');
test_valid_value("grid", '"a" 10px / 10px');
test_valid_value("grid", '"a" [a] "b" 10px');
test_valid_value("grid", '"a" [a] "b" 10px [a]');
test_valid_value("grid", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px');
test_valid_value("grid", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px');
test_valid_value("grid", '"a" 10px [a] "b" [a]');
test_valid_value("grid", '"a" [a] "b" [a]');
test_valid_value("grid", '[a] "a" [a] "b" [a]');
test_valid_value("grid", '"a" "a" [a] "b" [a]');
test_valid_value("grid", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px');
test_valid_value("grid", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto');
test_valid_value("grid", '100px / auto-flow dense 100px');
test_valid_value("grid", 'auto-flow dense 1fr / 100px');
test_valid_value("grid", '100px / dense auto-flow 100px', '100px / auto-flow dense 100px');
test_valid_value("grid", 'dense auto-flow 1fr / 100px', 'auto-flow dense 1fr / 100px');
test_valid_value("grid", '100px / auto-flow 100px');
test_valid_value("grid", 'auto-flow 1fr / 100px');
test_valid_value("grid", 'none / auto-flow 100px');
test_valid_value("grid", 'auto-flow 1fr / none');
test_valid_value("grid", 'auto / auto-flow 100px');
test_valid_value("grid", 'auto-flow 1fr / auto');
test_valid_value("grid", '1fr / 1fr');
// FIXME: add more values to test full syntax
</script>
</body>
</html>

126
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-shorthand.html Normal file
View file

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid sets longhands</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-shorthand">
<meta name="assert" content="grid supports the full grammar '<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
// <grid-template>
test_shorthand_value('grid', 'none', {
'grid-template-rows': 'none',
'grid-template-columns': 'none',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_shorthand_value('grid', '10px / 20%', {
'grid-template-rows': '10px',
'grid-template-columns': '20%',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
// This could theoretically be serialized as "auto-flow / 10px",
// but spec mandates the 'grid-template-*' form when the
// 'grid-auto-*' properties are all initial.
test_shorthand_value('grid', 'none / 10px', {
'grid-template-rows': 'none',
'grid-template-columns': '10px',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_shorthand_value('grid', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_shorthand_value('grid',
'[header-top] "a a a" [header-bottom]' +
' [main-top] "b b b" 1fr [main-bottom]' +
' / auto 1fr auto', {
'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_shorthand_value('grid',
' "a a a"' +
' "b b b" 1fr' +
'/ auto 1fr auto', {
'grid-template-rows': 'auto 1fr',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
test_shorthand_value('grid',
' [] "a a a" []' +
' [] "b b b" 1fr []' +
' / [] auto 1fr [] auto []', {
'grid-template-rows': 'auto 1fr',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"',
'grid-auto-rows': 'auto',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'row'
});
// <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
test_shorthand_value('grid',
'10px' +
' / auto-flow dense' +
' 20px', {
'grid-template-rows': '10px',
'grid-template-columns': 'none',
'grid-template-areas': 'none',
'grid-auto-rows': 'auto',
'grid-auto-columns': '20px',
'grid-auto-flow': 'column dense'
});
// [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
test_shorthand_value('grid',
'auto-flow dense' +
' 30px /' +
' 40px', {
'grid-template-rows': 'none',
'grid-template-columns': '40px',
'grid-template-areas': 'none',
'grid-auto-rows': '30px',
'grid-auto-columns': 'auto',
'grid-auto-flow': 'dense'
});
</script>
</body>
</html>

27
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-areas-computed.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateAreas</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("grid-template-areas", "none");
test_computed_value("grid-template-areas", '"first"');
test_computed_value("grid-template-areas", '"first second"');
test_computed_value("grid-template-areas", '"1st 2nd 3rd"');
test_computed_value("grid-template-areas", '"first second" "third fourth"');
test_computed_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"');
// https://github.com/w3c/csswg-drafts/issues/3261
test_computed_value("grid-template-areas", '" a \t b "', '"a b"');
test_computed_value("grid-template-areas", '"c\td"', '"c d"');
test_computed_value("grid-template-areas", '"first ..."', '"first ."');
</script>
</body>
</html>

28
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-areas-invalid.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template-areas with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
<meta name="assert" content="grid-template-areas supports only the grammar 'none | <string>+'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("grid-template-areas", "auto");
test_invalid_value("grid-template-areas", 'none "first"');
test_invalid_value("grid-template-areas", '"first" none');
test_invalid_value("grid-template-areas", '""');
test_invalid_value("grid-template-areas", '" "');
test_invalid_value("grid-template-areas", '"." ""');
test_invalid_value("grid-template-areas", '"." " "');
test_invalid_value("grid-template-areas", '"first" ""');
test_invalid_value("grid-template-areas", '"first" "" "second"');
test_invalid_value("grid-template-areas", '"first" " "');
test_invalid_value("grid-template-areas", '"" none');
</script>
</body>
</html>

34
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-areas-one-cell.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<title>grid-template-areas must define at least one cell</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/">
<link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-template-areas-property">
<meta name=assert content="grid-template-areas must define at least one cell to be valid.">
<script>
function testValidGta(val) {
test(()=>{
const root = document.children[0];
root.style.gridTemplateAreas = "";
root.style.gridTemplateAreas = val;
assert_not_equals(root.style.gridTemplateAreas, "");
}, `"grid-template-areas: ${val};" should be valid.`);
}
function testInvalidGta(val) {
test(()=>{
const root = document.children[0];
root.style.gridTemplateAreas = "";
root.style.gridTemplateAreas = val;
assert_equals(root.style.gridTemplateAreas, "");
}, `"grid-template-areas: ${val};" should be invalid.`);
}
testValidGta("'a'");
testValidGta("'.'");
testInvalidGta("''");
testInvalidGta("'' ''");
testInvalidGta("'$'");
testInvalidGta("' '");
</script>

28
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-areas-valid.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template-areas with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
<meta name="assert" content="grid-template-areas supports the full grammar 'none | <string>+'.">
<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("grid-template-areas", "none");
test_valid_value("grid-template-areas", '"first"');
test_valid_value("grid-template-areas", '"first second"');
test_valid_value("grid-template-areas", '"1st 2nd 3rd"');
test_valid_value("grid-template-areas", '"first second" "third fourth"');
test_valid_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"');
// https://github.com/w3c/csswg-drafts/issues/3261
test_valid_value("grid-template-areas", '" a \t b "', '"a b"');
test_valid_value("grid-template-areas", '"c\td"', '"c d"');
test_valid_value("grid-template-areas", '"first ..."', '"first ."');
</script>
</body>
</html>

59
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container with a leading implicit track.">
<style>
#target {
display: grid;
width: 1px;
font-size: 1px;
}
#item {
grid-column: auto / 1;
width: 10px;
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id="target">
<div id="item"></div>
</div>
<script>
// Can't use the test_computed_value from computed-testcommon.js
// because grid-template-columns doesn't round-trip in this test.
function grid_template_columns(specified, computed) {
test(() => {
const target = document.getElementById('target');
target.style.gridTemplateColumns = '';
target.style.gridTemplateColumns = specified;
assert_equals(getComputedStyle(target).gridTemplateColumns, computed);
}, `Property grid-template-columns value '${specified}' computes to '${computed}'`);
}
grid_template_columns("none", "10px");
grid_template_columns("1px", "10px 1px");
grid_template_columns("1px [a]", "10px 1px [a]");
grid_template_columns("1px [a] 2px", "10px 1px [a] 2px");
grid_template_columns("[a] 1px", "10px [a] 1px");
grid_template_columns("[a] 1px [b]", "10px [a] 1px [b]");
grid_template_columns("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
grid_template_columns("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
grid_template_columns("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
grid_template_columns("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
grid_template_columns("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
grid_template_columns("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
grid_template_columns("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
grid_template_columns("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
grid_template_columns("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
grid_template_columns("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_columns("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_columns("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
grid_template_columns("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
grid_template_columns("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
grid_template_columns("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
grid_template_columns("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_columns("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_columns("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
</script>

51
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-columns-computed-nogrid.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
<meta name="assert" content="Checks the resolved value of grid-template-columns on an element which is not a grid container.">
<style>
#target {
display: block;
height: 1px;
font-size: 1px;
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<div id="target"></div>
<script>
test_computed_value("grid-template-columns", "none");
test_computed_value("grid-template-columns", "1px");
test_computed_value("grid-template-columns", "1px [a]");
test_computed_value("grid-template-columns", "1px [a] 2px");
test_computed_value("grid-template-columns", "[a] 1px");
test_computed_value("grid-template-columns", "[a] 1px [b]");
test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px");
test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px");
test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px");
test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px");
test_computed_value("grid-template-columns", "1px [a] repeat(2, 2px 3px) [b] 4px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");
test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-columns", "[a] 1px 4px [d]");
test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) [d] 4px");
test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%");
test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%");
test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%");
test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-columns", "repeat(1, 2px [a] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%");
test_computed_value("grid-template-columns", "[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px) [e] 300%");
test_computed_value("grid-template-columns", "repeat(1, [a] 2px [b] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%");
test_computed_value("grid-template-columns", "[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px [e]) [f] 300%");
test_computed_value("grid-template-columns", "[a] 1px [b c] repeat(auto-fill, [d] 200% [e f]) [g] 2px repeat(1, 3px [d e] 4px [e f]) [g] 300% [h]");
</script>

99
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-columns-computed-withcontent.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<style>
#target {
display: grid;
font-size: 40px;
min-width: 200px;
width: 300px;
max-width: 400px;
min-height: 500px;
height: 600px;
max-height: 700px;
}
#child {
min-width: 20px;
width: 30px;
max-width: 40px;
min-height: 50px;
height: 60px;
max-height: 70px;
}
</style>
</head>
<body>
<div id="container">
<div id="target">
<div id="child"></div>
</div>
</div>
<script>
test_computed_value("grid-template-columns", 'none', '300px'); // "none" without #child
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width
test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px');
test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px');
test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px
test_computed_value("grid-template-columns", '5fr', '300px'); // width
test_computed_value("grid-template-columns", 'min-content', '30px');
test_computed_value("grid-template-columns", 'max-content', '30px');
test_computed_value("grid-template-columns", 'auto', '300px'); // width
// track-size minmax( <inflexible-breadth> , <track-breadth> )
test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width
test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width
test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px');
test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px');
// track-size fit-content( <length-percentage> )
test_computed_value("grid-template-columns", 'fit-content(70px)', '30px');
test_computed_value("grid-template-columns", 'fit-content(20%)', '30px');
test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px');
// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px');
test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px');
test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px');
test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
'30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))',
'30px 54px 54px 54px 54px 54px');
test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px');
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px');
test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)',
'[one] 60px [one] 0px [one] 0px [one] 0px [one] 0px');
test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
'100px [two] 100px [two] 100px [two]');
test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
'[three] 240px [four]');
test_computed_value('grid-template-columns', '[a] 21px [b] repeat(auto-fill, [c] 22px [d] 23px [e]) [f] 24px [g]',
'[a] 21px [b c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e f] 24px [g]');
test_computed_value('grid-template-columns', '[a] 21px [b c] repeat(auto-fill, [d e] 22px [f g h] 23px [i j k l]) [m n] 24px [o]',
'[a] 21px [b c d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l m n] 24px [o]');
test_computed_value('grid-template-columns', '[a] repeat(2, [b] 20px [c d] 21px [e f g]) [h i] repeat(auto-fit, [j] 22px [k l m] 23px [n o p q]) [r s]',
'[a b] 20px [c d] 21px [e f g b] 20px [c d] 21px [e f g h i j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q r s]');
// <auto-track-list> =
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
// <auto-repeat>
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
'[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]');
</script>
</body>
</html>

43
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-columns-computed.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container.">
<style>
#target {
display: grid;
width: 1px;
font-size: 1px;
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<div id="target"></div>
<script>
test_computed_value("grid-template-columns", "none");
test_computed_value("grid-template-columns", "1px");
test_computed_value("grid-template-columns", "1px [a]");
test_computed_value("grid-template-columns", "1px [a] 2px");
test_computed_value("grid-template-columns", "[a] 1px");
test_computed_value("grid-template-columns", "[a] 1px [b]");
test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px", "1px 2px 3px");
test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");
test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]");
test_computed_value("grid-template-columns", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-columns", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-columns", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px");
test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]");
</script>

31
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-columns-invalid.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template-columns with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
<meta name="assert" content="grid-template-columns supports only the grammar 'none | <track-list> | <auto-track-list>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("grid-template-columns", '-10px');
test_invalid_value("grid-template-columns", '-20%');
test_invalid_value("grid-template-columns", '-5fr');
test_invalid_value("grid-template-columns", 'minmax(5fr, calc(0.5em + 10px))');
test_invalid_value("grid-template-columns", 'minmax(-10px, auto)');
test_invalid_value("grid-template-columns", 'minmax(-20%, max-content)');
test_invalid_value("grid-template-columns", 'minmax(min-content, -20%)');
test_invalid_value("grid-template-columns", 'fit-content(-10px)');
test_invalid_value("grid-template-columns", 'fit-content(-20%)');
test_invalid_value("grid-template-columns", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]');
test_invalid_value("grid-template-columns", '[one]');
test_invalid_value("grid-template-columns", '[one] 10px [two] [three]');
test_invalid_value("grid-template-columns", 'repeat(auto-fill, -10px)');
test_invalid_value("grid-template-columns", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)');
test_invalid_value("grid-template-columns", '[auto] 1px');
</script>
</body>
</html>

80
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-columns-valid.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template-columns with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
<meta name="assert" content="grid-template-columns supports the full grammar 'none | <track-list> | <auto-track-list>'.">
<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("grid-template-columns", "none");
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_valid_value("grid-template-columns", '10px');
test_valid_value("grid-template-columns", '20%');
test_valid_value("grid-template-columns", 'calc(-0.5em + 10px)');
test_valid_value("grid-template-columns", 'calc(0.5em + 10px)');
test_valid_value("grid-template-columns", 'calc(30% + 40vw)');
test_valid_value("grid-template-columns", '5fr');
test_valid_value("grid-template-columns", 'min-content');
test_valid_value("grid-template-columns", 'max-content');
test_valid_value("grid-template-columns", 'auto');
// track-size minmax( <inflexible-breadth> , <track-breadth> )
test_valid_value("grid-template-columns", 'minmax(10px, auto)');
test_valid_value("grid-template-columns", 'minmax(20%, max-content)');
test_valid_value("grid-template-columns", 'minmax(calc(-0.5em + 10px), min-content)');
test_valid_value("grid-template-columns", 'minmax(calc(0.5em + 10px), 5fr)');
test_valid_value("grid-template-columns", 'minmax(calc(30% + 40vw), 10px)');
test_valid_value("grid-template-columns", 'minmax(min-content, 20%)');
test_valid_value("grid-template-columns", 'minmax(max-content, calc(-0.5em + 10px))');
test_valid_value("grid-template-columns", 'minmax(auto, calc(0.5em + 10px))');
// track-size fit-content( <length-percentage> )
test_valid_value("grid-template-columns", 'fit-content(10px)');
test_valid_value("grid-template-columns", 'fit-content(20%)');
test_valid_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))');
test_valid_value("grid-template-columns", 'fit-content(calc(0.5em + 10px))');
test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))');
// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
// 'repeat(1, [] 10px)' in Blink
// 'repeat(1, 10px)' in Firefox
// '[] 10px' in Safari
// '10px' in Edge 18
test_valid_value("grid-template-columns", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
// 'repeat(1, [one two] 20%)' in Blink, Firefox
// '[one two] 20%' in Safari, Edge 18
test_valid_value("grid-template-columns", 'repeat(1, [one two] 20%)');
// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18
// 'minmax(10px, auto) minmax(10px, auto)' in Safari
test_valid_value("grid-template-columns", 'repeat(2, minmax(10px, auto))');
test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])');
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))');
test_valid_value("grid-template-columns", '[] 150px [] 1fr []', '150px 1fr');
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)');
test_valid_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)');
test_valid_value("grid-template-columns", 'repeat(auto-fill, minmax(30px, 5fr) [two])');
test_valid_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])');
// <auto-track-list> =
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
// <auto-repeat>
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
test_valid_value("grid-template-columns", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]');
</script>
</body>
</html>

16
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-important.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>CSS Grid Layout Test: grid-template followed by !important</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#div {
grid-template: "test" max-content / max-content !important;
}
</style>
<div id=div></div>
<script>
test(() => {
assert_equals(getComputedStyle(div).gridTemplate, '"test" max-content / max-content');
}, 'grid-template followed by !important');
</script>

25
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-node-not-connected.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=261421">
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<meta name="assert" content="test should not crash and grid-template for child should be the empty string after disconnecting the element">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<style>
#child {
grid-template: 10px / 10px;
}
</style>
<div>
<div id="child"></div>
</div>
<script>
test(() => {
let styleDeclaration = window.getComputedStyle(document.getElementById("child"));
document.querySelector("body > div:nth-child(1)").textContent = "";
assert_equals(styleDeclaration.gridTemplate, "");
});
</script>
</html>

57
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<script src="../../../css/css-grid/support/grid-child-utils.js"></script>
<style>
#target {
display: grid;
width: 32px;
height: 10px;
};
</style>
</head>
<body>
<div id="container">
<div id="target">
<div></div>
<div></div>
<div id="child"></div>
<div style="grid-column: 7"></div>
<div></div>
</div>
</div>
<script>
let autoFitTester = new GridChildHelper(gridChildHelperCol,
"[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ");
let autoFillTester = new GridChildHelper(gridChildHelperCol,
"[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ");
// Auto-fit
autoFitTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
autoFitTester.runTest(4, "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
autoFitTester.runTest(5, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
autoFitTester.runTest(6, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 0px [g] 4px [h i] 5px [k] 6px [l m]");
autoFitTester.runTest("4 / 5", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
autoFitTester.runTest("4 / 6", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
autoFitTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
// Auto-fill. These tests are semi-redundant, but should still pass.
autoFillTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
autoFillTester.runTest(4, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
autoFillTester.runTest(5, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
autoFillTester.runTest("4 / 7", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
autoFillTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
</script>
</body>
</html>

85
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<script src="../../../css/css-grid/support/grid-child-utils.js"></script>
<style>
#target {
display: grid;
width: 54px;
height: 32px;
};
</style>
</head>
<body>
<div id="container">
<div id="target">
<div></div>
<div></div>
<div style="grid-column: 4"></div>
<div id="child"></div>
<div style="grid-column: 10"></div>
<div></div>
</div>
</div>
<script>
// Style with 3 repeat tracks.
let style3 =
"[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]";
let col3Tester = new GridChildHelper(gridChildHelperCol, style3);
let rowTester = new GridChildHelper(gridChildHelperRow, style3);
// Style with 2 repeat tracks.
let style2 =
"[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]";
let col2Tester = new GridChildHelper(gridChildHelperCol, style2);
rowTester.runTest(3,
"[a] 1px [b] 2px [c d e f] 3px [g] 0px [h] 0px [i j k] 7px [k] 8px [l m]");
rowTester.runTest(5,
"[a] 1px [b] 2px [c d e f] 0px [g] 0px [h] 5px [i j k] 7px [k] 8px [l m]");
rowTester.runTest("3 / 8",
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
rowTester.runTest("4 / span 2",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
rowTester.runTest("4 / 5",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j k] 7px [k] 8px [l m]");
col3Tester.runTest(3,
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
col3Tester.runTest(6,
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
col3Tester.runTest("3 / 8",
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
col3Tester.runTest("5 / span 2",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
col3Tester.runTest("7 / span 2",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
col3Tester.runTest("5 / 8",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
col3Tester.runTest("8 / 10",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 5px [i j e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
col2Tester.runTest(3,
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
col2Tester.runTest(6,
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
col2Tester.runTest("3 / 8",
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
col2Tester.runTest("6 / span 2",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
col2Tester.runTest("5 / 10",
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
</script>
</body>
</html>

59
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container with a leading implicit track.">
<style>
#target {
display: grid;
height: 1px;
font-size: 1px;
}
#item {
grid-row: auto / 1;
height: 10px;
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id="target">
<div id="item"></div>
</div>
<script>
// Can't use the test_computed_value from computed-testcommon.js
// because grid-template-rows doesn't round-trip in this test.
function grid_template_rows(specified, computed) {
test(() => {
const target = document.getElementById('target');
target.style.gridTemplateRows = '';
target.style.gridTemplateRows = specified;
assert_equals(getComputedStyle(target).gridTemplateRows, computed);
}, `Property grid-template-rows value '${specified}' computes to '${computed}'`);
}
grid_template_rows("none", "10px");
grid_template_rows("1px", "10px 1px");
grid_template_rows("1px [a]", "10px 1px [a]");
grid_template_rows("1px [a] 2px", "10px 1px [a] 2px");
grid_template_rows("[a] 1px", "10px [a] 1px");
grid_template_rows("[a] 1px [b]", "10px [a] 1px [b]");
grid_template_rows("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
grid_template_rows("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
grid_template_rows("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
grid_template_rows("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
grid_template_rows("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
grid_template_rows("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
grid_template_rows("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
grid_template_rows("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
grid_template_rows("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
grid_template_rows("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_rows("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_rows("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
grid_template_rows("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
grid_template_rows("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
grid_template_rows("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
grid_template_rows("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_rows("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
grid_template_rows("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
</script>

43
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-rows-computed-nogrid.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
<meta name="assert" content="Checks the resolved value of grid-template-rows on an element which is not a grid container.">
<style>
#target {
display: block;
height: 1px;
font-size: 1px;
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<div id="target"></div>
<script>
test_computed_value("grid-template-rows", "none");
test_computed_value("grid-template-rows", "1px");
test_computed_value("grid-template-rows", "1px [a]");
test_computed_value("grid-template-rows", "1px [a] 2px");
test_computed_value("grid-template-rows", "[a] 1px");
test_computed_value("grid-template-rows", "[a] 1px [b]");
test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px");
test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px");
test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px");
test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");
test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%");
test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%");
test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%");
test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
</script>

93
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-rows-computed-withcontent.html Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
<meta name="assert" content="grid-template-rows computed value is the keyword none or a computed track list.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<style>
#target {
display: grid;
font-size: 40px;
min-width: 200px;
width: 300px;
max-width: 400px;
min-height: 500px;
height: 600px;
max-height: 700px;
}
#child {
min-width: 20px;
width: 30px;
max-width: 40px;
min-height: 50px;
height: 60px;
max-height: 70px;
}
</style>
</head>
<body>
<div id="container">
<div id="target">
<div id="child"></div>
</div>
</div>
<script>
test_computed_value("grid-template-rows", 'none', '600px'); // "none" without #child
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-template-rows", '20%', '120px'); // 20% * height
test_computed_value("grid-template-rows", 'calc(-0.5em + 10px)', '0px');
test_computed_value("grid-template-rows", 'calc(0.5em + 10px)', '30px');
test_computed_value("grid-template-rows", 'calc(30% + 40px)', '220px'); // 30% * height + 40px
test_computed_value("grid-template-rows", '5fr', '600px'); // height
test_computed_value("grid-template-rows", 'min-content', '60px');
test_computed_value("grid-template-rows", 'max-content', '60px');
test_computed_value("grid-template-rows", 'auto', '600px'); // height
// track-size minmax( <inflexible-breadth> , <track-breadth> )
test_computed_value("grid-template-rows", 'minmax(10px, auto)', '600px'); // height
test_computed_value("grid-template-rows", 'minmax(20%, max-content)', '120px'); // 20% * height
test_computed_value("grid-template-rows", 'minmax(min-content, calc(-0.5em + 10px))', '60px');
test_computed_value("grid-template-rows", 'minmax(auto, 0)', '60px');
// track-size fit-content( <length-percentage> )
test_computed_value("grid-template-rows", 'fit-content(70px)', '60px');
test_computed_value("grid-template-rows", 'fit-content(20%)', '60px');
test_computed_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))', '60px');
// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
test_computed_value("grid-template-rows", 'repeat(1, 10px)', '10px');
test_computed_value("grid-template-rows", 'repeat(1, [one two] 20%)', '[one two] 120px');
test_computed_value("grid-template-rows", 'repeat(2, minmax(10px, auto))', '325px 275px');
test_computed_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
'60px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
test_computed_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))',
'60px 108px 108px 108px 108px 108px');
test_computed_value("grid-template-rows", '[] 150px [] 1fr []', '150px 450px');
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
test_computed_value("grid-template-rows", 'repeat(auto-fill, 200px)', '200px 200px 200px');
test_computed_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)',
'[one] 120px [one] 0px [one] 0px [one] 0px [one] 0px');
test_computed_value("grid-template-rows", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
'100px [two] 100px [two] 100px [two] 100px [two] 100px [two] 100px [two]');
test_computed_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
'[three] 240px [four three] 0px [four]');
// <auto-track-list> =
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
// <auto-repeat>
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
test_computed_value("grid-template-rows", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
'[one] 50px 50px [two] 30px [three] 10px 10px 10px 40px [four five] 200px 200px [six]');
</script>
</body>
</html>

43
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-rows-computed.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container.">
<style>
#target {
display: grid;
height: 1px;
font-size: 1px;
}
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<div id="target"></div>
<script>
test_computed_value("grid-template-rows", "none");
test_computed_value("grid-template-rows", "1px");
test_computed_value("grid-template-rows", "1px [a]");
test_computed_value("grid-template-rows", "1px [a] 2px");
test_computed_value("grid-template-rows", "[a] 1px");
test_computed_value("grid-template-rows", "[a] 1px [b]");
test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px", "1px 2px 3px");
test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");
test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]");
test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px");
test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]");
</script>

31
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-rows-invalid.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template-rows with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
<meta name="assert" content="grid-template-rows supports only the grammar 'none | <track-list> | <auto-track-list>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("grid-template-rows", '-10px');
test_invalid_value("grid-template-rows", '-20%');
test_invalid_value("grid-template-rows", '-5fr');
test_invalid_value("grid-template-rows", 'minmax(5fr, calc(0.5em + 10px))');
test_invalid_value("grid-template-rows", 'minmax(-10px, auto)');
test_invalid_value("grid-template-rows", 'minmax(-20%, max-content)');
test_invalid_value("grid-template-rows", 'minmax(min-content, -20%)');
test_invalid_value("grid-template-rows", 'fit-content(-10px)');
test_invalid_value("grid-template-rows", 'fit-content(-20%)');
test_invalid_value("grid-template-rows", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]');
test_invalid_value("grid-template-rows", '[one]');
test_invalid_value("grid-template-rows", '[one] 10px [two] [three]');
test_invalid_value("grid-template-rows", 'repeat(auto-fill, -10px)');
test_invalid_value("grid-template-rows", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)');
test_invalid_value("grid-template-rows", '[auto] 1px');
</script>
</body>
</html>

76
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-rows-valid.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template-rows with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
<meta name="assert" content="grid-template-rows supports the full grammar 'none | <track-list> | <auto-track-list>'.">
<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("grid-template-rows", "none");
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_valid_value("grid-template-rows", '10px');
test_valid_value("grid-template-rows", '20%');
test_valid_value("grid-template-rows", 'calc(-0.5em + 10px)');
test_valid_value("grid-template-rows", 'calc(0.5em + 10px)');
test_valid_value("grid-template-rows", 'calc(30% + 40vw)');
test_valid_value("grid-template-rows", '5fr');
test_valid_value("grid-template-rows", 'min-content');
test_valid_value("grid-template-rows", 'max-content');
test_valid_value("grid-template-rows", 'auto');
// track-size minmax( <inflexible-breadth> , <track-breadth> )
test_valid_value("grid-template-rows", 'minmax(10px, auto)');
test_valid_value("grid-template-rows", 'minmax(20%, max-content)');
test_valid_value("grid-template-rows", 'minmax(calc(-0.5em + 10px), min-content)');
test_valid_value("grid-template-rows", 'minmax(calc(0.5em + 10px), 5fr)');
test_valid_value("grid-template-rows", 'minmax(calc(30% + 40vw), 10px)');
test_valid_value("grid-template-rows", 'minmax(min-content, 20%)');
test_valid_value("grid-template-rows", 'minmax(max-content, calc(-0.5em + 10px))');
test_valid_value("grid-template-rows", 'minmax(auto, calc(0.5em + 10px))');
// track-size fit-content( <length-percentage> )
test_valid_value("grid-template-rows", 'fit-content(10px)');
test_valid_value("grid-template-rows", 'fit-content(20%)');
test_valid_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))');
test_valid_value("grid-template-rows", 'fit-content(calc(0.5em + 10px))');
test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))');
// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
test_valid_value("grid-template-rows", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
// 'repeat(1, [one two] 20%)' in Blink, Firefox
// '[one two] 20%' in Safari, Edge 18
test_valid_value("grid-template-rows", 'repeat(1, [one two] 20%)');
// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18
// 'minmax(10px, auto) minmax(10px, auto)' in Safari
test_valid_value("grid-template-rows", 'repeat(2, minmax(10px, auto))');
test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])');
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))');
test_valid_value("grid-template-rows", '[] 150px [] 1fr []', '150px 1fr');
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)');
test_valid_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)');
test_valid_value("grid-template-rows", 'repeat(auto-fill, minmax(30px, 5fr) [two])');
test_valid_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])');
// <auto-track-list> =
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
// <auto-repeat>
// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
test_valid_value("grid-template-rows", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]');
</script>
</body>
</html>

38
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-shorthand-areas-valid.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-template and grid-template-areas</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
<meta name=assert content="grid-template and grid-template-areas parsing is valid.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<script>
function testValidGridTemplate(valueGridTemplate, valueGridAreas, serializedGridTemplateValue) {
if (arguments.length < 3)
serializedGridTemplateValue = valueGridTemplate;
test(()=>{
const root = document.children[0];
root.style.gridTemplate = "";
root.style.gridTemplate = valueGridTemplate;
root.style.gridTemplateAreas = "";
root.style.gridTemplateAreas = valueGridAreas;
assert_equals(root.style.gridTemplate, serializedGridTemplateValue);
assert_equals(root.style.gridTemplateAreas, valueGridAreas);
}, `grid-template: ${valueGridTemplate} and "grid-template-areas: ${valueGridAreas};" should be valid.`);
}
testValidGridTemplate("none / 1px", "\"a\"", "");
testValidGridTemplate("none / none", "\"a\"", "");
testValidGridTemplate("auto / 1px", "\"a a a\"", "\"a a a\" / 1px");
testValidGridTemplate("auto / auto", "\"a a a\"", "\"a a a\" / auto");
testValidGridTemplate("10px 20px 30px / 40px 50px 60px 70px",
"\"a . b .\" \"c d . e\" \"f g h .\"",
"\"a . b .\" 10px \"c d . e\" 20px \"f g h .\" 30px / 40px 50px 60px 70px");
</script>
</body>
</html>

88
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-shorthand-invalid.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template with invalid values</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template">
<meta name="assert" content="grid-template supports only the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("grid-template", 'auto');
test_invalid_value("grid-template", 'none none');
test_invalid_value("grid-template", 'none []');
test_invalid_value("grid-template", '10px');
test_invalid_value("grid-template", '20%');
test_invalid_value("grid-template", '5fr');
test_invalid_value("grid-template", '[a]');
test_invalid_value("grid-template", '[a] 10px');
test_invalid_value("grid-template", '[a] repeat(2, 10px)');
test_invalid_value("grid-template", '[a] repeat(auto-fill, 10px)');
test_invalid_value("grid-template", '[a] repeat(auto-fit, 10px)');
test_invalid_value("grid-template", '[a] 10px []');
test_invalid_value("grid-template", '[a] repeat(2, 10px) []');
test_invalid_value("grid-template", '[a] repeat(auto-fill, 10px) []');
test_invalid_value("grid-template", '[a] repeat(auto-fit, 10px) []');
test_invalid_value("grid-template", '[]');
test_invalid_value("grid-template", '10px "a"');
test_invalid_value("grid-template", 'repeat(2, 10px) "a"');
test_invalid_value("grid-template", 'repeat(auto-fill, 10px) "a"');
test_invalid_value("grid-template", 'repeat(auto-fit, 10px) "a"');
test_invalid_value("grid-template", '[] 10px "a"');
test_invalid_value("grid-template", '[] repeat(2, 10px) "a"');
test_invalid_value("grid-template", '[] repeat(auto-fill, 10px) "a"');
test_invalid_value("grid-template", '[] repeat(auto-fit, 10px) "a"');
test_invalid_value("grid-template", '10px [] "a"');
test_invalid_value("grid-template", 'repeat(2, 10px) [] "a"');
test_invalid_value("grid-template", 'repeat(auto-fill, 10px) [] "a"');
test_invalid_value("grid-template", 'repeat(auto-fit, 10px) [] "a"');
test_invalid_value("grid-template", '[] [] "a"');
test_invalid_value("grid-template", '"a" none');
test_invalid_value("grid-template", '"a" 10px 10px');
test_invalid_value("grid-template", '"a" repeat(2, 10px) 10px');
test_invalid_value("grid-template", '"a" 10px repeat(2, 10px)');
test_invalid_value("grid-template", '"a" repeat(auto-fill, 10px) 10px');
test_invalid_value("grid-template", '"a" 10px repeat(auto-fill, 10px)');
test_invalid_value("grid-template", '"a" repeat(auto-fit, 10px) 10px');
test_invalid_value("grid-template", '"a" 10px repeat(auto-fit, 10px)');
test_invalid_value("grid-template", '"a" [a] 10px');
test_invalid_value("grid-template", '"a" [a] repeat(2, 10px)');
test_invalid_value("grid-template", '"a" [a] repeat(auto-fill, 10px)');
test_invalid_value("grid-template", '"a" [a] repeat(auto-fit, 10px)');
test_invalid_value("grid-template", '"a" [a] 10px [a]');
test_invalid_value("grid-template", '"a" [a] repeat(2, 10px) [a]');
test_invalid_value("grid-template", '"a" [a] repeat(auto-fill, 10px) [a]');
test_invalid_value("grid-template", '"a" [a] repeat(auto-fit, 10px) [a]');
test_invalid_value("grid-template", '"a" [a] [a] 10px');
test_invalid_value("grid-template", '"a" [a] [a] repeat(2, 10px)');
test_invalid_value("grid-template", '"a" [a] [a] repeat(auto-fill, 10px)');
test_invalid_value("grid-template", '"a" [a] [a] repeat(auto-fit, 10px)');
test_invalid_value("grid-template", '"a" 10px [a] [a]');
test_invalid_value("grid-template", '"a" repeat(2, 10px) [a] [a]');
test_invalid_value("grid-template", '"a" repeat(auto-fill, 10px) [a] [a]');
test_invalid_value("grid-template", '"a" repeat(auto-fit, 10px) [a] [a]');
test_invalid_value("grid-template", '"a" [a] [a]');
test_invalid_value("grid-template", '[a] "a" [a] [a]');
test_invalid_value("grid-template", '"a" "a" [a] [a]');
test_invalid_value("grid-template", '"a" [a] [a] / none');
test_invalid_value("grid-template", '"a" "a" [a] [a] / none');
test_invalid_value("grid-template", 'none / "a"');
test_invalid_value("grid-template", '"a" / none');
test_invalid_value("grid-template", 'none / [] "a"');
test_invalid_value("grid-template", 'none / "a" []');
test_invalid_value("grid-template", 'none / "a" [] 10px');
test_invalid_value("grid-template", 'none / "a" [] repeat(2, 10px)');
test_invalid_value("grid-template", 'none / "a" [] repeat(auto-fill, 10px)');
test_invalid_value("grid-template", 'none / "a" [] repeat(auto-fit, 10px)');
// FIXME: add more values to test full syntax
</script>
</body>
</html>

61
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-shorthand-valid.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: parsing grid-template with valid values</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template">
<meta name="assert" content="grid-template supports the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`.">
<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("grid-template", 'none');
test_valid_value("grid-template", 'none / none', 'none');
test_valid_value("grid-template", 'auto / auto');
test_valid_value("grid-template", 'none / [a] 0px');
test_valid_value("grid-template", 'none / [] 0px', 'none / 0px');
test_valid_value("grid-template", '[a] 10px / auto');
test_valid_value("grid-template", '[a] 10px / none');
test_valid_value("grid-template", '[] 10px [] / [] auto []', '10px / auto');
test_valid_value("grid-template", '[a] "a" 10px');
test_valid_value("grid-template", '[a] "a" 10px []', '[a] "a" 10px');
test_valid_value("grid-template", '"a" 10px');
test_valid_value("grid-template", '[] "a" 10px', '"a" 10px');
test_valid_value("grid-template", '[a] "a" 10px [a]');
test_valid_value("grid-template", '"a"');
test_valid_value("grid-template", '"a" auto', '"a"');
test_valid_value("grid-template", '"a a a"', '"a a a"');
test_valid_value("grid-template", '"a" / 10px');
test_valid_value("grid-template", '"a" / 20%');
test_valid_value("grid-template", '"a" / 5fr');
test_valid_value("grid-template", '[a] "a"');
test_valid_value("grid-template", '[a] "a" [a]');
test_valid_value("grid-template", '[] "a"', '"a"');
test_valid_value("grid-template", '"a" [] [] "b"', '"a" "b"');
test_valid_value("grid-template", '"a" [] "b"', '"a" "b"');
test_valid_value("grid-template", '"a" [a] [b] "b"', '"a" [a b] "b"');
test_valid_value("grid-template", '"a" [a] "b"');
test_valid_value("grid-template", '"a" / 0', '"a" / 0px');
test_valid_value("grid-template", '"a" 10px / 10px');
test_valid_value("grid-template", '"a" calc(100% - 10px) / calc(10px)');
test_valid_value("grid-template", '"a" [a] "b" 10px');
test_valid_value("grid-template", '"a" [a] "b" 10px [a]');
test_valid_value("grid-template", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px');
test_valid_value("grid-template", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px');
test_valid_value("grid-template", '"a" 10px [a] "b" [a]');
test_valid_value("grid-template", '"a" [a] "b" [a]');
test_valid_value("grid-template", '[a] "a" [a] "b" [a]');
test_valid_value("grid-template", '"a" "a" [a] "b" [a]');
test_valid_value("grid-template", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px');
test_valid_value("grid-template", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto');
test_valid_value("grid-template", '"a" auto [a] "b" auto [b] / 10px', '"a" [a] "b" [b] / 10px');
// FIXME: add more values to test full syntax
</script>
</body>
</html>

63
Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-template-shorthand.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-template sets longhands</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
<meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/shorthand-testcommon.js"></script>
</head>
<body>
<script>
test_shorthand_value('grid-template', 'none', {
'grid-template-rows': 'none',
'grid-template-columns': 'none',
'grid-template-areas': 'none'
});
// <grid-template-rows> / <grid-template-columns>
test_shorthand_value('grid-template', '10px / 20%', {
'grid-template-rows': '10px',
'grid-template-columns': '20%',
'grid-template-areas': 'none'
});
test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
'grid-template-areas': 'none'
});
// [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
test_shorthand_value('grid-template',
'[header-top] "a a a" [header-bottom]' +
' [main-top] "b b b" 1fr [main-bottom]' +
' / auto 1fr auto', {
'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"'
});
test_shorthand_value('grid-template',
' "a a a"' +
' "b b b" 1fr' +
'/ auto 1fr auto', {
'grid-template-rows': 'auto 1fr',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"'
});
test_shorthand_value('grid-template',
' [] "a a a" []' +
' [] "b b b" 1fr []' +
' / [] auto 1fr [] auto []', {
'grid-template-rows': 'auto 1fr',
'grid-template-columns': 'auto 1fr auto',
'grid-template-areas': '"a a a" "b b b"'
});
</script>
</body>
</html>

45
Tests/LibWeb/Text/input/wpt-import/css/css-grid/support/grid-child-utils.js Normal file
View file

@ -0,0 +1,45 @@
// Any copyright is dedicated to the Public Domain.
// https://creativecommons.org/publicdomain/zero/1.0/
const gridChildHelperRow = "row";
const gridChildHelperCol = "col";
// Helper for building testcases for grid-template-* with a child div in
// multiple positions. Prop is expected to be one of gridChildHelperRow or
// gridChildHelperCol, to select testing grid rows or grid columns,
// respectively.
// The child div is found by the id of 'child'.
function GridChildHelper(prop, style){
this.child = document.getElementById("child");
this.style = style;
this.prop = prop;
}
// Runs a test for computed values on the property the helper object was
// constructed with. The childStyle is used for choosing the grid row/column
// of the child div.
// expected is passed as-is to the computed value test.
// The child style is appended to the test name in such a way that different
// tests for the same parent style but different child style values will have
// different test names.
GridChildHelper.prototype.runTest = function(childStyle, expected) {
'use strict';
const childProps = {
[gridChildHelperCol]:"gridColumn",
[gridChildHelperRow]:"gridRow"
};
const childProp = childProps[this.prop];
const parentProps = {
[gridChildHelperCol]:"grid-template-columns",
[gridChildHelperRow]:"grid-template-rows"
};
const parentProp = parentProps[this.prop];
const oldChildStyle = this.child[childProp];
this.child.style[childProp] = childStyle;
test_computed_value(parentProp, this.style, expected, childProp + " = " + childStyle);
this.child[childProp] = oldChildStyle;
}