Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Take transform:translate into account when computing clipping regions.

Browse source 
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:
Michael Howell 2016-04-08 13:50:42 -07:00
parent 3b7e426d33
commit 6c9efbf383
5 changed files with 114 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

24
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -5031,6 +5031,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",
@ -11525,6 +11537,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",

24
tests/wpt/mozilla/tests/css/translate_clip.html Normal file
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>

23
tests/wpt/mozilla/tests/css/translate_clip_ref.html Normal file
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>