Auto merge of #7834 - notriddle:float-stacking, r=pcwalton

Create a pseudo-stacking context for positioned floats.

Fixes #7828 

That was surprisingly easy...

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7834)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-10-05 12:30:10 -06:00
commit 297184c6e0
5 changed files with 63 additions and 8 deletions

View file

@ -1594,11 +1594,8 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
scroll_policy,
StackingContextCreationMode::Normal))
} else {
match self.fragment.style.get_box().position {
position::T::static_ => {}
_ => {
display_list.form_pseudo_stacking_context_for_positioned_content();
}
if self.fragment.style.get_box().position != position::T::static_ {
display_list.form_pseudo_stacking_context_for_positioned_content();
}
DisplayListBuildingResult::Normal(display_list)
}
@ -1717,6 +1714,9 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
ScrollPolicy::Scrollable,
StackingContextCreationMode::Normal))
} else {
if self.fragment.style.get_box().position != position::T::static_ {
display_list.form_pseudo_stacking_context_for_positioned_content();
}
DisplayListBuildingResult::Normal(display_list)
}
}

View file

@ -113,6 +113,7 @@ prefs:"layout.flex.enabled" == flex_row_direction.html flex_row_direction_ref.ht
== float_intrinsic_height.html float_intrinsic_height_ref.html
== float_intrinsic_width_a.html float_intrinsic_width_ref.html
== float_overflow_area_a.html float_overflow_area_ref.html
== float_positioned_pseudo_stacking_context.html float_positioned_pseudo_stacking_context_ref.html
== float_right_intrinsic_width_a.html float_right_intrinsic_width_ref.html
== float_table_a.html float_table_ref.html
== float_under_top_margin_a.html float_under_top_margin_ref.html

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0; padding: 0;
}
div {
width: 100px;
height: 100px;
}
#a {
position: absolute;
top: 20px;
left: 20px;
background: red;
}
#b {
float: left;
position: relative;
background: green;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
</body>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0; padding: 0;
}
div {
width: 100px;
height: 100px;
}
#a {
position: absolute;
top: 20px;
left: 20px;
background: red;
}
#b {
position: relative;
background: green;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
</body>

View file

@ -1,3 +0,0 @@
[anonymous-boxes-001.htm]
type: reftest
expected: FAIL