Bug 1495470: Only let 'contain:layout/paint' create stacking contexts on frames that support it. r=dbaron
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 09 Oct 2018 21:04:03 +0000
changeset 496083 3b597edf0a98da8e566d00ba66d1448c348ae36b
parent 496082 8cca84d745042fd0524e2c7a7567d18571c2a054
child 496084 3fafffb5ace29b9a357f264d4a821348d540ec36
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs1495470
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
layout/generic/nsFrame.cpp
layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-ib-split-001-ref.html
layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-ib-split-001.html
layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-ib-split-001-ref.html
layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-ib-split-001.html
layout/reftests/w3c-css/submitted/contain/reftest.list
testing/web-platform/meta/css/css-contain/contain-layout-018.html.ini
testing/web-platform/meta/css/css-contain/contain-paint-025.html.ini
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -10962,18 +10962,19 @@ bool
 nsIFrame::IsStackingContext(EffectSet* aEffectSet,
                             const nsStyleDisplay* aStyleDisplay,
                             const nsStylePosition* aStylePosition,
                             const nsStyleEffects* aStyleEffects,
                             bool aIsPositioned)
 {
   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) ||
          aStyleEffects->mMixBlendMode != NS_STYLE_BLEND_NORMAL ||
          nsSVGIntegrationUtils::UsingEffectsForFrame(this) ||
          (aIsPositioned && (aStyleDisplay->IsPositionForcingStackingContext() ||
                             aStylePosition->mZIndex.GetUnit() == eStyleUnit_Integer)) ||
          (aStyleDisplay->mWillChangeBitField & NS_STYLE_WILL_CHANGE_STACKING_CONTEXT) ||
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-ib-split-001-ref.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: 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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-ignored-cases-ib-split-001.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-ib-split-001-ref.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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-ignored-cases-ib-split-001.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>
--- a/layout/reftests/w3c-css/submitted/contain/reftest.list
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -5,16 +5,17 @@ default-preferences pref(layout.css.cont
 == 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
 pref(layout.css.overflow-clip-box.enabled,true) == contain-paint-clip-006.html contain-paint-clip-006-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-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
 == contain-paint-ignored-cases-ruby-containing-block-001.html contain-paint-ignored-cases-ruby-containing-block-001-ref.html
 == contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html contain-paint-ignored-cases-ruby-stacking-and-clipping-001-ref.html
 == contain-paint-stacking-context-001a.html contain-paint-stacking-context-001-ref.html
 == contain-paint-stacking-context-001b.html contain-paint-stacking-context-001-ref.html
 == contain-size-button-001.html contain-size-button-001-ref.html
@@ -31,11 +32,12 @@ fuzzy-if(webrender&&winWidget,0-3,0-2) =
 == contain-layout-overflow-001.html contain-layout-overflow-001-ref.html
 == contain-layout-overflow-002.html contain-layout-overflow-002-ref.html
 == contain-size-table-caption-001.html contain-size-table-caption-001-ref.html
 == contain-layout-stacking-context-001.html contain-paint-stacking-context-001-ref.html
 == contain-layout-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
 == 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
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-layout-018.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-layout-018.html]
-  expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-contain/contain-paint-025.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[contain-paint-025.html]
-  expected: FAIL