Fix positioning of statically positioned fixed child of absolutes

This commit is contained in:
Martin Robinson 2023-06-22 11:28:26 +02:00
parent d3bb2170b8
commit 63a6b73f9a
No known key found for this signature in database
GPG key ID: D56AA4FA55EFE6F8
6 changed files with 37 additions and 6 deletions

View file

@ -626,8 +626,19 @@ impl HoistedAbsolutelyPositionedBox {
)
};
positioning_context.layout_collected_children(layout_context, &mut new_fragment);
// Any hoisted boxes that remain in this positioning context are going to be hoisted
// up above this absolutely positioned box. These will necessarily be fixed position
// elements, because absolutely positioned elements form containing blocks for all
// other elements. If any of them have a static start position though, we need to
// adjust it to account for the start corner of this absolute.
positioning_context.adjust_static_position_of_hoisted_fragments_with_offset(
&new_fragment.content_rect.start_corner,
);
for_nearest_containing_block_for_all_descendants
.extend(positioning_context.for_nearest_containing_block_for_all_descendants);
new_fragment
}
}

View file

@ -31605,6 +31605,19 @@
{}
]
],
"static-fixed-inside-abspos.html": [
"e3c3aa450d42505557b1f3eefd0aee8ea63fa4d6",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"static-inside-inline-block.html": [
"327e8e6dacdeabb4d2d57ab700d80f966ccde76b",
[

View file

@ -1,2 +0,0 @@
[hypothetical-dynamic-change-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[hypothetical-dynamic-change-002.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[position-fixed-scroll-nested-fixed.html]
expected: FAIL

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Static position fixed inside static position absolute</title>
<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: absolute; width: 100px; height: 100px; background: green;">
<div style="position: absolute; width: 50px; height: 50px; margin-left: 50px; margin-top: 50px; background: red;">
<div style="position: fixed; width: 50px; height: 50px; background: green;"></div>
</div>
</div>