Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-25 09:34:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Clip the immediate fragments of block flows that establish

Browse source 
stacking contexts properly.

The code that existed before correctly translated the clips of child
elements, but not those of immediate display items belonging to the flow
itself.

Makes Leaflet.js maps usable.
This commit is contained in:
Patrick Walton 2015-04-15 17:04:57 -07:00
parent 045831748e
commit 14a544b64c
4 changed files with 90 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/layout/display_list_builder.rs
View file

@ -1253,6 +1253,11 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
layout_context: &LayoutContext, layout_context: &LayoutContext,
background_border_level: BackgroundAndBorderLevel) { background_border_level: BackgroundAndBorderLevel) {
// Add the box that starts the block context. // Add the box that starts the block context.
let clip = if self.fragment.establishes_stacking_context() {
self.base.clip.translate(&-self.base.stacking_relative_position)
} else {
self.base.clip.clone()
};
self.fragment.build_display_list(display_list, self.fragment.build_display_list(display_list,
layout_context, layout_context,
&self.base.stacking_relative_position, &self.base.stacking_relative_position,
@ -1263,7 +1268,7 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
.absolute_position_info .absolute_position_info
.relative_containing_block_mode, .relative_containing_block_mode,
background_border_level, background_border_level,
&self.base.clip); &clip);
// Add children. // Add children.
for kid in self.base.children.iter_mut() { for kid in self.base.children.iter_mut() {

42
tests/ref/absolute_clipping_of_own_contents_a.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that clipping is preserved properly for nested `position: absolute` elements. -->
<style>
body, html {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 256px;
background: lightblue;
overflow: hidden;
}
#outer {
position: absolute;
left: -128px;
top: -128px;
}
#inner {
position: absolute;
background: navy;
width: 256px;
height: 256px;
left: 128px;
top: 0;
}
</style>
</head>
<body>
<div id=map>
<div id=outer>
<div id=inner></div>
</div>
</div>
</body>
</html>

41
tests/ref/absolute_clipping_of_own_contents_ref.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that clipping is preserved properly for nested `position: absolute` elements. -->
<style>
body, html {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 256px;
background: lightblue;
}
#outer {
position: absolute;
left: -128px;
top: -128px;
}
#inner {
position: absolute;
background: navy;
width: 256px;
height: 256px;
left: 128px;
top: 0;
}
</style>
</head>
<body>
<div id=map>
<div id=outer>
<div id=inner></div>
</div>
</div>
</body>
</html>

1
tests/ref/basic.list
View file

@ -39,6 +39,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
== 2dcontext/transform_a.html 2dcontext/transform_ref.html == 2dcontext/transform_a.html 2dcontext/transform_ref.html
== abs_float_pref_width_a.html abs_float_pref_width_ref.html == abs_float_pref_width_a.html abs_float_pref_width_ref.html
== absolute_clipping_of_own_contents_a.html absolute_clipping_of_own_contents_ref.html
== absolute_content_height_a.html absolute_content_height_ref.html == absolute_content_height_a.html absolute_content_height_ref.html
== absolute_hypothetical_float_a.html absolute_hypothetical_float_ref.html == absolute_hypothetical_float_a.html absolute_hypothetical_float_ref.html
== acid1_a.html acid1_b.html == acid1_a.html acid1_b.html