Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 08:55:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout(grid): implement named grid lines and areas (#38306)

Browse source 
### 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 2025-08-07 15:41:19 +01:00 • committed by GitHub
parent a9664c4199
commit fd20a5df42
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
44 changed files with 260 additions and 553 deletions
Download patch file Download diff file Expand all files Collapse all files

9
tests/wpt/meta/css/css-grid/grid-definition/explicit-grid-size-001.html.ini vendored
View file

@ -1,9 +0,0 @@
[explicit-grid-size-001.html]
[.grid 7]
expected: FAIL
[.grid 9]
expected: FAIL
[.grid 10]
expected: FAIL

57
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-fill-columns-001.html.ini vendored
View file

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

57
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-fill-rows-001.html.ini vendored
View file

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

54
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-fit-columns-001.html.ini vendored
View file

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

54
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-fit-rows-001.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-repeat-min-size-004.html.ini vendored
View file

@ -1,3 +0,0 @@
[grid-auto-repeat-min-size-004.html]
[.grid 1]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-repeat-minmax.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-auto-repeat-minmax.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-auto-repeat-multiple-values-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-auto-repeat-multiple-values-003.html]
expected: FAIL

3
tests/wpt/meta/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html.ini vendored
View file

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

@ -0,0 +1,2 @@
[grid-repeat-max-width-001.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-definition/grid-support-named-grid-lines-002.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-support-named-grid-lines-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-definition/grid-support-named-grid-lines-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-support-named-grid-lines-003.html]
expected: FAIL