layout: Rewrite clipping to be a two-phase process that takes physical

border box positions and transforms into account.

Clipping region computation now follows a simple process: (1) in the
parent's coordinate system, parents store appropriate clipping regions
into children; (2) each child moves its clipping region to its own
coordinate system if necessary.

Because clipping region computation is now based on stacking-relative
border box positions and the `transform_rect` method, it can handle
`position: relative` offsets and more types of transforms, such as
scaling.

Improves etsy.com.

Closes #13753.
This commit is contained in:
Patrick Walton 2016-10-13 14:48:30 -07:00 committed by Michael Howell
parent 759185abe0
commit 7df456e8ac
9 changed files with 251 additions and 162 deletions

View file

@ -4668,6 +4668,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/relative_position_clip_a.html": [
{
"path": "css/relative_position_clip_a.html",
"references": [
[
"/_mozilla/css/relative_position_clip_ref.html",
"=="
]
],
"url": "/_mozilla/css/relative_position_clip_a.html"
}
],
"css/relative_position_vertical_percentage_a.html": [
{
"path": "css/relative_position_vertical_percentage_a.html",
@ -18486,6 +18498,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/relative_position_clip_a.html": [
{
"path": "css/relative_position_clip_a.html",
"references": [
[
"/_mozilla/css/relative_position_clip_ref.html",
"=="
]
],
"url": "/_mozilla/css/relative_position_clip_a.html"
}
],
"css/relative_position_vertical_percentage_a.html": [
{
"path": "css/relative_position_vertical_percentage_a.html",

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="relative_position_clip_ref.html">
<style>
body, html {
margin: 0;
}
#a {
overflow: hidden;
}
#b {
background: lightgray;
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
<div id=a><div id=b>X

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
}
div {
background: lightgray;
}
</style>
<div>X