mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Properly position absolutes with static insets that are children of floats
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
Oriol Brufau
parent
9edc2c664f
commit
30ab348116
17 changed files with 114 additions and 135 deletions
|
|
@ -4,8 +4,6 @@
|
|||
|
||||
//! Flow layout, also known as block-and-inline layout.
|
||||
|
||||
use std::ops::DerefMut;
|
||||
|
||||
use crate::cell::ArcRefCell;
|
||||
use crate::context::LayoutContext;
|
||||
use crate::flow::float::{ClearSide, ContainingBlockPositionInfo, FloatBox, SequentialLayoutState};
|
||||
|
|
@ -299,7 +297,7 @@ fn layout_block_level_children_in_parallel(
|
|||
let fragments = layout_results
|
||||
.into_iter()
|
||||
.map(|(mut fragment, mut child_positioning_context)| {
|
||||
placement_state.place_fragment(&mut fragment);
|
||||
placement_state.place_fragment(&mut fragment, None);
|
||||
child_positioning_context.adjust_static_position_of_hoisted_fragments(&fragment);
|
||||
positioning_context.append(child_positioning_context);
|
||||
fragment
|
||||
|
|
@ -341,9 +339,7 @@ fn layout_block_level_children_sequentially(
|
|||
Some(&mut *sequential_layout_state),
|
||||
);
|
||||
|
||||
placement_state.place_fragment(&mut fragment);
|
||||
placement_state
|
||||
.adjust_positions_of_float_children(&mut fragment, sequential_layout_state);
|
||||
placement_state.place_fragment(&mut fragment, Some(sequential_layout_state));
|
||||
child_positioning_context.adjust_static_position_of_hoisted_fragments(&fragment);
|
||||
positioning_context.append(child_positioning_context);
|
||||
fragment
|
||||
|
|
@ -796,7 +792,11 @@ impl PlacementState {
|
|||
}
|
||||
}
|
||||
|
||||
fn place_fragment(&mut self, fragment: &mut Fragment) {
|
||||
fn place_fragment(
|
||||
&mut self,
|
||||
fragment: &mut Fragment,
|
||||
sequential_layout_state: Option<&mut SequentialLayoutState>,
|
||||
) {
|
||||
match fragment {
|
||||
Fragment::Box(fragment) => {
|
||||
let fragment_block_margins = &fragment.block_margins_collapsed_with_children;
|
||||
|
|
@ -855,7 +855,25 @@ impl PlacementState {
|
|||
};
|
||||
fragment.borrow_mut().adjust_offsets(offset);
|
||||
},
|
||||
Fragment::Anonymous(_) | Fragment::Float(_) => {},
|
||||
Fragment::Float(box_fragment) => {
|
||||
// When Float fragments are created in block flows, they are positioned
|
||||
// relative to the float containing independent block formatting context.
|
||||
// Once we place a float's containing block, this function can be used to
|
||||
// fix up the float position to be relative to the containing block.
|
||||
let sequential_layout_state = sequential_layout_state
|
||||
.expect("Found float fragment without SequentialLayoutState");
|
||||
let containing_block_info = &sequential_layout_state.floats.containing_block_info;
|
||||
let margin = containing_block_info
|
||||
.block_start_margins_not_collapsed
|
||||
.adjoin(&self.start_margin);
|
||||
let parent_fragment_offset_in_formatting_context = Vec2 {
|
||||
inline: containing_block_info.inline_start,
|
||||
block: containing_block_info.block_start + margin.solve(),
|
||||
};
|
||||
box_fragment.content_rect.start_corner = &box_fragment.content_rect.start_corner -
|
||||
&parent_fragment_offset_in_formatting_context;
|
||||
},
|
||||
Fragment::Anonymous(_) => {},
|
||||
_ => unreachable!(),
|
||||
}
|
||||
}
|
||||
|
|
@ -874,53 +892,4 @@ impl PlacementState {
|
|||
},
|
||||
)
|
||||
}
|
||||
|
||||
/// When Float fragments are created in block flows, they are positioned
|
||||
/// relative to the float containing independent block formatting context.
|
||||
/// Once we place a float's containing block, this function can be used to
|
||||
/// fix up the float position to be relative to the containing block.
|
||||
fn adjust_positions_of_float_children(
|
||||
&self,
|
||||
fragment: &mut Fragment,
|
||||
sequential_layout_state: &mut SequentialLayoutState,
|
||||
) {
|
||||
let fragment = match fragment {
|
||||
Fragment::Box(ref mut fragment) => fragment,
|
||||
_ => return,
|
||||
};
|
||||
|
||||
// TODO(mrobinson): Will these margins be accurate if this fragment
|
||||
// collapses through. Can a fragment collapse through when it has a
|
||||
// non-zero sized float inside? The float won't be positioned correctly
|
||||
// anyway (see the comment in `floats.rs` about margin collapse), but
|
||||
// this might make the result even worse.
|
||||
let collapsed_margins = self.start_margin.adjoin(
|
||||
&sequential_layout_state
|
||||
.floats
|
||||
.containing_block_info
|
||||
.block_start_margins_not_collapsed,
|
||||
);
|
||||
|
||||
let parent_fragment_offset_in_cb = &fragment.content_rect.start_corner;
|
||||
let parent_fragment_offset_in_formatting_context = Vec2 {
|
||||
inline: sequential_layout_state
|
||||
.floats
|
||||
.containing_block_info
|
||||
.inline_start +
|
||||
parent_fragment_offset_in_cb.inline,
|
||||
block: sequential_layout_state
|
||||
.floats
|
||||
.containing_block_info
|
||||
.block_start +
|
||||
collapsed_margins.solve() +
|
||||
parent_fragment_offset_in_cb.block,
|
||||
};
|
||||
|
||||
for child_fragment in fragment.children.iter_mut() {
|
||||
if let Fragment::Float(box_fragment) = child_fragment.borrow_mut().deref_mut() {
|
||||
box_fragment.content_rect.start_corner = &box_fragment.content_rect.start_corner -
|
||||
&parent_fragment_offset_in_formatting_context;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -167,8 +167,8 @@ impl PositioningContext {
|
|||
parent_fragment: &Fragment,
|
||||
) {
|
||||
let fragment_rect = match &parent_fragment {
|
||||
Fragment::Box(b) => &b.content_rect,
|
||||
Fragment::AbsoluteOrFixedPositioned(_) | Fragment::Float(_) => return,
|
||||
Fragment::Box(b) | Fragment::Float(b) => &b.content_rect,
|
||||
Fragment::AbsoluteOrFixedPositioned(_) => return,
|
||||
Fragment::Anonymous(a) => &a.rect,
|
||||
_ => unreachable!(),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[border-right-width-095.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[clear-with-top-margin-after-cleared-empty-block.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[margin-collapse-min-height-001.xht]
|
||||
expected: FAIL
|
||||
|
|
@ -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",
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[absolute_hypothetical_float.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[floats_margin_collapse_a.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[floats_margin_collapse_with_clearance_a.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[overflow_clipping.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position_relative_stacking_context_contents_a.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[stacked_layers.html]
|
||||
expected: FAIL
|
||||
|
|
@ -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",
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue