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 -->
This commit is contained in:
bors-servo 2016-04-13 07:12:38 +05:30
commit 7e63c1be63
5 changed files with 114 additions and 11 deletions

View file

@ -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",
@ -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",

View 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>

View 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>