зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1495470: Only let 'contain:layout/paint' create stacking contexts on frames that support it. r=dbaron
Differential Revision: https://phabricator.services.mozilla.com/D7926 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Daniel Holbert
Родитель
ca1d6f470f
Коммит
12fe521b72
|
|
@ -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) ||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[contain-layout-018.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[contain-paint-025.html]
|
||||
expected: FAIL
|
||||
Загрузка…
Ссылка в новой задаче