mirror of
https://github.com/servo/servo.git
synced 2025-08-22 13:55:34 +01:00
layout(grid): implement named grid lines and areas (#38306)
### Changes made
This implements named grid lines (line names in `grid-template-*`),
named grid areas (`grid-template-areas`), and the ability to target
those using `grid-{row,column}-{start,end}`. It also includes a bunch of
miscelaneous fixes for `repeat(auto-fill | auto-fit, ...)` syntax as
that interacts with the specification of line names.
The actual layout implementation is in Taffy. The bulk of this PR is
updating Servo to translate (CSS Grid-related) Stylo types into Taffy
types using a new iterator-based API which uses iterators and lazy
translation for efficiency (which is more important now that we're
dealing with string data, even though they're `Atom`s).
### Testing
This functionality has lots of WPT tests. It fixes some seemingly random
CSS Grid tests that use named lines/areas even though that's not what
they're testing.
### Screenshots
wikipedia.org
<img width="1624" height="1056" alt="Screenshot 2025-07-27 at 20 03 16"
src="https://github.com/user-attachments/assets/2c50b96f-ae36-4405-ac48-b771bfdcb515"
/>
bbc.co.uk:
<img width="1624" height="1056" alt="Screenshot 2025-07-27 at 20 32 57"
src="https://github.com/user-attachments/assets/ba84e211-65d2-4411-95fb-7b9b91bea31c"
/>
theguardian.com:
<img width="1624" height="1056" alt="Screenshot 2025-07-27 at 20 33 29"
src="https://github.com/user-attachments/assets/e85daaa6-5fb0-45d4-b9ec-b22b38b087ec"
/>
---------
Signed-off-by: Nico Burns <nico@nicoburns.com>
This commit is contained in:
Nico Burns
GitHub
parent
a9664c4199
commit
fd20a5df42
44 changed files with 260 additions and 553 deletions
|
|
@ -1,52 +1,4 @@
|
|||
[grid-content-alignment-and-self-alignment-002.html]
|
||||
[.grid 1]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 2]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 3]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 4]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 5]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 6]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 7]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 8]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 9]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 10]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 11]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 12]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 13]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 14]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 15]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 16]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 17]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,4 @@
|
|||
[grid-content-alignment-with-span-001.html]
|
||||
[.grid 1]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 2]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 3]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 4]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 5]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
[explicit-grid-size-001.html]
|
||||
[.grid 7]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 9]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 10]
|
||||
expected: FAIL
|
||||
|
|
@ -1,46 +1,7 @@
|
|||
[grid-auto-fill-columns-001.html]
|
||||
[.grid 3]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 4]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 5]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 8]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 10]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 11]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 13]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 14]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 15]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 16]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 17]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 19]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 21]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 22]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 23]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -49,21 +10,3 @@
|
|||
|
||||
[.grid 25]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 27]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 28]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 30]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 31]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 32]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 33]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,46 +1,7 @@
|
|||
[grid-auto-fill-rows-001.html]
|
||||
[.grid 3]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 4]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 5]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 8]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 12]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 13]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 15]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 16]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 17]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 18]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 19]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 21]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 23]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 24]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 25]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -49,21 +10,3 @@
|
|||
|
||||
[.grid 27]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 29]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 30]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 32]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 33]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 34]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 35]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,46 +1,7 @@
|
|||
[grid-auto-fit-columns-001.html]
|
||||
[.grid 3]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 4]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 5]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 8]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 10]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 11]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 13]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 14]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 15]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 16]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 17]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 19]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 21]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 22]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 23]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -50,21 +11,6 @@
|
|||
[.grid 25]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 27]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 28]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 30]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 31]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 32]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 34]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +1,7 @@
|
|||
[grid-auto-fit-rows-001.html]
|
||||
[.grid 3]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 4]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 5]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 8]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 10]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 11]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 13]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 14]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 15]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 16]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 17]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 19]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 21]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 22]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 23]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -49,18 +10,3 @@
|
|||
|
||||
[.grid 25]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 27]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 28]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 30]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 31]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 32]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[grid-auto-repeat-min-size-004.html]
|
||||
[.grid 1]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-auto-repeat-minmax.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-auto-repeat-multiple-values-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-auto-repeat-multiple-values-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[grid-inline-auto-repeat-001.html]
|
||||
['autoFitColumns' with: grid-template-columns: repeat(auto-fit, 9px); and grid-template-rows: 20px;]
|
||||
expected: FAIL
|
||||
2
tests/wpt/meta/css/css-grid/grid-definition/grid-repeat-max-width-001.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-grid/grid-definition/grid-repeat-max-width-001.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[grid-repeat-max-width-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-support-named-grid-lines-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-support-named-grid-lines-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
[grid-gutters-and-tracks-001.html]
|
||||
[.grid 7]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 8]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 12]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 13]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 17]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@
|
|||
[.grid 9]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 12]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 15]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
[grid-flex-track-intrinsic-sizes-002.html]
|
||||
['grid' with: grid-template-columns: 1fr auto auto auto; and grid-template-rows: 1fr auto auto auto;]
|
||||
expected: FAIL
|
||||
|
||||
['grid' with: grid-template-columns: minmax(0, 1fr) auto auto auto; and grid-template-rows: minmax(0, 1fr) auto auto auto;]
|
||||
expected: FAIL
|
||||
|
||||
['grid' with: grid-template-columns: 1fr 1fr 1fr 1fr; and grid-template-rows: 1fr 1fr 1fr 1fr;]
|
||||
expected: FAIL
|
||||
|
||||
['grid' with: grid-template-columns: 1fr 1fr 1fr 4fr; and grid-template-rows: 1fr 1fr 1fr 4fr;]
|
||||
expected: FAIL
|
||||
|
||||
['grid' with: grid-template-columns: 1fr 1fr 1fr; and grid-template-rows: 1fr 1fr 1fr;]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
[masonry-grid-placement-named-lines-002.html]
|
||||
expected: CRASH
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,74 +1,19 @@
|
|||
[grid-template-columns-computed-withcontent.html]
|
||||
expected: CRASH
|
||||
[Property grid-template-columns value 'none']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '20%']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'calc(-0.5em + 10px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'calc(0.5em + 10px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'calc(30% + 40px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '5fr']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'min-content']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'max-content']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'auto']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'minmax(10px, auto)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'minmax(20%, max-content)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'minmax(min-content, calc(-0.5em + 10px))']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'minmax(auto, 0)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'fit-content(70px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'fit-content(20%)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'fit-content(calc(-0.5em + 10px))']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'repeat(1, 10px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'repeat(1, [one two\] 20%)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'repeat(2, minmax(10px, auto))']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'repeat(2, fit-content(20%) [three four\] 30px 40px [five six\])']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'min-content repeat(5, minmax(10px, auto))']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '[\] 150px [\] 1fr [\]']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'repeat(auto-fill, 200px)']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'repeat(auto-fit, [one\] 20%)']
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
[grid-template-columns-computed.html]
|
||||
expected: CRASH
|
||||
[Property grid-template-columns value 'none']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '1px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '1px [a\]']
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -18,15 +11,6 @@
|
|||
[Property grid-template-columns value '[a\] 1px [b\]']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '1px repeat(1, 2px) 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '1px repeat(auto-fill, 2px) 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '1px repeat(auto-fit, 2px) 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value '1px [a\] repeat(1, 2px 3px) [b\] 4px']
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -71,3 +55,6 @@
|
|||
|
||||
[Property grid-template-columns value '[a\] 1em repeat(auto-fit, 2em [b\] 3em) 4em [d\]']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-columns value 'repeat(calc(1 + 3 * sign(100em - 1px)), 150px)']
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
[grid-template-rows-computed-implicit-track.html]
|
||||
expected: CRASH
|
||||
[Property grid-template-rows value 'none' computes to '10px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px' computes to '10px 1px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px [a\]' computes to '10px 1px [a\]']
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -18,15 +14,6 @@
|
|||
[Property grid-template-rows value '[a\] 1px [b\]' computes to '10px [a\] 1px [b\]']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px repeat(1, 2px) 3px' computes to '10px 1px 2px 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px repeat(auto-fill, 2px) 3px' computes to '10px 1px 2px 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px' computes to '10px 1px 0px 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px [a\] repeat(1, 2px 3px) [b\] 4px' computes to '10px 1px [a\] 2px 3px [b\] 4px']
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
[grid-template-rows-computed.html]
|
||||
expected: CRASH
|
||||
[Property grid-template-rows value 'none']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px [a\]']
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -18,15 +11,6 @@
|
|||
[Property grid-template-rows value '[a\] 1px [b\]']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px repeat(1, 2px) 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px repeat(auto-fill, 2px) 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px']
|
||||
expected: FAIL
|
||||
|
||||
[Property grid-template-rows value '1px [a\] repeat(1, 2px 3px) [b\] 4px']
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-placement-using-named-grid-lines-001.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-placement-using-named-grid-lines-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-placement-using-named-grid-lines-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-placement-using-named-grid-lines-006.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-placement-using-named-grid-lines-009.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
[line-names-001.html]
|
||||
expected: CRASH
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[line-names-002.html]
|
||||
expected: CRASH
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[line-names-003.html]
|
||||
expected: CRASH
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
[line-names-004.html]
|
||||
expected: CRASH
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[line-names-005.html]
|
||||
expected: CRASH
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[line-names-009.html]
|
||||
expected: CRASH
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[line-names-014.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[line-names-015.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
[parent-repeat-auto-fit-001.html]
|
||||
expected: CRASH
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[parent-repeat-auto-fit-002.html]
|
||||
expected: CRASH
|
||||
expected: FAIL
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue