Commit graph

18 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
Servo WPT Sync
9a0f2be162
Sync WPT with upstream (29-06-2025) (#37774)
Automated downstream sync of changes from upstream as of 29-06-2025
[no-wpt-sync]

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-06-29 01:47:33 +00:00
Servo WPT Sync
a7e9df0fef
Sync WPT with upstream (13-06-2025) (#37436)
Automated downstream sync of changes from upstream as of 13-06-2025
[no-wpt-sync]

---------

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
2025-06-13 14:15:36 +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
Servo WPT Sync
bfa0a61375
Sync WPT with upstream (30-04-2025) (#36785)
Automated downstream sync of changes from upstream as of 30-04-2025
[no-wpt-sync]

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-04-30 19:46:03 +00:00
Steven Novaryo
bd6928f3dc
layout: Account for transform in scrollable overflow (#36138)
In the scrollable overflow calcutation, apply CSS transforms to boxes
and scrollable overflow of the descendant. Clip unreachable scrollable
overflow according to it's block start and inline start scrolling
direction. And, renamed `Fragment::scrolling_overflow` to
`Fragment::scrolling_overflow_for_parent` as it was calculating the
scrolling overflow contribution from a child.

Add several WPT tests, testing the transform interaction `rotate`,
`scale`, and `skew` with scrollable overflow. There are several WPT test
that are testing the interaction that not expected from current browsers
implementation according to the spec.

Testing: Existing and new WPT. 
Fixes: #36031

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
2025-04-29 09:37:27 +00:00
Servo WPT Sync
e22ce3988b
Sync WPT with upstream (27-04-2025) (#36708)
Automated downstream sync of changes from upstream as of 27-04-2025
[no-wpt-sync]

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-04-27 02:05:07 +00:00
Servo WPT Sync
c915bf05fc
Sync WPT with upstream (20-04-2025) (#36618)
Automated downstream sync of changes from upstream as of 20-04-2025
[no-wpt-sync]

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-04-20 01:47:50 +00:00
Barigbue Nbira
e1de46c691
Fix: display: inline-grid considered an atomic inline (#36298)
This change ensures that `display: inline-grid` is considered an atomic
inline

- Add `is_atomic_inline_level()` logic to `box_fragment.rs` to improve
accuracy.
- Update `stacking_context.rs` to use the new `is_atomic_inline_level()`
method instead of the one from stylo.
- Update `repeat-auto-fill-005.html` test expectation.
- Remove .ini expectations for tests that are no longer failing.

Testing: covered by WPT
Fixes:  #35310

---------

Signed-off-by: Barigbue <barigbuenbira@gmail.com>
2025-04-03 19:48:19 +00:00
Oriol Brufau
9d6e1f67fb
layout: Improve style conversion for Taffy (#36311)
This imports the following changes from Blitz:
- Map position:sticky to relative rather than absolute position
16a7c16544
- Map left and right alignment from Stylo
c71cc681d8
- Improve mapping of align-items/self
7bf2a25e75

Fixes: #35998

Testing:
-
`/css/css-grid/alignment/grid-align-justify-margin-border-padding.html`
- `/css/css-grid/alignment/grid-align.html`
-
`/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html`
- `/css/css-grid/alignment/grid-gutters-and-alignment.html`
-
`/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html`
-
`/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html`
- `/css/css-grid/alignment/grid-self-alignment.html`

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
2025-04-03 15:47:56 +00:00
Servo WPT Sync
c593e15fa8
Update web-platform-tests to revision b'efce5c7cd31b0e1add4f41758504c767b56abeed' (#36222)
Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-03-30 01:40:11 +00:00
Servo WPT Sync
ecaf2930cc
Update web-platform-tests to revision b'9d20f3ae600d00673a27a69f69e13d4cd8eca443' (#36195)
Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-03-28 06:07:42 +00:00
Servo WPT Sync
5ba9cfe809
Update web-platform-tests to revision b'fc557e215e11221c91de4f283539725ef2f35928' (#35741)
Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-03-02 12:18:38 +00:00
Servo WPT Sync
6d6070242b
Update web-platform-tests to revision b'de61904887c13679551c32e5e3e70b4dc870c98a' (#35480)
Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
2025-02-16 01:35:48 +00:00
Nico Burns
bb79408434
Bump taffy to v0.7.5 (#34927)
Signed-off-by: Nico Burns <nico@nicoburns.com>
2025-01-10 14:08:09 +00:00
Oriol Brufau
eb82161a8a
Partial implementation of keyword sizes for block layout (#34568)
Adds support for min-content, max-content, fit-content and stretch,
for block-level elements that don't establish an independent formatting
context, and for block-level elements when there is no float.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
2024-12-16 12:34:57 +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