mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
fd20a5df42
### 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>
60 lines
2 KiB
INI
Vendored
60 lines
2 KiB
INI
Vendored
[grid-template-columns-computed.html]
|
|
[Property grid-template-columns value '1px [a\]']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '1px [a\] 2px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '[a\] 1px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '[a\] 1px [b\]']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '1px [a\] repeat(1, 2px 3px) [b\] 4px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '1px [a\] repeat(auto-fill, 2px 3px) [b\] 4px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '1px [a\] repeat(auto-fit, 2px 3px) [b\] 4px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '1px [a\] repeat(1, [b\] 2px [c\]) [d\] 3px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '1px [a\] repeat(auto-fill, [b\] 2px [c\]) [d\] 3px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '1px [a\] repeat(auto-fit, [b\] 2px [c\]) [d\] 3px']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '[a\] 1px repeat(1, 2px [b\] 3px) 4px [d\]']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '[a\] 1px repeat(auto-fill, 2px [b\] 3px) 4px [d\]']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '[a\] 1px repeat(auto-fit, 2px [b\] 3px) 4px [d\]']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '100% [a\] repeat(1, [b\] 200% [c\]) [d\] 300%']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '100% [a\] repeat(auto-fill, [b\] 200% [c\]) [d\] 300%']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '100% [a\] repeat(auto-fit, [b\] 200% [c\]) [d\] 300%']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '[a\] 1em repeat(1, 2em [b\] 3em) 4em [d\]']
|
|
expected: FAIL
|
|
|
|
[Property grid-template-columns value '[a\] 1em repeat(auto-fill, 2em [b\] 3em) 4em [d\]']
|
|
expected: FAIL
|
|
|
|
[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
|