Skip to content

Apply root element margins and propagate body background to the canvas - #640

Open
nicoburns wants to merge 1 commit into
mainfrom
devin/1786501200-root-margin-body-bg
Open

Apply root element margins and propagate body background to the canvas#640
nicoburns wants to merge 1 commit into
mainfrom
devin/1786501200-root-margin-body-bg

Conversation

@nicoburns

@nicoburns nicoburns commented Aug 8, 2026

Copy link
Copy Markdown
Member

Summary

Fixes WPT css/CSS2/margin-padding-clear/margin-collapse-020.xht and margin-collapse-021.xht.

Two related root/body issues:

  1. Root element marginstaffy::compute_root_layout resolves the root element's margins but always positions its border box at the origin. resolve_layout now offsets the root's location by its resolved margins after root layout (RTL-aware for the horizontal axis); per CSS2 §8.3.1 the root's margins never collapse with descendants.

  2. Body background propagation (CSS Backgrounds §2.11.2) — when the root element's background is entirely transparent/none, the body's background propagates to the canvas. Previously only the body's background color was used as the canvas color while the body still painted its background at its own position; with root margins applied this left the canvas mispositioned relative to the test's expectation. BlitzDomPainter now resolves a canvas_bg_body_id up front; that body's background (color and images) is painted for the canvas with its positioning area determined as if it were painted for the root element, and is skipped during the body's own painting:

paint_scene:
  fill viewport with body's background-color
  draw body's background with root element's layout/transform
render_element:
  if canvas_bg_body_id != Some(node_id) { cx.draw_background(scene) }

background_is_none checks both background-color: transparent and all background-image: none, so a root with only a background image (as in margin-collapse-020) correctly prevents propagation.

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

WPT results

16 newly passing, 7 newly failing (net +9).

Full diff (23 changed tests)
- Pass => Fail css/CSS2/backgrounds/background-position-002.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-004.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-005.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-006.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-011.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-012a.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-012b.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-013a.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-013b.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-014a.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-014b.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-015.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-017.xht
+ Fail => Pass css/CSS2/backgrounds/background-root-020.xht
- Pass => Fail css/CSS2/floats-clear/margin-collapse-clear-017.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-020.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-021.xht
+ Fail => Pass css/CSS2/normal-flow/root-box-001.xht
- Pass => Fail css/css-backgrounds/box-shadow-body.html
- Pass => Fail css/css-image-animation/image-animation-body-background-no-propagation-paused.html
- Pass => Fail css/css-images/linear-gradient-body-sibling-index.html
- Pass => Fail css/css-transforms/perspective-split-by-zero-w.html
- Pass => Fail css/css-transforms/transform-background-007.html

Generated by the WPT workflow.

The root element's margins offset its border box within the viewport (they
never collapse with descendants per CSS2 8.3.1), but compute_root_layout
always positions the border box at the origin.

When the root element's background is entirely transparent/none, the body's
background propagates to the canvas (CSS Backgrounds 2.11.2): it is painted
across the whole canvas with its positioning area determined as if it were
painted for the root element, and the body does not paint it again itself.

Fixes WPT margin-collapse-020/021.
@nicoburns nicoburns self-assigned this Aug 8, 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

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