Skip to content

stylo_taffy: convert grid-template-areas template size (width / row count) to Taffy - #603

Closed
nicoburns wants to merge 8 commits into
mainfrom
devin/1785836560-grid-template-areas-size
Closed

stylo_taffy: convert grid-template-areas template size (width / row count) to Taffy#603
nicoburns wants to merge 8 commits into
mainfrom
devin/1785836560-grid-template-areas-size

Conversation

@nicoburns

@nicoburns nicoburns commented Aug 4, 2026

Copy link
Copy Markdown
Member

Summary

Companion to DioxusLabs/taffy#1024, which changes Style::grid_template_areas to Option<GridTemplateAreas<S>> carrying the explicit template size, and adds grid_template_area_{row,column}_count to GridContainerStyle. This lets templates with unnamed (.) cells beyond the named-area extents (e.g. grid-template-areas: "a .") size the explicit grid correctly.

Stylo's computed TemplateAreas already stores this: width (column count) and strings (one per row). The conversion now passes both through:

// convert.rs
fn grid_template_areas(input: &stylo::GridTemplateAreas) -> Option<taffy::GridTemplateAreas<Atom>> {
    // Some(GridTemplateAreas { areas, row_count: strings.len(), column_count: width })
}

// wrapper.rs (borrowed-style impl)
fn grid_template_area_row_count(&self) -> u16 { /* strings.len() */ }
fn grid_template_area_column_count(&self) -> u16 { /* width */ }

Draft: depends on unreleased Taffy changes, temporarily pulled in via a [patch.crates-io] now pointing at the DioxusLabs/taffy#1015 branch (sparse CellOccupancyMatrix, based on main and hence also including #1024) — to be replaced once a Taffy release containing both lands.

Note: the WPT test that motivated this (css/css-grid/placement/grid-container-change-grid-tracks-recompute-child-positions-001.html) currently reports CRASH (UNK) in the WPT runner both before and after this change (unsupported test type), so it can't be used for verification here; the behavior is covered by the hand-written test in taffy#1021/#1024.

Link to Devin session: https://dioxus.staging.devinenterprise.com/sessions/b738b4844c184963b4e5b0bb846df49a
Requested by: @nicoburns

WPT results

166 newly passing, 8 newly failing (net +158), 1 other status change.

Full diff (175 changed tests)
+ Fail => Pass css/CSS2/borders/border-right-width-095.xht
+ Fail => Pass css/CSS2/css1/c5501-mrgn-t-000.xht
+ Fail => Pass css/CSS2/css1/c5503-mrgn-b-000.xht
+ Fail => Pass css/CSS2/css1/c62-percent-000.xht
+ Fail => Pass css/CSS2/floats-clear/clear-after-top-margin.html
+ Fail => Pass css/CSS2/floats-clear/clear-clearance-calculation-001.xht
+ Fail => Pass css/CSS2/floats-clear/clear-clearance-calculation-002.xht
+ Fail => Pass css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html
+ Fail => Pass css/CSS2/floats-clear/clear-on-replaced-element.html
- Pass => Fail css/CSS2/floats-clear/clearance-006.xht
+ Fail => Pass css/CSS2/floats-clear/float-005.xht
+ Fail => Pass css/CSS2/floats-clear/float-applies-to-008a.xht
+ Fail => Pass css/CSS2/floats-clear/float-applies-to-013.xht
+ Fail => Pass css/CSS2/floats-clear/float-applies-to-014.xht
+ Fail => Pass css/CSS2/floats-clear/float-non-replaced-width-007.xht
+ Fail => Pass css/CSS2/floats-clear/float-non-replaced-width-008.xht
+ Fail => Pass css/CSS2/floats-clear/float-non-replaced-width-009.xht
+ Fail => Pass css/CSS2/floats-clear/float-non-replaced-width-010.xht
+ Fail => Pass css/CSS2/floats-clear/float-non-replaced-width-011.xht
+ Fail => Pass css/CSS2/floats-clear/float-non-replaced-width-012.xht
+ Fail => Pass css/CSS2/floats-clear/floats-005.xht
+ Fail => Pass css/CSS2/floats-clear/floats-015.xht
+ Fail => Pass css/CSS2/floats-clear/floats-118.xht
+ Fail => Pass css/CSS2/floats-clear/floats-119.xht
+ Fail => Pass css/CSS2/floats-clear/floats-120.xht
+ Fail => Pass css/CSS2/floats-clear/floats-138.xht
+ Crash => Pass css/CSS2/floats-clear/floats-146.xht
+ Fail => Pass css/CSS2/floats-clear/floats-154.xht
+ Fail => Pass css/CSS2/floats-clear/margin-collapse-023.xht
+ Fail => Pass css/CSS2/floats-clear/margin-collapse-027.xht
+ Fail => Pass css/CSS2/floats-clear/margin-collapse-123.xht
+ Fail => Pass css/CSS2/floats-clear/margin-collapse-165.xht
+ Fail => Pass css/CSS2/floats-clear/margin-collapse-clear-015.xht
- Pass => Fail css/CSS2/floats-clear/no-clearance-adjoining-opposite-float.html
- Pass => Fail css/CSS2/floats-clear/no-clearance-due-to-large-margin-after-left-right.html
+ Fail => Pass css/CSS2/floats-clear/second-float-inside-empty-cleared-block-after-margin.html
+ Fail => Pass css/CSS2/floats-clear/second-float-inside-empty-cleared-block.html
+ Fail => Pass css/CSS2/floats/floats-placement-003.html
+ Fail => Pass css/CSS2/linebox/line-height-128.xht
+ Fail => Pass css/CSS2/lists/list-style-image-005.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-001.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-002.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-003.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-004.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-005.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-006.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-007.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-009.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-012.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-013.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-applies-to-014.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-006.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-039.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-040.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-041.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-clear-011.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-left-103.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-left-104.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-004.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-005.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-006.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-007.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-016.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-017.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-018.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-028.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-029.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-030.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-040.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-041.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-042.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-052.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-053.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-054.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-064.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-065.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-066.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-076.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-077.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-078.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-088.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-089.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-090.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-103.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-104.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-109.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-110.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-111.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-112.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-001.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-002.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-004.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-005.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-006.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-007.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-009.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-012.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-013.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-right-applies-to-014.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-001.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-002.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-003.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-004.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-005.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-006.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-007.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-009.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-012.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-013.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-applies-to-014.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-001.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-002.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-003.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-004.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-005.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-006.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-009.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-013.xht
+ Fail => Pass css/CSS2/margin-padding-clear/padding-right-applies-to-014.xht
+ Fail => Pass css/CSS2/normal-flow/block-formatting-contexts-011.xht
+ Fail => Pass css/CSS2/normal-flow/max-height-applies-to-018.html
+ Fail => Pass css/CSS2/normal-flow/max-width-106.xht
+ Fail => Pass css/CSS2/normal-flow/max-width-110.xht
+ Fail => Pass css/CSS2/normal-flow/max-width-applies-to-018.html
+ Fail => Pass css/CSS2/positioning/position-relative-018.xht
+ Fail => Pass css/CSS2/text/white-space-mixed-003.xht
+ Fail => Pass css/CSS2/values/units-004.xht
+ Fail => Pass css/css-backgrounds/box-shadow-overlapping-002.html
+ Fail => Pass css/css-backgrounds/box-shadow-overlapping-003.html
+ Fail => Pass css/css-backgrounds/box-shadow-overlapping-004.html
+ Fail => Pass css/css-flexbox/align-items-baseline-overflow-non-visible.html
+ Fail => Pass css/css-flexbox/aspect-ratio-transferred-max-size.html
+ Fail => Pass css/css-flexbox/flex-aspect-ratio-img-column-006.html
+ Fail => Pass css/css-flexbox/flex-aspect-ratio-img-column-007.html
+ Fail => Pass css/css-flexbox/flex-aspect-ratio-img-column-009.html
+ Fail => Pass css/css-flexbox/flex-aspect-ratio-img-row-004.html
+ Fail => Pass css/css-flexbox/flex-flow-001.html
+ Fail => Pass css/css-flexbox/flex-flow-004.html
- Pass => Fail css/css-flexbox/flexbox-flex-basis-content-003a.html
- Pass => Fail css/css-flexbox/flexbox-flex-basis-content-003b.html
+ Fail => Pass css/css-flexbox/flexbox-flex-basis-content-004a.html
+ Fail => Pass css/css-flexbox/flexbox-flex-basis-content-004b.html
- Pass => Fail css/css-flexbox/flexbox-min-height-auto-002b.html
+ Fail => Pass css/css-flexbox/flexbox-paint-ordering-001.xhtml
+ Fail => Pass css/css-flexbox/intrinsic-size/row-002.html
+ Fail => Pass css/css-flexbox/intrinsic-size/row-003.html
+ Fail => Pass css/css-flexbox/intrinsic-size/row-004.html
+ Fail => Pass css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html
+ Fail => Pass css/css-grid/alignment/grid-gutters-016.html
+ Fail => Pass css/css-grid/grid-model/grid-box-sizing-001.html
+ Fail => Pass css/css-grid/grid-model/grid-floats-no-intrude-001.html
+ Fail => Pass css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html
+ Fail => Pass css/css-grid/layout-algorithm/grid-find-fr-size-restart-algorithm.html
- Pass => Fail css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html
- Pass => Fail css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001.html
! Crash => Fail css/css-page/page-size-007-print.html
+ Fail => Pass css/css-rhythm/block-step-size-none-does-not-establish-block-formatting-context.html
+ Fail => Pass css/css-rhythm/block-step-size-none-does-not-establish-indepdendent-formatting-context.html
+ Fail => Pass css/css-sizing/aspect-ratio/block-aspect-ratio-025.html
+ Fail => Pass css/css-sizing/intrinsic-percent-replaced-001.html
+ Fail => Pass css/css-sizing/replaced-aspect-ratio-intrinsic-size-002.html
+ Fail => Pass css/css-tables/min-height-table.html
+ Fail => Pass css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html
+ Fail => Pass css/css-text/white-space/break-spaces-051.html
+ Fail => Pass css/css-text/white-space/pre-line-051.html
+ Fail => Pass css/css-text/white-space/pre-wrap-051.html
+ Fail => Pass css/css-text/white-space/white-space-pre-051.html
+ Fail => Pass css/css-transforms/transform-origin-013.html
+ Fail => Pass css/css-values/ic-unit-001.html
+ Fail => Pass css/css-writing-modes/contiguous-floated-table-vlr-007.xht
+ Fail => Pass css/css-writing-modes/contiguous-floated-table-vlr-009.xht
+ Fail => Pass css/css-writing-modes/contiguous-floated-table-vrl-006.xht
+ Fail => Pass css/css-writing-modes/contiguous-floated-table-vrl-008.xht
+ Fail => Pass css/css-writing-modes/percent-margin-vlr-003.xht
+ Fail => Pass css/css-writing-modes/percent-margin-vrl-002.xht

Generated by the WPT workflow.

@nicoburns nicoburns self-assigned this Aug 4, 2026
@staging-devin-ai-integration

Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@staging-devin-ai-integration
staging-devin-ai-integration Bot force-pushed the devin/1785836560-grid-template-areas-size branch from d20dc84 to e47a970 Compare August 5, 2026 15:23
@nicoburns nicoburns closed this Aug 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant