Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Properly position absolutes with static insets that are children of floats

Browse source 
Previously, final float positions were calculated when their parents
were positioned. This prevented proper positioning of absolute children
of floats with static insets, because they accumulate offsets as they
are hoisted up the tree.

This change moves the final float positioning to
`PlacementState::place_fragment` for the float itself so that it happens
before any insets are updated for hoisted descendants. In addition to
simplifying the code, this makes it a bit more efficient. Finally,
floats are taken into account when updating static insets of hoisted
boxes.

Fixes #29826.
This commit is contained in:
Martin Robinson 2023-06-21 08:31:55 +02:00 • committed by Oriol Brufau
parent 9edc2c664f
commit 30ab348116
17 changed files with 114 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/wpt/metadata-layout-2020/css/CSS2/borders/border-right-width-095.xht.ini
View file

@ -1,2 +0,0 @@
[border-right-width-095.xht]
expected: FAIL

2
tests/wpt/metadata-layout-2020/css/CSS2/floats-clear/clear-with-top-margin-after-cleared-empty-block.html.ini
View file

@ -1,2 +0,0 @@
[clear-with-top-margin-after-cleared-empty-block.html]
expected: FAIL

2
tests/wpt/metadata-layout-2020/css/CSS2/margin-padding-clear/margin-collapse-min-height-001.xht.ini
View file

@ -1,2 +0,0 @@
[margin-collapse-min-height-001.xht]
expected: FAIL

17
tests/wpt/metadata/MANIFEST.json
View file

@ -59963,6 +59963,19 @@
{}
]
],
"float-with-absolutely-positioned-child-with-static-inset.html": [
"7d022306a861e8be7635bb2d0a8d7db60ba147c9",
[
null,
[
[
"/css/CSS2/floats/float-with-absolutely-positioned-child-with-static-inset-ref.html",
"=="
]
],
{}
]
],
"floated-table-wider-than-specified.html": [
"f93d50e43dd3eb49d5c8964200b7fe4ebb5bd6c8",
[
@ -360016,6 +360029,10 @@
"6b46fb8eb9b890f51742f7eb6a2935677ceddbc7",
[]
],
"float-with-absolutely-positioned-child-with-static-inset-ref.html": [
"7cab50fc04b4d5788a482964e3616b906637e8e9",
[]
],
"floats-in-table-caption-001-ref.html": [
"91ddca772b7100d355c9bf766c530b78dd87a959",
[]

2
tests/wpt/mozilla/meta-layout-2020/css/absolute_hypothetical_float.html.ini
View file

@ -1,2 +0,0 @@
[absolute_hypothetical_float.html]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/floats_margin_collapse_a.html.ini
View file

@ -1,2 +0,0 @@
[floats_margin_collapse_a.html]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/floats_margin_collapse_with_clearance_a.html.ini Normal file
View file

@ -0,0 +1,2 @@
[floats_margin_collapse_with_clearance_a.html]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/overflow_clipping.html.ini
View file

@ -1,2 +0,0 @@
[overflow_clipping.html]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/position_relative_stacking_context_contents_a.html.ini
View file

@ -1,2 +0,0 @@
[position_relative_stacking_context_contents_a.html]
expected: FAIL

2
tests/wpt/mozilla/meta-layout-2020/css/stacked_layers.html.ini
View file

@ -1,2 +0,0 @@
[stacked_layers.html]
expected: FAIL

17
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -106,19 +106,6 @@
{}
]
],
"absolute_hypothetical_float.html": [
"33506180d15b5ff5e18b4f8adce4e2346e4ff811",
[
null,
[
[
"/_mozilla/css/absolute_hypothetical_float_ref.html",
"=="
]
],
{}
]
],
"absolute_hypothetical_with_intervening_inline_block_a.html": [
"54d92051775d6fa2e5e3ac3ceb1848f58ae2c653",
[
@ -8104,10 +8091,6 @@
"62d0965f205e1d40ac752ee4324469a82ef3fae4",
[]
],
"absolute_hypothetical_float_ref.html": [
"008b2a65d29bddd21f7754af0422c3366d0c9d25",
[]
],
"absolute_hypothetical_with_intervening_inline_block_ref.html": [
"985e941cdd9fafd6412cf2e76955ee6b614affdc",
[]

22
tests/wpt/mozilla/tests/css/absolute_hypothetical_float.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel=match href=absolute_hypothetical_float_ref.html>
<style>
#a {
float: right;
width: 250px;
}
#b {
background: blue;
position: absolute;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id=a><div id=b>asdf</div></div>
</body>
</html>

21
tests/wpt/mozilla/tests/css/absolute_hypothetical_float_ref.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
#a {
float: right;
width: 250px;
}
#b {
background: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id=a><div id=b>asdf</div></div>
</body>
</html>

32
tests/wpt/web-platform-tests/css/CSS2/floats/float-with-absolutely-positioned-child-with-static-inset-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position">
<meta name="assert" content="An absolutely positioned child of a float with a static inset should be positioned the same as a non-positioned child of that float." />
<style>
#float {
float: right;
width: 250px;
}
#abs-child {
background: green;
width: 100px;
height: 100px;
}
#abs-grandchild {
background: darkgreen;
width: 50px;
height: 50px;
}
</style>
<body>
<div id="float">
<div id="abs-child">
<div id="abs-grandchild"></div>
</div>
</div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/CSS2/floats/float-with-absolutely-positioned-child-with-static-inset.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position">
<link rel="match" href="float-with-absolutely-positioned-child-with-static-inset-ref.html">
<meta name="assert" content="An absolutely positioned child of a float with a static inset should be positioned the same as a non-positioned child of that float." />
<style>
#float {
float: right;
width: 250px;
}
#abs-child {
background: green;
position: absolute;
width: 100px;
height: 100px;
}
#abs-grandchild {
background: darkgreen;
position: absolute;
width: 50px;
height: 50px;
}
</style>
<body>
<div id="float">
<div id="abs-child">
<div id="abs-grandchild"></div>
</div>
</div>
</body>
</html>