Bug 1467209 - Implement contain:size for blockFrame, add reftests. draft
authorMorgan Rae Reschenberg <mreschenberg@mozilla.com>
Thu, 07 Jun 2018 12:22:15 -0700
changeset 805464 3144e0bc17969c3a16832d8ea26caf83ed4987e6
parent 805463 0755ff84380c5d558b5b50fa7b34b414915a01c2
child 805465 b87961c5c93464c18e6c6a209a3d8a52b99e5894
child 805857 81c018f4842c40b35840dde3ac86edefe00bc293
child 805877 1aa860755c94d9a8b9ff686cb9d64b4ab8196777
push id112669
push userbmo:mreschenberg@berkeley.edu
push dateThu, 07 Jun 2018 21:02:36 +0000
bugs1467209
milestone62.0a1
Bug 1467209 - Implement contain:size for blockFrame, add reftests. MozReview-Commit-ID: 9lDZkAllu8I
layout/generic/nsBlockFrame.cpp
layout/reftests/w3c-css/submitted/contain/contain-size-block-001-ref.html
layout/reftests/w3c-css/submitted/contain/contain-size-block-001.html
layout/reftests/w3c-css/submitted/contain/contain-size-block-002-ref.html
layout/reftests/w3c-css/submitted/contain/contain-size-block-002.html
layout/reftests/w3c-css/submitted/contain/contain-size-block-003-ref.html
layout/reftests/w3c-css/submitted/contain/contain-size-block-003.html
layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-001-ref.html
layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-001.html
layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002-ref.html
layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002.html
layout/reftests/w3c-css/submitted/contain/reftest.list
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@@ -685,27 +685,32 @@ nsBlockFrame::CheckIntrinsicCacheAgainst
       RemoveStateBits(NS_BLOCK_FRAME_INTRINSICS_INFLATED);
     }
   }
 }
 
 /* virtual */ nscoord
 nsBlockFrame::GetMinISize(gfxContext *aRenderingContext)
 {
+
   nsIFrame* firstInFlow = FirstContinuation();
   if (firstInFlow != this)
     return firstInFlow->GetMinISize(aRenderingContext);
 
   DISPLAY_MIN_WIDTH(this, mMinWidth);
 
   CheckIntrinsicCacheAgainstShrinkWrapState();
 
   if (mMinWidth != NS_INTRINSIC_WIDTH_UNKNOWN)
     return mMinWidth;
 
+  if (this->StyleDisplay()->IsContainSize()) {
+    return 0;
+  }
+
 #ifdef DEBUG
   if (gNoisyIntrinsic) {
     IndentBy(stdout, gNoiseIndent);
     ListTag(stdout);
     printf(": GetMinISize\n");
   }
   AutoNoisyIndenter indenter(gNoisyIntrinsic);
 #endif
@@ -784,16 +789,20 @@ nsBlockFrame::GetPrefISize(gfxContext *a
 
   DISPLAY_PREF_WIDTH(this, mPrefWidth);
 
   CheckIntrinsicCacheAgainstShrinkWrapState();
 
   if (mPrefWidth != NS_INTRINSIC_WIDTH_UNKNOWN)
     return mPrefWidth;
 
+  if (this->StyleDisplay()->IsContainSize()) {
+    return 0;
+  }
+
 #ifdef DEBUG
   if (gNoisyIntrinsic) {
     IndentBy(stdout, gNoiseIndent);
     ListTag(stdout);
     printf(": GetPrefISize\n");
   }
   AutoNoisyIndenter indenter(gNoisyIntrinsic);
 #endif
@@ -1618,16 +1627,27 @@ nsBlockFrame::ComputeFinalSize(const Ref
       // on its own on the last-in-flow, even if we ran out of height
       // here. We need GetSkipSides to check whether we ran out of content
       // height in the current frame, not whether it's last-in-flow.
     }
 
     // Don't carry out a block-end margin when our BSize is fixed.
     aMetrics.mCarriedOutBEndMargin.Zero();
   }
+  else if (aReflowInput.mStyleDisplay->IsContainSize()) {
+    // If we're size-containing and we don't have a specified size, then our
+    // final size should actually be computed from only our border and padding,
+    // as though we were empty.
+    // Hence this case is a simplified version of the case below.
+    nscoord contentBSize = 0;
+    nscoord autoBSize = aReflowInput.ApplyMinMaxBSize(contentBSize);
+    aMetrics.mCarriedOutBEndMargin.Zero();
+    autoBSize += borderPadding.BStartEnd(wm);
+    finalSize.BSize(wm) = autoBSize;
+  }
   else if (aState.mReflowStatus.IsComplete()) {
     nscoord contentBSize = blockEndEdgeOfChildren - borderPadding.BStart(wm);
     nscoord autoBSize = aReflowInput.ApplyMinMaxBSize(contentBSize);
     if (autoBSize != contentBSize) {
       // Our min- or max-bsize value made our bsize change.  Don't carry out
       // our kids' block-end margins.
       aMetrics.mCarriedOutBEndMargin.Zero();
     }
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-block-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container {
+    background: red;
+    border: 1em solid green;
+    width: 100px;
+    height: 0;
+  }
+  </style>
+</head>
+<body>
+  <div class="fun">
+    <div>
+      This is some content before the contained element.
+    </div>
+    <div>
+      This is a parent of the contained element.
+      <div class="container">
+        <div>
+          Lorem ipsum dolor sit amet
+        </div>
+      </div>
+    </div>
+    <div>
+      This is some content after the contained element.
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-block-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: size' on auto sized block should cause the block
+    to be zero block-sized.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-layout">
+  <link rel="match" href="contain-size-block-001-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container {
+    contain: size;
+    background: red;
+    border: 1em solid green;
+    width: 100px;
+  }
+  </style>
+</head>
+<body>
+  <div class="fun">
+    <div>
+      This is some content before the contained element.
+    </div>
+    <div>
+      This is a parent of the contained element.
+      <div class="container">
+        <div>
+          Lorem ipsum dolor sit amet
+        </div>
+      </div>
+    </div>
+    <div>
+      This is some content after the contained element.
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-block-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container-ref {
+    height: 0;
+    background: red;
+    border: 1em solid green;
+  }
+  </style>
+</head>
+<body>
+  <div class="container-ref">This text should not affect the size of the container.</div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-block-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: size' on auto-sized block element should cause
+    the element to have zero height.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-layout">
+  <link rel="match" href="contain-size-block-002-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container {
+    contain: size;
+    background: red;
+    border: 1em solid green;
+  }
+  </style>
+</head>
+<body>
+  <div class="container">This text should not affect the size of the container.</div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-block-003-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container-ref {
+    height: 0;
+    background: red;
+    border: 1em solid green;
+  }
+  .right-float {
+    float: right;
+    background: blue;
+    width: 20px;
+    height: 20px;
+  }
+  .left-float {
+    float: left;
+    background: orange;
+    width: 20px;
+    height: 20px;
+  }
+  </style>
+</head>
+<body>
+  <div class="container-ref">
+    <div class="right-float"></div>
+    This text should not affect the size of the container.
+    <div class="left-float"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-block-003.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: size' on block element containing
+    floats should cause the element to have zero height.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-layout">
+  <link rel="match" href="contain-size-block-003-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container {
+    contain: size;
+    background: red;
+    border: 1em solid green;
+  }
+  .right-float {
+    float: right;
+    background: blue;
+    width: 20px;
+    height: 20px;
+  }
+  .left-float {
+    float: left;
+    background: orange;
+    width: 20px;
+    height: 20px;
+  }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="right-float"></div>
+    This text should not affect the size of the container.
+    <div class="left-float"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container-ref {
+    display: inline;
+    background: blue;
+    border: 1em solid green;
+  }
+  </style>
+</head>
+<body>
+  <div class="container-ref">This text should remain visable with a blue background.</div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: size' on inline element should not cause the element
+    to become an inline-block with zero height and width.</title>
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="match" href="contain-size-inline-block-001-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container {
+    contain: size;
+    background: blue;
+    border: 1em solid green;
+  }
+  </style>
+</head>
+<body>
+  <span class="container">This text should remain visable with a blue background.</span>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container-ref {
+    height: 0;
+    width: 0;
+    display: inline-block;
+    background: red;
+    border: 1em solid green;
+  }
+  .right-float {
+    float: right;
+    background: blue;
+    width: 20px;
+    height: 20px;
+  }
+  .left-float {
+    float: left;
+    background: orange;
+    width: 20px;
+    height: 20px;
+  }
+  </style>
+</head>
+<body>
+  <div class="container-ref">
+    <div class="right-float"></div>
+    This text should not affect the size of the container.
+    <div class="left-float"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: size' on inline-block element
+    containing floats should cause the element to have zero width and
+    height.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="match" href="contain-size-inline-block-002-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .container {
+    contain: size;
+    display: inline-block;
+    background: red;
+    border: 1em solid green;
+  }
+  .right-float {
+    float: right;
+    background: blue;
+    width: 20px;
+    height: 20px;
+  }
+  .left-float {
+    float: left;
+    background: orange;
+    width: 20px;
+    height: 20px;
+  }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="right-float"></div>
+    This text should not affect the size of the container.
+    <div class="left-float"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
--- a/layout/reftests/w3c-css/submitted/contain/reftest.list
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -4,8 +4,13 @@ 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-size-block-001.html contain-size-block-001-ref.html
+== contain-size-block-002.html contain-size-block-002-ref.html
+== contain-size-block-003.html contain-size-block-003-ref.html
+== contain-size-inline-block-001.html contain-size-inline-block-001-ref.html
+== contain-size-inline-block-002.html contain-size-inline-block-002-ref.html
\ No newline at end of file