mirror of
https://github.com/servo/servo.git
synced 2025-07-22 23:03:42 +01:00
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?
This commit is contained in:
parent
3b7e426d33
commit
6c9efbf383
5 changed files with 114 additions and 11 deletions
|
@ -1388,7 +1388,7 @@ impl DisplayItem {
|
||||||
|
|
||||||
impl fmt::Debug for DisplayItem {
|
impl fmt::Debug for DisplayItem {
|
||||||
fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
|
fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
|
||||||
write!(f, "{} @ {:?}",
|
write!(f, "{} @ {:?} {:?}",
|
||||||
match *self {
|
match *self {
|
||||||
DisplayItem::SolidColorClass(ref solid_color) =>
|
DisplayItem::SolidColorClass(ref solid_color) =>
|
||||||
format!("SolidColor rgba({}, {}, {}, {})",
|
format!("SolidColor rgba({}, {}, {}, {})",
|
||||||
|
@ -1408,6 +1408,7 @@ impl fmt::Debug for DisplayItem {
|
||||||
DisplayItem::IframeClass(_) => "Iframe".to_owned(),
|
DisplayItem::IframeClass(_) => "Iframe".to_owned(),
|
||||||
},
|
},
|
||||||
self.bounds(),
|
self.bounds(),
|
||||||
|
self.base().clip
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1743,15 +1743,46 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add the box that starts the block context.
|
// Add the box that starts the block context.
|
||||||
let translated_clip = if establishes_stacking_context {
|
let mut clip = self.base.clip.clone();
|
||||||
Some(self.base.clip.translate(&-self.base.stacking_relative_position))
|
|
||||||
} else {
|
if establishes_stacking_context {
|
||||||
None
|
clip = clip.translate(&-self.base.stacking_relative_position)
|
||||||
};
|
}
|
||||||
let clip = match translated_clip {
|
|
||||||
Some(ref translated_clip) => translated_clip,
|
// TODO(notriddle): To properly support transformations, we either need
|
||||||
None => &self.base.clip,
|
// 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
|
self.fragment
|
||||||
.build_display_list(state,
|
.build_display_list(state,
|
||||||
|
@ -1764,7 +1795,7 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
|
||||||
.relative_containing_block_mode,
|
.relative_containing_block_mode,
|
||||||
border_painting_mode,
|
border_painting_mode,
|
||||||
background_border_section,
|
background_border_section,
|
||||||
clip,
|
&clip,
|
||||||
&self.base.stacking_relative_position_of_display_port);
|
&self.base.stacking_relative_position_of_display_port);
|
||||||
|
|
||||||
self.base.build_display_items_for_debugging_tint(state, self.fragment.node);
|
self.base.build_display_items_for_debugging_tint(state, self.fragment.node);
|
||||||
|
|
|
@ -5031,6 +5031,18 @@
|
||||||
"url": "/_mozilla/css/transition_calc.html"
|
"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": [
|
"css/upper_id_attr.html": [
|
||||||
{
|
{
|
||||||
"path": "css/upper_id_attr.html",
|
"path": "css/upper_id_attr.html",
|
||||||
|
@ -11525,6 +11537,18 @@
|
||||||
"url": "/_mozilla/css/transition_calc.html"
|
"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": [
|
"css/upper_id_attr.html": [
|
||||||
{
|
{
|
||||||
"path": "css/upper_id_attr.html",
|
"path": "css/upper_id_attr.html",
|
||||||
|
|
24
tests/wpt/mozilla/tests/css/translate_clip.html
Normal file
24
tests/wpt/mozilla/tests/css/translate_clip.html
Normal file
|
@ -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
tests/wpt/mozilla/tests/css/translate_clip_ref.html
Normal file
23
tests/wpt/mozilla/tests/css/translate_clip_ref.html
Normal file
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue