Skip to content

Commit 95ce050

Browse files
emiliomoz-wptsync-bot
emilio
authored and
moz-wptsync-bot
committed
Fix line scrollable frame overflow with perspective.
The optimization where we avoid UpdateOverflow if clipped on both axes is not sound, because it has side effects like updating nsBlockFrame's line overflow. Also, make the recursive path update overflows of anonymous boxes like the scrolled frame. Differential Revision: https://phabricator.services.mozilla.com/D289548 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2023621 gecko-commit: a7ae9ac3a9b5522754aebcbe8709b9e92144f084 gecko-commit-git: 7619a268a5891b557d86bd2aff52c3321590b54d gecko-reviewers: layout-reviewers, dshin
1 parent 6fe6df3 commit 95ce050

File tree

4 files changed

+103
-0
lines changed

4 files changed

+103
-0
lines changed

‎css/css-transforms/overflow-perspective-001.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Test: Perspective with overflow: auto</title>
4+
<link rel="author" title="Mozilla" href="https://mozilla.com">
5+
<link rel="author" title="Yannis Juglaret" href="mailto:yjuglaret@mozilla.com">
6+
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
7+
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2023621">
8+
<link rel="match" href="overflow-perspective-ref.html">
9+
<style>
10+
#container {
11+
width: 300px;
12+
height: 300px;
13+
overflow: auto;
14+
perspective: 1000px;
15+
}
16+
17+
#child {
18+
width: 60px;
19+
height: 60px;
20+
background: lime;
21+
transform: translateX(100px) translateY(140px) translateZ(550px);
22+
transform-origin: top left;
23+
}
24+
</style>
25+
<div id="container">
26+
<div id="child"></div>
27+
</div>

‎css/css-transforms/overflow-perspective-002.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Test: Perspective with overflow: clip</title>
4+
<link rel="author" title="Mozilla" href="https://mozilla.com">
5+
<link rel="author" title="Yannis Juglaret" href="mailto:yjuglaret@mozilla.com">
6+
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
7+
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2023621">
8+
<link rel="match" href="overflow-perspective-ref.html">
9+
<style>
10+
#container {
11+
width: 300px;
12+
height: 300px;
13+
overflow: clip;
14+
perspective: 1000px;
15+
}
16+
17+
#child {
18+
width: 60px;
19+
height: 60px;
20+
background: lime;
21+
transform: translateX(100px) translateY(140px) translateZ(550px);
22+
transform-origin: top left;
23+
}
24+
</style>
25+
<div id="container">
26+
<div id="child"></div>
27+
</div>

‎css/css-transforms/overflow-perspective-003.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Test: Perspective with overflow: hidden</title>
4+
<link rel="author" title="Mozilla" href="https://mozilla.com">
5+
<link rel="author" title="Yannis Juglaret" href="mailto:yjuglaret@mozilla.com">
6+
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
7+
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2023621">
8+
<link rel="match" href="overflow-perspective-ref.html">
9+
<style>
10+
#container {
11+
width: 300px;
12+
height: 300px;
13+
overflow: hidden;
14+
perspective: 1000px;
15+
}
16+
17+
#child {
18+
width: 60px;
19+
height: 60px;
20+
background: lime;
21+
transform: translateX(100px) translateY(140px) translateZ(550px);
22+
transform-origin: top left;
23+
}
24+
</style>
25+
<div id="container">
26+
<div id="child"></div>
27+
</div>

‎css/css-transforms/overflow-perspective-ref.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Test (Transforms): Perspective with overflow - reference</title>
4+
<style>
5+
#container {
6+
width: 300px;
7+
height: 300px;
8+
overflow: visible;
9+
perspective: 1000px;
10+
}
11+
12+
#child {
13+
width: 60px;
14+
height: 60px;
15+
background: lime;
16+
transform: translateX(100px) translateY(140px) translateZ(550px);
17+
transform-origin: top left;
18+
}
19+
</style>
20+
<div id="container">
21+
<div id="child"></div>
22+
</div>

0 commit comments

Comments
 (0)