Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-03 02:25:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1495470: Only let 'contain:layout/paint' create stacking contexts on frames that support it. r=dbaron

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D7926

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Daniel Holbert 2018-10-09 21:04:03 +00:00
parent ca1d6f470f
commit 12fe521b72
8 changed files with 311 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layout/generic/nsFrame.cpp
View File

@ -10967,8 +10967,9 @@ nsIFrame::IsStackingContext(EffectSet* aEffectSet,
{
return HasOpacity(aEffectSet) ||
IsTransformed(aStyleDisplay) ||
aStyleDisplay->IsContainPaint() ||
aStyleDisplay->IsContainLayout() ||
(IsFrameOfType(eSupportsContainLayoutAndPaint) &&
(aStyleDisplay->IsContainPaint() ||
aStyleDisplay->IsContainLayout())) ||
// strictly speaking, 'perspective' doesn't require visual atomicity,
// but the spec says it acts like the rest of these
ChildrenHavePerspective(aStyleDisplay) ||

76
layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-ib-split-001-ref.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<style>
.abspos-box {
position: absolute;
width: 200px;
height: 200px;
}
/* The boxes should stack in the order that I've listed their CSS classes
here. The class names' first word (outside/before/inside/after) refers
to the boxes' DOM position, and "background"/"midground"/"foreground"
refers to their z-index values. */
.before-IB-background {
background: darkmagenta;
z-index: -1;
top: 50px;
left: 50px;
}
.after-IB-background {
background: magenta;
z-index: -1;
top: 70px;
left: 70px;
}
.outside-span-midground {
background: darkkhaki;
top: 90px;
left: 90px;
}
.inside-IB-midground {
background: khaki;
top: 110px;
left: 110px;
}
.before-IB-foreground {
background: darkcyan;
z-index: 1;
top: 130px;
left: 130px;
}
.after-IB-foreground {
background: cyan;
z-index: 1;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<!-- The expectation here is that 'abspos-box' elements will all interact in
the same top-level stacking context. That means the box ordering should
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
with the boxes stacked (visually) from top-left to bottom-right. -->
<div class="abspos-box outside-span-midground"></div>
<!-- Note: this file is identical to the testcase,
except for the lack of "contain: layout" on this span. -->
<span>
<div class="abspos-box before-IB-background"></div>
<div class="abspos-box before-IB-foreground"></div>
<!-- This unstyled div crates the IB split: -->
<div>
<div class="abspos-box inside-IB-midground"></div>
</div>
<div class="abspos-box after-IB-background"></div>
<div class="abspos-box after-IB-foreground"></div>
</span>
</body>
</html>

77
layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-ib-split-001.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: 'contain: layout' should have no effect on non-atomic inline
(including its block part, if there's a block-in-inline split)</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
<link rel="match" href="contain-layout-ignored-cases-ib-split-001-ref.html">
<style>
.abspos-box {
position: absolute;
width: 200px;
height: 200px;
}
/* The boxes should stack in the order that I've listed their CSS classes
here. The class names' first word (outside/before/inside/after) refers
to the boxes' DOM position, and "background"/"midground"/"foreground"
refers to their z-index values. */
.before-IB-background {
background: darkmagenta;
z-index: -1;
top: 50px;
left: 50px;
}
.after-IB-background {
background: magenta;
z-index: -1;
top: 70px;
left: 70px;
}
.outside-span-midground {
background: darkkhaki;
top: 90px;
left: 90px;
}
.inside-IB-midground {
background: khaki;
top: 110px;
left: 110px;
}
.before-IB-foreground {
background: darkcyan;
z-index: 1;
top: 130px;
left: 130px;
}
.after-IB-foreground {
background: cyan;
z-index: 1;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<!-- The expectation here is that 'abspos-box' elements will all interact in
the same top-level stacking context. That means the box ordering should
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
with the boxes stacked (visually) from top-left to bottom-right. -->
<div class="abspos-box outside-span-midground"></div>
<span style="contain: layout">
<div class="abspos-box before-IB-background"></div>
<div class="abspos-box before-IB-foreground"></div>
<!-- This unstyled div crates the IB split: -->
<div>
<div class="abspos-box inside-IB-midground"></div>
</div>
<div class="abspos-box after-IB-background"></div>
<div class="abspos-box after-IB-foreground"></div>
</span>
</body>
</html>

76
layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-ib-split-001-ref.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<style>
.abspos-box {
position: absolute;
width: 200px;
height: 200px;
}
/* The boxes should stack in the order that I've listed their CSS classes
here. The class names' first word (outside/before/inside/after) refers
to the boxes' DOM position, and "background"/"midground"/"foreground"
refers to their z-index values. */
.before-IB-background {
background: darkmagenta;
z-index: -1;
top: 50px;
left: 50px;
}
.after-IB-background {
background: magenta;
z-index: -1;
top: 70px;
left: 70px;
}
.outside-span-midground {
background: darkkhaki;
top: 90px;
left: 90px;
}
.inside-IB-midground {
background: khaki;
top: 110px;
left: 110px;
}
.before-IB-foreground {
background: darkcyan;
z-index: 1;
top: 130px;
left: 130px;
}
.after-IB-foreground {
background: cyan;
z-index: 1;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<!-- The expectation here is that 'abspos-box' elements will all interact in
the same top-level stacking context. That means the box ordering should
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
with the boxes stacked (visually) from top-left to bottom-right. -->
<div class="abspos-box outside-span-midground"></div>
<!-- Note: this file is identical to the testcase,
except for the lack of "contain: paint" on this span. -->
<span>
<div class="abspos-box before-IB-background"></div>
<div class="abspos-box before-IB-foreground"></div>
<!-- This unstyled div crates the IB split: -->
<div>
<div class="abspos-box inside-IB-midground"></div>
</div>
<div class="abspos-box after-IB-background"></div>
<div class="abspos-box after-IB-foreground"></div>
</span>
</body>
</html>

77
layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-ib-split-001.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: 'contain: paint' should have no effect on non-atomic inline
(including its block part, if there's a block-in-inline split)</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
<link rel="match" href="contain-paint-ignored-cases-ib-split-001-ref.html">
<style>
.abspos-box {
position: absolute;
width: 200px;
height: 200px;
}
/* The boxes should stack in the order that I've listed their CSS classes
here. The class names' first word (outside/before/inside/after) refers
to the boxes' DOM position, and "background"/"midground"/"foreground"
refers to their z-index values. */
.before-IB-background {
background: darkmagenta;
z-index: -1;
top: 50px;
left: 50px;
}
.after-IB-background {
background: magenta;
z-index: -1;
top: 70px;
left: 70px;
}
.outside-span-midground {
background: darkkhaki;
top: 90px;
left: 90px;
}
.inside-IB-midground {
background: khaki;
top: 110px;
left: 110px;
}
.before-IB-foreground {
background: darkcyan;
z-index: 1;
top: 130px;
left: 130px;
}
.after-IB-foreground {
background: cyan;
z-index: 1;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<!-- The expectation here is that 'abspos-box' elements will all interact in
the same top-level stacking context. That means the box ordering should
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
with the boxes stacked (visually) from top-left to bottom-right. -->
<div class="abspos-box outside-span-midground"></div>
<span style="contain: paint">
<div class="abspos-box before-IB-background"></div>
<div class="abspos-box before-IB-foreground"></div>
<!-- This unstyled div crates the IB split: -->
<div>
<div class="abspos-box inside-IB-midground"></div>
</div>
<div class="abspos-box after-IB-background"></div>
<div class="abspos-box after-IB-foreground"></div>
</span>
</body>
</html>

2
layout/reftests/w3c-css/submitted/contain/reftest.list
View File

@ -10,6 +10,7 @@ pref(layout.css.overflow-clip-box.enabled,true) == contain-paint-clip-006.html c
== contain-paint-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
== contain-paint-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
== contain-paint-formatting-context-margin-001.html contain-paint-formatting-context-margin-001-ref.html
== contain-paint-ignored-cases-ib-split-001.html contain-paint-ignored-cases-ib-split-001-ref.html
== contain-paint-ignored-cases-internal-table-001a.html contain-paint-ignored-cases-internal-table-001-ref.html
== contain-paint-ignored-cases-internal-table-001b.html contain-paint-ignored-cases-internal-table-001-ref.html
== contain-paint-ignored-cases-no-principal-box-001.html contain-paint-ignored-cases-no-principal-box-001-ref.html
@ -36,6 +37,7 @@ fuzzy-if(webrender&&winWidget,0-3,0-2) == contain-size-inline-flex-001.html cont
== contain-layout-formatting-context-margin-001.html contain-layout-formatting-context-margin-001-ref.html
== contain-layout-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
== contain-layout-containing-block-absolute-001.html contain-paint-containing-block-absolute-001-ref.html
== contain-layout-ignored-cases-ib-split-001.html contain-layout-ignored-cases-ib-split-001-ref.html
== contain-layout-ignored-cases-no-principal-box-001.html contain-paint-ignored-cases-no-principal-box-001-ref.html
== contain-layout-ignored-cases-no-principal-box-002.html contain-layout-ignored-cases-no-principal-box-002-ref.html
== contain-layout-ignored-cases-no-principal-box-003.html contain-layout-ignored-cases-no-principal-box-003-ref.html

2
testing/web-platform/meta/css/css-contain/contain-layout-018.html.ini
View File

@ -1,2 +0,0 @@
[contain-layout-018.html]
expected: FAIL

2
testing/web-platform/meta/css/css-contain/contain-paint-025.html.ini
View File

@ -1,2 +0,0 @@
[contain-paint-025.html]
expected: FAIL