Bug 1507663 part 2: Adjust reftest 'contain-size-button-001.html' to expect that contain:size *does not* suppress baseline alignment. r=TYLin
authorDaniel Holbert <dholbert@cs.stanford.edu>
Mon, 26 Nov 2018 21:05:34 +0000
changeset 504581 1fe8baada2379546ccbd10b65db88812918655f5
parent 504580 2ca8fb2abe072be17cc89660485654fd1c5e8944
child 504582 c20d49e40432e03bbac1ee098c7b0f3cb3ebc2b0
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersTYLin
bugs1507663
milestone65.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 1507663 part 2: Adjust reftest 'contain-size-button-001.html' to expect that contain:size *does not* suppress baseline alignment. r=TYLin Note that Firefox doesn't actually match this expectation yet, so I've added a 'fails' annotation to the manifest with the followup bug number. Also, this patch makes several other improvements to this test: - remove red background in testcase. This was making the testcase spuriously fail in Chrome, because Chrome paints (at least) a 1px-tall background-area on empty buttons, which meant a 1px-tall red area in the testcase vs. a 1px-tall gray area in the reference case. - clear floats to prevent them from piling up awkwardly. - use 'vertical-align:top' to turn off baseline alignment in parts of the test where the testcase has text and the reference case does not (and where we're not intentionally testing the baseline's influence on layout). Depends on D12614 Differential Revision: https://phabricator.services.mozilla.com/D12615
layout/reftests/w3c-css/submitted/contain/contain-size-button-001-ref.html
layout/reftests/w3c-css/submitted/contain/contain-size-button-001.html
layout/reftests/w3c-css/submitted/contain/reftest.list
--- a/layout/reftests/w3c-css/submitted/contain/contain-size-button-001-ref.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-button-001-ref.html
@@ -2,38 +2,51 @@
 <html>
 <head>
   <meta charset="utf-8">
   <title>CSS Reftest Reference</title>
   <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
   <style>
   button {
     border: 1em solid green;
+    /* In case the testcase's 'inner' text is taller than the button, don't let
+       it influence its line-box's size.  This lets us more-easily compare
+       sizing between empty buttons vs. contained nonempty buttons. */
+    vertical-align: top;
+  }
+  .vaBaseline {
+    vertical-align: baseline;
   }
   .width-ref {
     width: 50px;
   }
   .height-ref {
     height: 50px;
     background: lightblue;
   }
   .floatLBasic-ref {
     float: left;
   }
   .floatLWidth-ref {
     float: left;
     width: 50px;
   }
+  br { clear: both }
   .iFlexBasic-ref {
     display: inline-flex;
   }
   .iFlexWidth-ref {
     display: inline-flex;
     width: 50px;
   }
+  .innerContents {
+    color: transparent;
+    height: 0;
+    width: 0;
+  }
   .orthog-ref {
     writing-mode: vertical-lr;
   }
   </style>
 </head>
 <body>
   <button></button>
   <br>
@@ -45,29 +58,29 @@
   <br>
 
   <button class="iFlexBasic-ref"></button>
   <br>
 
   <button class="iFlexWidth-ref"></button>
   <br>
 
-  outside before<button></button>outside after
+  outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
   <br>
 
   <button class="width-ref"></button>
   <br>
 
   <button class="width-ref"></button>
   <br>
 
   <button class="height-ref"></button>
   <br>
 
   <button class="height-ref"></button>
   <br>
 
-  s<button class="orthog-ref"></button>endtext
+  s<button class="orthog-ref vaBaseline"><div class="innerContents">inner</div></button>endtext
   <br>
 
   <button class="height-ref width-ref">inside</button>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/contain/contain-size-button-001.html
+++ b/layout/reftests/w3c-css/submitted/contain/contain-size-button-001.html
@@ -1,21 +1,27 @@
 <!DOCTYPE HTML>
 <html>
 <head>
   <meta charset="utf-8">
-  <title>CSS Test: 'contain: size' on buttons should cause them to be sized and baseline-aligned as if they had no contents.</title>
+  <title>CSS Test: 'contain: size' on buttons should cause them to be sized as if they had no contents.</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-button-001-ref.html">
   <style>
   button {
     contain: size;
     border: 1em solid green;
-    background: red;
+    /* In case the testcase's 'inner' text is taller than the button, don't let
+       it influence its line-box's size.  This lets us more-easily compare
+       sizing between empty buttons vs. contained nonempty buttons. */
+    vertical-align: top;
+  }
+  .vaBaseline {
+    vertical-align: baseline;
   }
   .innerContents {
     color: transparent;
     height: 100px;
     width: 100px;
   }
   .minWidth {
     min-width: 50px;
@@ -33,16 +39,17 @@
   }
   .floatLBasic {
     float: left;
   }
   .floatLWidth {
     float: left;
     width: 50px;
   }
+  br { clear: both }
   .iFlexBasic {
     display: inline-flex;
   }
   .iFlexWidth {
     display: inline-flex;
     width: 50px;
   }
   .orthog {
@@ -66,18 +73,18 @@
   <!--CSS Test: A size-contained inline-flex button with no specified size should render at 0px by 0px regardless of content.-->
   <button class="iFlexBasic"><div class="innerContents">inner</div></button>
   <br>
 
   <!--CSS Test: A size-contained inline-flex button with specified width and no specified height should render at given width and 0 height regardless of content.-->
   <button class="iFlexWidth"><div class="innerContents">inner</div></button>
   <br>
 
-  <!--CSS Test: A size-contained button should perform baseline alignment as if the container were empty.-->
-  outside before<button><div class="innerContents">inner</div></button>outside after
+  <!--CSS Test: A size-contained button should perform baseline alignment regularly.-->
+  outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
   <br>
 
   <!--CSS Test: A size-contained button with specified min-width should render at given min-width and zero height regardless of content.-->
   <button class="minWidth"><div class="innerContents">inner</div></button>
   <br>
 
   <!--CSS Test: A size-contained button with specified width should render at given width and zero height regardless of content.-->
   <button class="width"><div class="innerContents">inner</div></button>
@@ -86,16 +93,16 @@
   <!--CSS Test: A size-contained button with specified min-height should render at given min-height regardless of content.-->
   <button class="minHeight"><div class="innerContents">inner</div></button>
   <br>
 
   <!--CSS Test: A size-contained button with specified height should render at given height regardless of content.-->
   <button class="height"><div class="innerContents">inner</div></button>
   <br>
 
-  <!--CSS Test: A size-contained button with vertical text should perform baseline alignment as if the container were empty.-->
-  s<button class="orthog"><div class="innerContents">inner</div></button>endtext
+  <!--CSS Test: A size-contained button with vertical text should perform baseline alignment regularly.-->
+  s<button class="orthog vaBaseline"><div class="innerContents">inner</div></button>endtext
   <br>
 
   <!--CSS Test: A size-contained button with inner text should layout the text in the same manner as a container of the same type with identical contents.-->
   <button class="height width">inside</button>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/contain/reftest.list
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -13,17 +13,17 @@ pref(layout.css.overflow-clip-box.enable
 == 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
+fails == contain-size-button-001.html contain-size-button-001-ref.html # bug 1508441
 == contain-size-block-001.html contain-size-block-001-ref.html
 == contain-size-inline-block-001.html contain-size-inline-block-001-ref.html
 == contain-size-flex-001.html contain-size-flex-001-ref.html
 fuzzy-if(webrender&&winWidget,0-24,0-2) == contain-size-inline-flex-001.html contain-size-inline-flex-001-ref.html # bug 1474093
 == contain-size-grid-001.html contain-size-grid-001-ref.html
 == contain-size-multicol-001.html contain-size-multicol-001-ref.html
 == contain-size-fieldset-001.html contain-size-fieldset-001-ref.html
 == contain-size-fieldset-002.html contain-size-fieldset-002-ref.html