Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Auto merge of #10486 - notriddle:overflow_premature_clip, r=pcwalton
Take transform:translate into account when computing clipping regions.

Note that this only works for translation; a more general fix would
require major changes to how display lists work.

Closes #10431?

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/10486)
<!-- Reviewable:end -->
  • Loading branch information
bors-servo committed Apr 13, 2016
2 parents bbcbd35 + 6c9efbf commit 7e63c1b
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 11 deletions.
3 changes: 2 additions & 1 deletion components/gfx/display_list/mod.rs
Expand Up @@ -1388,7 +1388,7 @@ impl DisplayItem {

impl fmt::Debug for DisplayItem {
fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
write!(f, "{} @ {:?}",
write!(f, "{} @ {:?} {:?}",
match *self {
DisplayItem::SolidColorClass(ref solid_color) =>
format!("SolidColor rgba({}, {}, {}, {})",
Expand All @@ -1408,6 +1408,7 @@ impl fmt::Debug for DisplayItem {
DisplayItem::IframeClass(_) => "Iframe".to_owned(),
},
self.bounds(),
self.base().clip
)
}
}
Expand Down
51 changes: 41 additions & 10 deletions components/layout/display_list_builder.rs
Expand Up @@ -1743,15 +1743,46 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
};

// Add the box that starts the block context.
let translated_clip = if establishes_stacking_context {
Some(self.base.clip.translate(&-self.base.stacking_relative_position))
} else {
None
};
let clip = match translated_clip {
Some(ref translated_clip) => translated_clip,
None => &self.base.clip,
};
let mut clip = self.base.clip.clone();

if establishes_stacking_context {
clip = clip.translate(&-self.base.stacking_relative_position)
}

// TODO(notriddle): To properly support transformations, we either need
// non-rectangular clipping regions in display lists, or clipping
// regions in terms of the parent coordinate system instead of the
// child coordinate system.
//
// This is a workaround for a common idiom of transform: translate().
if let Some(ref operations) = self.fragment.style().get_effects().transform.0 {
for operation in operations {
match *operation {
transform::ComputedOperation::Translate(tx, ty, _) => {
// N.B. When the clipping value comes from us, it
// shouldn't be transformed.
let tx = if let overflow_x::T::hidden = self.fragment.style().get_box()
.overflow_x {
Au(0)
} else {
model::specified(tx, self.base.block_container_inline_size)
};
let ty = if let overflow_x::T::hidden = self.fragment.style().get_box()
.overflow_y.0 {
Au(0)
} else {
model::specified(
ty,
self.base.block_container_explicit_block_size.unwrap_or(Au(0))
)
};
let off = Point2D::new(tx, ty);
clip = clip.translate(&-off);
}
_ => {}
};
}
}

self.fragment
.build_display_list(state,
Expand All @@ -1764,7 +1795,7 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
.relative_containing_block_mode,
border_painting_mode,
background_border_section,
clip,
&clip,
&self.base.stacking_relative_position_of_display_port);

self.base.build_display_items_for_debugging_tint(state, self.fragment.node);
Expand Down
24 changes: 24 additions & 0 deletions tests/wpt/mozilla/meta/MANIFEST.json
Expand Up @@ -5043,6 +5043,18 @@
"url": "/_mozilla/css/transition_calc.html"
}
],
"css/translate_clip.html": [
{
"path": "css/translate_clip.html",
"references": [
[
"/_mozilla/css/translate_clip_ref.html",
"=="
]
],
"url": "/_mozilla/css/translate_clip.html"
}
],
"css/upper_id_attr.html": [
{
"path": "css/upper_id_attr.html",
Expand Down Expand Up @@ -11561,6 +11573,18 @@
"url": "/_mozilla/css/transition_calc.html"
}
],
"css/translate_clip.html": [
{
"path": "css/translate_clip.html",
"references": [
[
"/_mozilla/css/translate_clip_ref.html",
"=="
]
],
"url": "/_mozilla/css/translate_clip.html"
}
],
"css/upper_id_attr.html": [
{
"path": "css/upper_id_attr.html",
Expand Down
24 changes: 24 additions & 0 deletions tests/wpt/mozilla/tests/css/translate_clip.html
@@ -0,0 +1,24 @@
<!doctype html>
<meta charset="utf-8">
<link rel="match" href="translate_clip_ref.html">
<style>
body {
margin: 0;
}
.red {
height: 100px;
width: 100px;
overflow: hidden;
background-color: red;
}
.green {
width: 100px;
height: 100px;
position: absolute;
left: -50px;
transform: translateX(50px);
background-color: green;
}
</style>

<div class="red"><div class="green"></div></div>
23 changes: 23 additions & 0 deletions tests/wpt/mozilla/tests/css/translate_clip_ref.html
@@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
.red {
height: 100px;
width: 100px;
overflow: hidden;
background-color: red;
}
.green {
width: 100px;
height: 100px;
position: absolute;
left: 0;
background-color: green;
}
</style>

<div class="red"><div class="green"></div></div>

0 comments on commit 7e63c1b

Please sign in to comment.