Bug 1105111 part 5: Add reftests for 'flex-basis:content' in column-oriented flex container. r=mats draft
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 30 Mar 2018 16:59:36 -0700
changeset 775400 3df63f3d4397
parent 775399 f49727b133c7
push id104710
push userdholbert@mozilla.com
push dateFri, 30 Mar 2018 23:59:52 +0000
reviewersmats
bugs1105111
milestone61.0a1
Bug 1105111 part 5: Add reftests for 'flex-basis:content' in column-oriented flex container. r=mats MozReview-Commit-ID: 6TMrmisHOUr
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002a.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002b.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002-ref.html
@@ -7,28 +7,29 @@
 <head>
   <title>CSS Reftest Reference</title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
     border: 2px solid purple;
     padding: 2px;
-    margin-bottom: 2em;
-    height: 50px;
-    width: 200px;
+    margin-right: 2em;
+    width: 50px;
+    height: 200px;
+    float: left;
   }
 
   .container > * {
     flex-shrink: 0;
-    min-width: 0;
+    min-height: 0;
     border: 2px solid teal;
   }
 
   .smallText { font: 10px Ahem; }
   .bigText   { font: 20px Ahem; }
   .spacerChild::before {
     content: '';
     display: block;
@@ -46,32 +47,32 @@
 </head>
 <body>
 <!-- Flex items have unspecified size properties: -->
 <div class="container">
   <div class="smallText">a b</div>
   <div class="bigText">c</div>
   <div class="spacerChild"></div>
   <div class="justPadding"></div>
-  <canvas width="20"></canvas>
+  <canvas height="20"></canvas>
 </div>
 
 <!-- Various specified main-size values, in testcase
      (removed here in reference case, because they shouldn't affect sizing): -->
 <div class="container">
   <div class="smallText">a b</div>
   <div class="bigText">c</div>
   <div class="spacerChild"></div>
   <div class="justPadding"></div>
-  <canvas width="20"></canvas>
+  <canvas height="20"></canvas>
 </div>
 
 <!-- Various specified cross-size values (should be honored): -->
 <div class="container">
-  <div class="smallText"    style="height: 0px">a b</div>
-  <div class="bigText"      style="height: 40px">c</div>
-  <div class="spacerChild"  style="height: 20px"></div>
-  <div class="justPadding"  style="height: 10px"></div>
-  <canvas width="20"        style="height: 8px"></canvas>
+  <div class="smallText"    style="width: 0px">a b</div>
+  <div class="bigText"      style="width: 40px">c</div>
+  <div class="spacerChild"  style="width: 20px"></div>
+  <div class="justPadding"  style="width: 10px"></div>
+  <canvas height="20"       style="width: 8px"></canvas>
 </div>
 
 </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001a.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002a.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001a.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002a.html
@@ -1,41 +1,42 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
 <head>
   <title>
-    CSS Test: Testing "flex-basis: content" in a row-oriented flex container
+    CSS Test: Testing "flex-basis: content" in a column-oriented flex container
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis">
-  <link rel="match" href="flexbox-flex-basis-content-001-ref.html">
+  <link rel="match" href="flexbox-flex-basis-content-002-ref.html">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
     border: 2px solid purple;
     padding: 2px;
-    margin-bottom: 2em;
-    height: 50px;
-    width: 200px;
+    margin-right: 2em;
+    width: 50px;
+    height: 200px;
+    float: left;
   }
 
   .container > * {
     /* All flex items have "flex-basis: content" (and zero flex-shrink and
        min-main-size, to avoid any influence from those). */
     flex-basis: content;
     flex-shrink: 0;
-    min-width: 0;
+    min-height: 0;
     border: 2px solid teal;
   }
 
   .smallText { font: 10px Ahem; }
   .bigText   { font: 20px Ahem; }
   .spacerChild::before {
     content: '';
     display: block;
@@ -53,31 +54,31 @@
 </head>
 <body>
 <!-- Flex items have unspecified size properties: -->
 <div class="container">
   <div class="smallText">a b</div>
   <div class="bigText">c</div>
   <div class="spacerChild"></div>
   <div class="justPadding"></div>
-  <canvas width="20"></canvas>
+  <canvas height="20"></canvas>
 </div>
 
 <!-- Various specified main-size values (should be ignored): -->
 <div class="container">
+  <div class="smallText"    style="height: 0px">a b</div>
+  <div class="bigText"      style="height: 40px">c</div>
+  <div class="spacerChild"  style="height: 20px"></div>
+  <div class="justPadding"  style="height: 10px"></div>
+  <canvas height="20"       style="height: 8px"></canvas>
+</div>
+
+<!-- Various specified cross-size values (should be honored): -->
+<div class="container">
   <div class="smallText"    style="width: 0px">a b</div>
   <div class="bigText"      style="width: 40px">c</div>
   <div class="spacerChild"  style="width: 20px"></div>
   <div class="justPadding"  style="width: 10px"></div>
-  <canvas width="20"        style="width: 8px"></canvas>
-</div>
-
-<!-- Various specified cross-size values (should be honored): -->
-<div class="container">
-  <div class="smallText"    style="height: 0px">a b</div>
-  <div class="bigText"      style="height: 40px">c</div>
-  <div class="spacerChild"  style="height: 20px"></div>
-  <div class="justPadding"  style="height: 10px"></div>
-  <canvas width="20"        style="height: 8px"></canvas>
+  <canvas height="20"       style="width: 8px"></canvas>
 </div>
 
 </body>
 </html>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001b.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002b.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001b.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002b.html
@@ -2,40 +2,41 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
 <head>
   <title>
     CSS Test: Testing "flex-basis: content" (set via the "flex" shorthand)
-    in a row-oriented flex container.
+    in a column-oriented flex container.
   </title>
   <meta charset="utf-8">
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis">
-  <link rel="match" href="flexbox-flex-basis-content-001-ref.html">
+  <link rel="match" href="flexbox-flex-basis-content-002-ref.html">
   <link rel="stylesheet" type="text/css" href="support/ahem.css">
   <style>
   .container {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
     border: 2px solid purple;
     padding: 2px;
-    margin-bottom: 2em;
-    height: 50px;
-    width: 200px;
+    margin-right: 2em;
+    width: 50px;
+    height: 200px;
+    float: left;
   }
 
   .container > * {
     /* All flex items have "flex-basis: content" (and zero flex-shrink and
        min-main-size, to avoid any influence from those). */
     flex: 0 0 content;
-    min-width: 0;
+    min-height: 0;
     border: 2px solid teal;
   }
 
   .smallText { font: 10px Ahem; }
   .bigText   { font: 20px Ahem; }
   .spacerChild::before {
     content: '';
     display: block;
@@ -53,31 +54,31 @@
 </head>
 <body>
 <!-- Flex items have unspecified size properties: -->
 <div class="container">
   <div class="smallText">a b</div>
   <div class="bigText">c</div>
   <div class="spacerChild"></div>
   <div class="justPadding"></div>
-  <canvas width="20"></canvas>
+  <canvas height="20"></canvas>
 </div>
 
 <!-- Various specified main-size values (should be ignored): -->
 <div class="container">
+  <div class="smallText"    style="height: 0px">a b</div>
+  <div class="bigText"      style="height: 40px">c</div>
+  <div class="spacerChild"  style="height: 20px"></div>
+  <div class="justPadding"  style="height: 10px"></div>
+  <canvas height="20"       style="height: 8px"></canvas>
+</div>
+
+<!-- Various specified cross-size values (should be honored): -->
+<div class="container">
   <div class="smallText"    style="width: 0px">a b</div>
   <div class="bigText"      style="width: 40px">c</div>
   <div class="spacerChild"  style="width: 20px"></div>
   <div class="justPadding"  style="width: 10px"></div>
-  <canvas width="20"        style="width: 8px"></canvas>
-</div>
-
-<!-- Various specified cross-size values (should be honored): -->
-<div class="container">
-  <div class="smallText"    style="height: 0px">a b</div>
-  <div class="bigText"      style="height: 40px">c</div>
-  <div class="spacerChild"  style="height: 20px"></div>
-  <div class="justPadding"  style="height: 10px"></div>
-  <canvas width="20"        style="height: 8px"></canvas>
+  <canvas height="20"       style="width: 8px"></canvas>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -95,16 +95,18 @@ fuzzy-if(Android,158,32) == flexbox-alig
 == flexbox-collapsed-item-baseline-001.html flexbox-collapsed-item-baseline-001-ref.html
 == flexbox-collapsed-item-horiz-001.html flexbox-collapsed-item-horiz-001-ref.html
 == flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002-ref.html
 == flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003-ref.html
 
 # Tests for "flex-basis: content"
 == flexbox-flex-basis-content-001a.html flexbox-flex-basis-content-001-ref.html
 == flexbox-flex-basis-content-001b.html flexbox-flex-basis-content-001-ref.html
+== flexbox-flex-basis-content-002a.html flexbox-flex-basis-content-002-ref.html
+== flexbox-flex-basis-content-002b.html flexbox-flex-basis-content-002-ref.html
 
 # Tests for flex-flow shorthand property
 == flexbox-flex-flow-001.html flexbox-flex-flow-001-ref.html
 == flexbox-flex-flow-002.html flexbox-flex-flow-002-ref.html
 
 # Tests for flex-wrap property
 == flexbox-flex-wrap-horiz-001.html flexbox-flex-wrap-horiz-001-ref.html
 == flexbox-flex-wrap-horiz-002.html flexbox-flex-wrap-horiz-002-ref.html