Commit graph

4 commits

Author SHA1 Message Date
Nico Burns
fd20a5df42
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>
2025-08-07 14:41:19 +00:00
Nico Burns
1b5a10a55f
CSS Grid: percentage sizing fixes (#34948)
This applies some fixes for CSS Grid percentage sizing. These fixes are
mostly within Taffy, but there are some changes in Servo to allow it to
communicate whether an item is replaced to Taffy.

It also updates Taffy to v0.8.0. Taffy has switched to a tagged pointer
representation of length/size styles. Much of the diff here is updating
Servo's type conversion code to use the new representation.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by
`[X]` when the step is complete, and replace `___` with appropriate
data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] There are tests for these changes OR

---------

Signed-off-by: Nico Burns <nico@nicoburns.com>
2025-06-08 15:17:10 +00:00
Nico Burns
6cbd89dbb0
Layout: Implement CSS Grid using taffy (#32619)
* Add layout.grid.enabled pref

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Add taffy dependency

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Import taffy <-> stylo conversion code from taffy_stylo crate

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Add `Grid` variant to DisplayInside

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Implement CSS Grid using Taffy

Signed-off-by: Nico Burns <nico@nicoburns.com>

Import full stylo_taffy crate

Signed-off-by: Nico Burns <nico@nicoburns.com>

Squashed PR feedback changes

Deduplicate is_document_only_whitespace

Signed-off-by: Nico Burns <nico@nicoburns.com>

Import taffy::AvailableSpace

Signed-off-by: Nico Burns <nico@nicoburns.com>

Rename FlexContext to TaffyContainerContext

Signed-off-by: Nico Burns <nico@nicoburns.com>

Eliminate references to flexbox in taffy/layout module

Signed-off-by: Nico Burns <nico@nicoburns.com>

Use constructors for geom types

Signed-off-by: Nico Burns <nico@nicoburns.com>

Remove comment about abspos elements splitting contiguous text runs

Signed-off-by: Nico Burns <nico@nicoburns.com>

Remove reference to flexbox in taffy/construct

Signed-off-by: Nico Burns <nico@nicoburns.com>

Deduplicate construction of flexbox/grid containers

Signed-off-by: Nico Burns <nico@nicoburns.com>

Make anonymous text runs InFlow

Signed-off-by: Nico Burns <nico@nicoburns.com>

Remove commented code

Signed-off-by: Nico Burns <nico@nicoburns.com>

Update comments

Signed-off-by: Nico Burns <nico@nicoburns.com>

Inline/vendor the stylo/taffy interop code

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Update test expectations

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Fix nits from PR review

Signed-off-by: Nico Burns <nico@nicoburns.com>

---------

Signed-off-by: Nico Burns <nico@nicoburns.com>
2024-11-21 20:21:01 +00:00
Nico Burns
635c10a941
Enable css-grid WPT tests (#34052)
* Enable css-grid WPT tests

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Add assertions for css-grid WPT tests

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Add test assertions

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Allow for timeouts

Signed-off-by: Nico Burns <nico@nicoburns.com>

---------

Signed-off-by: Nico Burns <nico@nicoburns.com>
2024-10-30 15:50:37 +00:00