Files
rust_browser/tests/goldens/fixtures/177-z-index-deep-stacking.html
Zachary D. Rowitsch 62c3a5c918 Fix z-index stacking order for deep stacking-context descendants
The display list builder only categorized direct children into CSS
paint-order buckets. Stacking-context elements nested inside normal-flow
intermediaries (like <body>) rendered in document order instead of at
the correct steps 2/7 per CSS 2.1 Appendix E. This caused elements
with explicit z-index to paint incorrectly relative to siblings.

Add a recursive tree walk (collect_stacking_participants) that collects
stacking-context descendants from the entire subtree, tracking ancestor
overflow:hidden clip rects. Hoisted elements render with preserved clips
via render_with_ancestor_clips. Skip guards in render_layout_box_normal
and render_non_inline_descendants prevent double-rendering.

Scope is limited to stacking contexts (positioned + z-index) to avoid
regressions with float paint ordering. Positioned-auto deep hoisting
and stacking contexts inside floats are documented follow-ups.

Promotes 4 WPT tests, demotes 1 (pre-existing step 3/5 limitation).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-27 06:24:52 -05:00

34 lines
880 B
HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.fixed-bg {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: red;
/* z-index: auto (no stacking context) */
}
.relative-fg {
position: relative;
z-index: 2;
width: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<!-- fixed-bg is a direct child of body, positioned with z-index auto -->
<div class="fixed-bg"></div>
<!-- relative-fg is also a direct child of body, creates stacking context with z-index:2 -->
<!-- It should paint ON TOP of fixed-bg because z-index:2 > z-index:auto -->
<div class="relative-fg"></div>
</body>
</html>