Bug 1491235: [css-contain] Make 'contain:layout' (not 'contain:size') suppress baseline measurements r=dholbert

The CSSWG has recently resolved that layout containment
suppress baseline alignment, while size containment does not:
https://github.com/w3c/csswg-drafts/issues/2995

Spec text (https://drafts.csswg.org/css-contain/#containment-layout):
  "7. For the purpose of the vertical-align property,
   or any other property whose effects need to relate
   the position of the containing element's baseline
   to something other than its descendants,
   the containing element is treated as having no baseline."

And a note in (https://drafts.csswg.org/css-contain/#containment-size):
  "Note: size containment does not suppress baseline alignment.
   See layout containment for that."

This patch does this change just switching IsContainSize()
by IsLayoutSize() in several places related to baseline alignment
in the source code.

With the patch several WPT tests start to pass. Apart from that,
some of the tests under vendor-imports are updated to follow
the new behavior.

--HG--
extra : amend_source : 05dc9a320afeb1d58981e2bd8bc47b435999f2f9

layout/base/nsLayoutUtils.cpp

@@ -6188,7 +6188,7 @@ nsLayoutUtils::GetFirstLinePosition(WritingMode aWM,
                                     const nsIFrame* aFrame,
                                     LinePosition* aResult)
 {
-  if (aFrame->StyleDisplay()->IsContainSize()) {
+  if (aFrame->StyleDisplay()->IsContainLayout()) {
     return false;
   }
   const nsBlockFrame* block = nsLayoutUtils::GetAsBlock(const_cast<nsIFrame*>(aFrame));
@@ -6289,7 +6289,7 @@ nsLayoutUtils::GetFirstLinePosition(WritingMode aWM,
 nsLayoutUtils::GetLastLineBaseline(WritingMode aWM,
                                    const nsIFrame* aFrame, nscoord* aResult)
 {
-  if (aFrame->StyleDisplay()->IsContainSize()) {
+  if (aFrame->StyleDisplay()->IsContainLayout()) {
     return false;
   }
 

layout/forms/nsFieldSetFrame.cpp

@@ -703,8 +703,8 @@ bool
 nsFieldSetFrame::GetVerticalAlignBaseline(WritingMode aWM,
                                           nscoord* aBaseline) const
 {
-  if (StyleDisplay()->IsContainSize()) {
-    // If we are size-contained, our child 'inner' should not
+  if (StyleDisplay()->IsContainLayout()) {
+    // If we are layout-contained, our child 'inner' should not
     // affect how we calculate our baseline.
     return false;
   }
@@ -723,8 +723,8 @@ nsFieldSetFrame::GetNaturalBaselineBOffset(WritingMode          aWM,
                                            BaselineSharingGroup aBaselineGroup,
                                            nscoord*             aBaseline) const
 {
-  if (StyleDisplay()->IsContainSize()) {
-    // If we are size-contained, our child 'inner' should not
+  if (StyleDisplay()->IsContainLayout()) {
+    // If we are layout-contained, our child 'inner' should not
     // affect how we calculate our baseline.
     return false;
   }

layout/generic/nsBlockFrame.cpp

@@ -516,7 +516,7 @@ nsBlockFrame::GetNaturalBaselineBOffset(mozilla::WritingMode aWM,
     return nsLayoutUtils::GetFirstLineBaseline(aWM, this, aBaseline);
   }
 
-  if (StyleDisplay()->IsContainSize()) {
+  if (StyleDisplay()->IsContainLayout()) {
     return false;
   }
 

layout/generic/nsFlexContainerFrame.cpp

@@ -4695,8 +4695,8 @@ nsFlexContainerFrame::DoFlexLayout(nsPresContext*           aPresContext,
                     placeholderKids, lines);
 
   if ((lines.getFirst()->IsEmpty() && !lines.getFirst()->getNext()) ||
-      aReflowInput.mStyleDisplay->IsContainSize()) {
-    // If have no flex items, or if we  are size contained and
+      aReflowInput.mStyleDisplay->IsContainLayout()) {
+    // If have no flex items, or if we  are layout contained and
     // want to behave as if we have none, our parent
     // should synthesize a baseline if needed.
     AddStateBits(NS_STATE_FLEX_SYNTHESIZE_BASELINE);

layout/reftests/w3c-css/submitted/contain/contain-size-block-001-ref.html

@@ -26,6 +26,11 @@
     display: flex;
     align-items: baseline;
   }
+  .innerContents {
+    color: transparent;
+    width: 0;
+    height: 0;
+  }
   </style>
 </head>
 <body>
@@ -51,7 +56,7 @@
   <br>
 
   <div class="flexBaselineCheck">
-  outside before<div class="basic"></div>outside after
+  outside before<div class="basic innerContents">i</div>outside after
   </div>
 </body>
 </html>

layout/reftests/w3c-css/submitted/contain/contain-size-block-001.html

@@ -73,7 +73,7 @@
   <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
   <br>
 
-  <!--CSS Test: A size-contained block element should perform baseline alignment as if the container were empty.-->
+  <!--CSS Test: A size-contained block element should perform baseline alignment regularly.-->
   <div class="flexBaselineCheck">
   outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
   </div>

layout/reftests/w3c-css/submitted/contain/contain-size-fieldset-001-ref.html

@@ -12,6 +12,7 @@
   .container {
     border: 10px solid green;
     display: inline-block;
+    vertical-align: top;
   }
   .height {
     height: 30px;

layout/reftests/w3c-css/submitted/contain/contain-size-fieldset-001.html

@@ -16,6 +16,7 @@
   .container {
     border: 10px solid green;
     display: inline-block;
+    vertical-align: top;
   }
   .innerContents {
     height: 50px;

layout/reftests/w3c-css/submitted/contain/contain-size-fieldset-002-ref.html

@@ -24,11 +24,23 @@
     display: flex;
     align-items: baseline;
   }
+  fieldset {
+    border: none;
+    color: transparent;
+  }
+  legend, .innerContents {
+    width: 0;
+    height: 0;
+    padding: 0;
+  }
   </style>
 </head>
 <body>
   <div class="flexBaselineCheck">
-  outside before<fieldset class="basic"></fieldset>outside after
+  outside before<fieldset class="basc">
+    <legend>l</legend>
+    <div class="innerContents">i</div>
+  </fieldset>outside after
   </div>
 </body>
 </html>

layout/reftests/w3c-css/submitted/contain/contain-size-fieldset-002.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>CSS Test: 'contain: size' on fieldset elements should cause them to be baseline-aligned as if they had no contents.</title>
+  <title>CSS Test: 'contain: size' on fieldset elements shouldn't prevent them from being baseline-aligned regularly.</title>
   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
   <link rel="match" href="contain-size-fieldset-002-ref.html">
@@ -24,7 +24,7 @@
   </style>
 </head>
 <body>
-  <!--CSS Test: A size-contained fieldset element should perform baseline alignment as if the container were empty.-->
+  <!--CSS Test: A size-contained fieldset element should perform baseline alignment regularly.-->
   <div class="flexBaselineCheck">
   outside before<fieldset class="contain">
     <legend>legend</legend>

layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-001-ref.html

@@ -15,24 +15,29 @@
   .width-ref {
     width: 50px;
   }
+  .innerContents {
+    color: transparent;
+    width: 0;
+    height: 0;
+  }
   </style>
 </head>
 <body>
-  <div class="basic"></div>
+  <div class="basic"><div class="innerContents">i</div></div>
   <br>
 
-  outside before<div class="basic"></div>outside after
+  outside before<div class="basic"><div class="innerContents">i</div></div>outside after
   <br>
 
-  <div class="basic height-ref"></div>
+  <div class="basic height-ref"><div class="innerContents">i</div></div>
   <br>
 
-  <div class="basic height-ref"></div>
+  <div class="basic height-ref"><div class="innerContents">i</div></div>
   <br>
 
-  <div class="basic width-ref"></div>
+  <div class="basic width-ref"><div class="innerContents">i</div></div>
   <br>
 
-  <div class="basic width-ref"></div>
+  <div class="basic width-ref"><div class="innerContents">i</div></div>
 </body>
 </html>

layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-001.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+  <title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
   <link rel="match" href="contain-size-inline-block-001-ref.html">
@@ -37,7 +37,7 @@
   <div class="contain"><div class="innerContents">inner</div></div>
   <br>
 
-  <!--CSS Test: A size-contained inline-block element should perform baseline alignment as if the container were empty.-->
+  <!--CSS Test: A size-contained inline-block element should perform baseline alignment regularly.-->
   outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
   <br>
 

layout/reftests/w3c-css/submitted/contain/contain-size-inline-flex-001-ref.html

@@ -12,12 +12,17 @@
   .width-ref {
     width: 50px;
   }
+  .innerContents {
+    color: transparent;
+    width: 0;
+    height: 0;
+  }
   </style>
 </head>
 <body>
-  aa<div class="basic"></div>bb
+  aa<div class="basic"><div class="innerContents">i</div></div>bb
   <br>
 
-  aa<div class="basic width-ref"></div>bb
+  aa<div class="basic width-ref"><div class="innerContents">i</div></div>bb
 </body>
 </html>

layout/reftests/w3c-css/submitted/contain/contain-size-inline-flex-001.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>CSS Test: 'contain: size' on inline-flex elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+  <title>CSS Test: 'contain: size' on inline-flex elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
   <link rel="match" href="contain-size-inline-flex-001-ref.html">
@@ -24,11 +24,11 @@
   </style>
 </head>
 <body>
-  <!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaviour matches that of an empty object of the same type.-->
+  <!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaves regularly.-->
   aa<div class="contain"><div class="innerContents">inner</div></div>bb
   <br>
 
-  <!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaviour matches that of an empty object of the same type.-->
+  <!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaves regularly.-->
   aa<div class="contain width"><div class="innerContents">inner</div></div>bb
 </body>
 </html>

testing/web-platform/meta/css/css-contain/contain-layout-baseline-001.html.ini

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

testing/web-platform/meta/css/css-contain/contain-layout-flexbox-001.html.ini

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

testing/web-platform/meta/css/css-contain/contain-size-021.html.ini

@@ -1,2 +0,0 @@
-[contain-size-021.html]
-  expected: FAIL

testing/web-platform/meta/css/css-contain/contain-size-023.html.ini

@@ -1,2 +0,0 @@
-[contain-size-023.html]
-  expected: FAIL

testing/web-platform/meta/css/css-contain/contain-size-027.html.ini

@@ -1,2 +0,0 @@
-[contain-size-027.html]
-  expected: FAIL

testing/web-platform/meta/css/css-contain/contain-size-baseline-001.html.ini

@@ -1,2 +0,0 @@
-[contain-size-baseline-001.html]
-  expected: FAIL

testing/web-platform/meta/css/css-contain/contain-size-flexbox-001.html.ini

@@ -1,2 +0,0 @@
-[contain-size-flexbox-001.html]
-  expected: FAIL

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-block-001-ref.html

@@ -26,6 +26,11 @@
     display: flex;
     align-items: baseline;
   }
+  .innerContents {
+    color: transparent;
+    width: 0;
+    height: 0;
+  }
   </style>
 </head>
 <body>
@@ -51,7 +56,7 @@
   <br>
 
   <div class="flexBaselineCheck">
-  outside before<div class="basic"></div>outside after
+  outside before<div class="basic innerContents">i</div>outside after
   </div>
 </body>
 </html>

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-block-001.html

@@ -73,7 +73,7 @@
   <div class="contain floatLWidth"><div class="innerContents">inner</div></div>
   <br>
 
-  <!--CSS Test: A size-contained block element should perform baseline alignment as if the container were empty.-->
+  <!--CSS Test: A size-contained block element should perform baseline alignment regularly.-->
   <div class="flexBaselineCheck">
   outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
   </div>

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-001-ref.html

@@ -12,6 +12,7 @@
   .container {
     border: 10px solid green;
     display: inline-block;
+    vertical-align: top;
   }
   .height {
     height: 30px;

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-001.html

@@ -16,6 +16,7 @@
   .container {
     border: 10px solid green;
     display: inline-block;
+    vertical-align: top;
   }
   .innerContents {
     height: 50px;

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-002-ref.html

@@ -24,11 +24,23 @@
     display: flex;
     align-items: baseline;
   }
+  fieldset {
+    border: none;
+    color: transparent;
+  }
+  legend, .innerContents {
+    width: 0;
+    height: 0;
+    padding: 0;
+  }
   </style>
 </head>
 <body>
   <div class="flexBaselineCheck">
-  outside before<fieldset class="basic"></fieldset>outside after
+  outside before<fieldset class="basc">
+    <legend>l</legend>
+    <div class="innerContents">i</div>
+  </fieldset>outside after
   </div>
 </body>
 </html>

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-002.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>CSS Test: 'contain: size' on fieldset elements should cause them to be baseline-aligned as if they had no contents.</title>
+  <title>CSS Test: 'contain: size' on fieldset elements shouldn't prevent them from being baseline-aligned regularly.</title>
   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
   <link rel="match" href="contain-size-fieldset-002-ref.html">
@@ -24,7 +24,7 @@
   </style>
 </head>
 <body>
-  <!--CSS Test: A size-contained fieldset element should perform baseline alignment as if the container were empty.-->
+  <!--CSS Test: A size-contained fieldset element should perform baseline alignment regularly.-->
   <div class="flexBaselineCheck">
   outside before<fieldset class="contain">
     <legend>legend</legend>

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-inline-block-001-ref.html

@@ -15,24 +15,29 @@
   .width-ref {
     width: 50px;
   }
+  .innerContents {
+    color: transparent;
+    width: 0;
+    height: 0;
+  }
   </style>
 </head>
 <body>
-  <div class="basic"></div>
+  <div class="basic"><div class="innerContents">i</div></div>
   <br>
 
-  outside before<div class="basic"></div>outside after
+  outside before<div class="basic"><div class="innerContents">i</div></div>outside after
   <br>
 
-  <div class="basic height-ref"></div>
+  <div class="basic height-ref"><div class="innerContents">i</div></div>
   <br>
 
-  <div class="basic height-ref"></div>
+  <div class="basic height-ref"><div class="innerContents">i</div></div>
   <br>
 
-  <div class="basic width-ref"></div>
+  <div class="basic width-ref"><div class="innerContents">i</div></div>
   <br>
 
-  <div class="basic width-ref"></div>
+  <div class="basic width-ref"><div class="innerContents">i</div></div>
 </body>
 </html>

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-inline-block-001.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+  <title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
   <link rel="match" href="contain-size-inline-block-001-ref.html">
@@ -37,7 +37,7 @@
   <div class="contain"><div class="innerContents">inner</div></div>
   <br>
 
-  <!--CSS Test: A size-contained inline-block element should perform baseline alignment as if the container were empty.-->
+  <!--CSS Test: A size-contained inline-block element should perform baseline alignment regularly.-->
   outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
   <br>
 

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-inline-flex-001-ref.html

@@ -12,12 +12,17 @@
   .width-ref {
     width: 50px;
   }
+  .innerContents {
+    color: transparent;
+    width: 0;
+    height: 0;
+  }
   </style>
 </head>
 <body>
-  aa<div class="basic"></div>bb
+  aa<div class="basic"><div class="innerContents">i</div></div>bb
   <br>
 
-  aa<div class="basic width-ref"></div>bb
+  aa<div class="basic width-ref"><div class="innerContents">i</div></div>bb
 </body>
 </html>

testing/web-platform/tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-inline-flex-001.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>CSS Test: 'contain: size' on inline-flex elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+  <title>CSS Test: 'contain: size' on inline-flex elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
   <link rel="match" href="contain-size-inline-flex-001-ref.html">
@@ -24,11 +24,11 @@
   </style>
 </head>
 <body>
-  <!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaviour matches that of an empty object of the same type.-->
+  <!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaves regularly.-->
   aa<div class="contain"><div class="innerContents">inner</div></div>bb
   <br>
 
-  <!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaviour matches that of an empty object of the same type.-->
+  <!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaves regularly.-->
   aa<div class="contain width"><div class="innerContents">inner</div></div>bb
 </body>
 </html>