Bug 1463599 - Create a stacking context for contain:paint. r=dholbert
MozReview-Commit-ID: RC1bv5QjvJ
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -10983,16 +10983,17 @@ nsIFrame::IsSelected() const
}
bool
nsIFrame::IsVisuallyAtomic(EffectSet* aEffectSet,
const nsStyleDisplay* aStyleDisplay,
const nsStyleEffects* aStyleEffects) {
return HasOpacity(aEffectSet) ||
IsTransformed(aStyleDisplay) ||
+ aStyleDisplay->IsContainPaint() ||
// strictly speaking, 'perspective' doesn't require visual atomicity,
// but the spec says it acts like the rest of these
aStyleDisplay->mChildPerspective.GetUnit() == eStyleUnit_Coord ||
aStyleEffects->mMixBlendMode != NS_STYLE_BLEND_NORMAL ||
nsSVGIntegrationUtils::UsingEffectsForFrame(this);
}
bool
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-stacking-context-zindex-001-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <style>
+ * {
+ margin: 0;
+ }
+ html {
+ padding: 20px;
+ font: 12px/20px Arial, sans-serif;
+ }
+ div {
+ position: relative;
+ }
+ h1 {
+ font: inherit;
+ font-weight: bold;
+ }
+ #div1,
+ #div2 {
+ border: 1px dashed #696;
+ padding: 10px;
+ background-color: #cfc;
+ }
+ #div1 {
+ z-index: 5;
+ margin-bottom: 190px;
+ }
+ #div2 {
+ z-index: 2;
+ }
+ #div3 {
+ position: relative;
+ top: -340px;
+ left: 180px;
+ width: 330px;
+ border: 1px dashed #900;
+ background-color: #fdd;
+ padding: 40px 20px 20px;
+ }
+ #div4,
+ #div5 {
+ border: 1px dashed #996;
+ background-color: #ffc;
+ }
+ #div4 {
+ z-index: 4;
+ margin-bottom: 15px;
+ padding: 25px 10px 5px;
+ }
+ #div5 {
+ z-index: 1;
+ margin-top: 15px;
+ padding: 5px 10px;
+ }
+ #div6 {
+ z-index: 1;
+ position: absolute;
+ top: 20px;
+ left: 180px;
+ width: 150px;
+ height: 125px;
+ border: 1px dashed #009;
+ padding-top: 125px;
+ background-color: #ddf;
+ text-align: center;
+ }
+ </style>
+</head>
+<body>
+ <div id="div1">
+ <h1>Division Element #1</h1>
+ <br/><br/>
+ </div>
+
+ <div id="div2">
+ <h1>Division Element #2</h1>
+ <br/><br/>
+ </div>
+
+ <div id="div3">
+ <div id="div4">
+ <h1>Division Element #4</h1>
+ <br/><br/>
+ </div>
+
+ <h1>Division Element #3</h1>
+ <br/><br/>
+
+ <div id="div5">
+ <h1>Division Element #5</h1>
+ <br/><br/>
+ </div>
+
+ <div id="div6">
+ <h1>Division Element #6</h1>
+ <br/><br/>
+ </div>
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-stacking-context-zindex-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
+ <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+ <link rel="match" href="contain-paint-zindex-001-ref.html">
+ <style>
+ * {
+ margin: 0;
+ }
+ html {
+ padding: 20px;
+ font: 12px/20px Arial, sans-serif;
+ }
+ div {
+ position: relative;
+ }
+ h1 {
+ font: inherit;
+ font-weight: bold;
+ }
+ #div1,
+ #div2 {
+ border: 1px dashed #696;
+ padding: 10px;
+ background-color: #cfc;
+ }
+ #div1 {
+ z-index: 5;
+ margin-bottom: 190px;
+ }
+ #div2 {
+ z-index: 2;
+ }
+ #div3 {
+ contain: paint;
+ position: relative;
+ top: -340px;
+ left: 180px;
+ width: 330px;
+ border: 1px dashed #900;
+ background-color: #fdd;
+ padding: 40px 20px 20px;
+ }
+ #div4,
+ #div5 {
+ border: 1px dashed #996;
+ background-color: #ffc;
+ }
+ #div4 {
+ z-index: 6;
+ margin-bottom: 15px;
+ padding: 25px 10px 5px;
+ }
+ #div5 {
+ z-index: 1;
+ margin-top: 15px;
+ padding: 5px 10px;
+ }
+ #div6 {
+ z-index: 3;
+ position: absolute;
+ top: 20px;
+ left: 180px;
+ width: 150px;
+ height: 125px;
+ border: 1px dashed #009;
+ padding-top: 125px;
+ background-color: #ddf;
+ text-align: center;
+ }
+ </style>
+</head>
+<body>
+ <div id="div1">
+ <h1>Division Element #1</h1>
+ <br/><br/>
+ </div>
+
+ <div id="div2">
+ <h1>Division Element #2</h1>
+ <br/><br/>
+ </div>
+
+ <div id="div3">
+ <div id="div4">
+ <h1>Division Element #4</h1>
+ <br/><br/>
+ </div>
+
+ <h1>Division Element #3</h1>
+ <br/><br/>
+
+ <div id="div5">
+ <h1>Division Element #5</h1>
+ <br/><br/>
+ </div>
+
+ <div id="div6">
+ <h1>Division Element #6</h1>
+ <br/><br/>
+ </div>
+ </div>
+</body>
+</html>
--- a/layout/reftests/w3c-css/submitted/contain/reftest.list
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -4,8 +4,9 @@ default-preferences pref(layout.css.cont
== contain-paint-clip-002.html contain-paint-clip-002-ref.html
== contain-paint-clip-003.html contain-paint-clip-003-ref.html
== contain-paint-clip-004.html contain-paint-clip-004-ref.html
== contain-paint-clip-005.html contain-paint-clip-003-ref.html
== contain-paint-containing-block-absolute-001.html contain-paint-containing-block-absolute-001-ref.html
== 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-stacking-context-zindex-001.html contain-paint-stacking-context-zindex-001-ref.html
