[Layout:Generic] [Layout:Style] Align CSS Flexbox with current spec

author: FranklinDM <mrmineshafter17@gmail.com> 2022-04-17 19:01:33 -0500
committer: Matt A. Tobin <email@mattatobin.com> 2022-04-17 19:02:32 -0500
commit: 20ae4cdbdaa44eeac22e4a2f961f11c6cd57cfe1 (patch)
tree: 4c9ab11e8ad4fb99a3000d6c2a440cc676bff3ae /layout/reftests
parent: df5aca3bde8c1baddae207bc3e89d196451d8747 (diff)
download: aura-central-20ae4cdbdaa44eeac22e4a2f961f11c6cd57cfe1.tar.gz
18 files changed, 1493 insertions, 0 deletions
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html
new file mode 100644
index 000000000..98a93716a
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-2-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <style>
+  .container {
+    display: flex;
+    width: 100px;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="width: 30px"><ib></ib></div>
+  <div class="block" style="width: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="width: 30%"><ib></ib></div>
+  <div class="block" style="width: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="width: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="width: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-2.html b/layout/reftests/flexbox/flexbox-table-flex-items-2.html
new file mode 100644
index 000000000..c11ce7080
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-2.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Test: Testing that implicit "flex-basis: content" on table wrapper box
+    doesn't prevent explicit table size from influencing flex base size.
+  </title>
+  <!-- XXXdholbert NOTE: This probably eventually should move to our
+       upstreamed reftest directory.  But for now, this is just asserting
+       backwards-compatible/interoperable (but not necessary spec-compliant)
+       behavior, per https://github.com/w3c/csswg-drafts/issues/2604 -->
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <link rel="match" href="flexbox-table-flex-items-2.html">
+  <style>
+  .container {
+    display: flex;
+    width: 100px;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    display: table;
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="width: 30px"><ib></ib></div>
+  <div class="block" style="width: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="width: 30%"><ib></ib></div>
+  <div class="block" style="width: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="width: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="width: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html
new file mode 100644
index 000000000..568495f34
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-3-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100px;
+    float: left;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="height: 30px"><ib></ib></div>
+  <div class="block" style="height: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="height: 30%"><ib></ib></div>
+  <div class="block" style="height: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="height: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="height: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/flexbox-table-flex-items-3.html b/layout/reftests/flexbox/flexbox-table-flex-items-3.html
new file mode 100644
index 000000000..c68152856
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-3.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>
+    CSS Test: Testing that implicit "flex-basis: content" on table wrapper box
+    doesn't prevent explicit table size from influencing flex base size.
+  </title>
+  <!-- XXXdholbert NOTE: This probably eventually should move to our
+       upstreamed reftest directory.  But for now, this is just asserting
+       backwards-compatible/interoperable (but not necessary spec-compliant)
+       behavior, per https://github.com/w3c/csswg-drafts/issues/2604 -->
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size">
+  <link rel="match" href="flexbox-table-flex-items-3.html">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100px;
+    float: left;
+    border: 1px solid black;
+  }
+
+  /* Two types of flex items: */
+  .table {
+    display: table;
+    border: 2px solid teal;
+  }
+  .block {
+    border: 2px solid brown;
+  }
+
+  /* Each flex item gets one of these as its contents,
+     to have a nonzero content size: */
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  </style>
+</head>
+<body>
+<!-- auto size: -->
+<div class="container">
+  <div class="table"><ib></ib></div>
+  <div class="block"><ib></ib></div>
+</div>
+
+<!-- px size: -->
+<div class="container">
+  <div class="table" style="height: 30px"><ib></ib></div>
+  <div class="block" style="height: 30px"><ib></ib></div>
+</div>
+
+<!-- % size: -->
+<div class="container">
+  <div class="table" style="height: 30%"><ib></ib></div>
+  <div class="block" style="height: 30%"><ib></ib></div>
+</div>
+
+<!-- calc() size: -->
+<div class="container">
+  <div class="table" style="height: calc(10px + 20%)"><ib></ib></div>
+  <div class="block" style="height: calc(10px + 20%)"><ib></ib></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list
index be156100e..075b78902 100644
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -116,3 +116,5 @@ fuzzy-if(gtkWidget,1,31) == flexbox-widget-flex-items-4.html flexbox-widget-flex
 
 # Tests for table flex items
 == flexbox-table-flex-items-1-ref.html flexbox-table-flex-items-1-ref.html
+== flexbox-table-flex-items-2.html flexbox-table-flex-items-2-ref.html
+== flexbox-table-flex-items-3.html flexbox-table-flex-items-3-ref.html
diff --git 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-001-ref.html
new file mode 100644
index 000000000..b53771102
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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;
+    justify-content: space-between;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 50px;
+    width: 200px;
+  }
+
+  .container > * {
+    flex-shrink: 0;
+    min-width: 0;
+    border: 2px solid teal;
+  }
+
+  .smallText { font: 10px Ahem; }
+  .bigText   { font: 20px Ahem; }
+  .spacerChild::before {
+    content: '';
+    display: block;
+    background: brown;
+    height: 10px;
+    width: 10px;
+  }
+  .justPadding {
+    /* Empty div with 5px padding on each side */
+    padding: 5px;
+    background: cyan;
+  }
+  canvas { background: fuchsia }
+  </style>
+</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>
+</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>
+</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>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001a.html
new file mode 100644
index 000000000..4227f68ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001a.html
@@ -0,0 +1,83 @@
+<!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
+  </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="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 50px;
+    width: 200px;
+  }
+
+  .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;
+    border: 2px solid teal;
+  }
+
+  .smallText { font: 10px Ahem; }
+  .bigText   { font: 20px Ahem; }
+  .spacerChild::before {
+    content: '';
+    display: block;
+    background: brown;
+    height: 10px;
+    width: 10px;
+  }
+  .justPadding {
+    /* Empty div with 5px padding on each side */
+    padding: 5px;
+    background: cyan;
+  }
+  canvas { background: fuchsia }
+  </style>
+</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>
+</div>
+
+<!-- Various specified main-size values (should be ignored): -->
+<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>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001b.html
new file mode 100644
index 000000000..489ce65d8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001b.html
@@ -0,0 +1,83 @@
+<!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" (set via the "flex" shorthand)
+    in a row-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="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-bottom: 2em;
+    height: 50px;
+    width: 200px;
+  }
+
+  .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;
+    border: 2px solid teal;
+  }
+
+  .smallText { font: 10px Ahem; }
+  .bigText   { font: 20px Ahem; }
+  .spacerChild::before {
+    content: '';
+    display: block;
+    background: brown;
+    height: 10px;
+    width: 10px;
+  }
+  .justPadding {
+    /* Empty div with 5px padding on each side */
+    padding: 5px;
+    background: cyan;
+  }
+  canvas { background: fuchsia }
+  </style>
+</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>
+</div>
+
+<!-- Various specified main-size values (should be ignored): -->
+<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>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002-ref.html
new file mode 100644
index 000000000..a7d1bcf77
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<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: column;
+    justify-content: space-between;
+    border: 2px solid purple;
+    padding: 2px;
+    margin-right: 2em;
+    width: 50px;
+    height: 200px;
+    float: left;
+  }
+
+  .container > * {
+    flex-shrink: 0;
+    min-height: 0;
+    border: 2px solid teal;
+  }
+
+  .smallText { font: 10px Ahem; }
+  .bigText   { font: 20px Ahem; }
+  .spacerChild::before {
+    content: '';
+    display: block;
+    background: brown;
+    height: 10px;
+    width: 10px;
+  }
+  .justPadding {
+    /* Empty div with 5px padding on each side */
+    padding: 5px;
+    background: cyan;
+  }
+  canvas { background: fuchsia }
+  </style>
+</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 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 height="20"></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 height="20"       style="width: 8px"></canvas>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002a.html
new file mode 100644
index 000000000..481a3f229
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002a.html
@@ -0,0 +1,84 @@
+<!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 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-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 2px solid purple;
+    padding: 2px;
+    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-height: 0;
+    border: 2px solid teal;
+  }
+
+  .smallText { font: 10px Ahem; }
+  .bigText   { font: 20px Ahem; }
+  .spacerChild::before {
+    content: '';
+    display: block;
+    background: brown;
+    height: 10px;
+    width: 10px;
+  }
+  .justPadding {
+    /* Empty div with 5px padding on each side */
+    padding: 5px;
+    background: cyan;
+  }
+  canvas { background: fuchsia }
+  </style>
+</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 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 height="20"       style="width: 8px"></canvas>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002b.html
new file mode 100644
index 000000000..694e67242
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002b.html
@@ -0,0 +1,84 @@
+<!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" (set via the "flex" shorthand)
+    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-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 2px solid purple;
+    padding: 2px;
+    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-height: 0;
+    border: 2px solid teal;
+  }
+
+  .smallText { font: 10px Ahem; }
+  .bigText   { font: 20px Ahem; }
+  .spacerChild::before {
+    content: '';
+    display: block;
+    background: brown;
+    height: 10px;
+    width: 10px;
+  }
+  .justPadding {
+    /* Empty div with 5px padding on each side */
+    padding: 5px;
+    background: cyan;
+  }
+  canvas { background: fuchsia }
+  </style>
+</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 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 height="20"       style="width: 8px"></canvas>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003-ref.html
new file mode 100644
index 000000000..63ce9d742
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+  .container {
+    clear: both; /* In this reference case, we use floats instead of
+                    flex items (see below), so the container just
+                    needs to reset the float state for each example. */
+  }
+
+  .item {
+    border: 2px solid teal;
+    float: left; /* Use floated elements as a reference for (hopefully)
+                    max-content sized flex items in testcase. */
+  }
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  float {
+    float: left;
+    background: fuchsia;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  canvas {
+    background: brown;
+    border: 1px solid gray;
+  }
+  .innerFlex {
+    display: flex;
+  }
+  innerItem {
+    background: salmon;
+    border: 1px solid gray;
+    height: 10px;
+    width: 15px;
+    flex: none;
+  }
+  </style>
+</head>
+<body>
+<!-- In testcase, flex item has several inline-blocks
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item"><ib></ib><ib></ib><ib></ib></div>
+</div>
+
+<!-- In testcase, flex item has several floats: -->
+<div class="container">
+  <div class="item">
+    <float></float>
+    <float></float>
+    <float></float>
+  </div>
+</div>
+
+<!-- In testcase, flex item has several inline replaced elements:
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item">
+    <canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas>
+  </div>
+</div>
+
+<!-- In testcase, flex item *is* a replaced element: -->
+<div class="container">
+  <canvas class="item" width="25" height="10"></canvas>
+</div>
+
+<!-- In testcase, flex item is itself a flex container: -->
+<div class="container">
+  <div class="item innerFlex">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+<!-- In testcase, flex item is itself a multi-line flex container: -->
+<div class="container">
+  <div class="item innerFlex" style="flex-wrap: wrap">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003a.html
new file mode 100644
index 000000000..83dbae086
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003a.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing that explicit "flex-basis: content" is treated as
+    "max-content" when calculating flex base size
+  </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/#flex-base-size">
+  <link rel="match" href="flexbox-flex-basis-content-003-ref.html">
+  <style>
+  .container {
+    display: flex;
+    /* flex container has an extremely-constrained width (and items will
+       overflow horizontally). This is intentional, as part of stress-testing
+       item sizing. */
+    width: 1px;
+  }
+
+  .item {
+    /* We give all flex items "flex-basis: content".
+       We also give them zero flex-grow, flex-shrink, and min-main-size, so
+       that the flex base size entirely determines the flex item's size. */
+    flex: 0 0 content;
+    min-width: 0;
+    border: 2px solid teal;
+  }
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  float {
+    float: left;
+    background: fuchsia;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  canvas {
+    background: brown;
+    border: 1px solid gray;
+  }
+  .innerFlex {
+    display: flex;
+  }
+  innerItem {
+    background: salmon;
+    border: 1px solid gray;
+    height: 10px;
+    width: 15px;
+    flex: none;
+  }
+  </style>
+</head>
+<body>
+<!-- The idea of this test is to be sure the UA is using the "max-content" size
+     (and not e.g. the "fit-content size") when resolving the flex base size
+     inside each flex container.  To differentiate between max-content and
+     other intrinsic size possibilities (min-content/fit-content), we:
+       - use flex items with a large difference between its min-content size &
+       its max-content size (e.g. wrappable content).
+       - use a very small container (to compress the size, if the UA incorrectly
+       allows the size to be influenced by the container size).
+-->
+
+<!-- Flex item has several inline-blocks
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item"><ib></ib><ib></ib><ib></ib></div>
+</div>
+
+<!-- Flex item has several floats: -->
+<div class="container">
+  <div class="item">
+    <float></float>
+    <float></float>
+    <float></float>
+  </div>
+</div>
+
+<!-- Flex item has several inline replaced elements:
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item">
+    <canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas>
+  </div>
+</div>
+
+<!-- Flex item *is* a replaced element: -->
+<div class="container">
+  <canvas class="item" width="25" height="10"></canvas>
+</div>
+
+<!-- Flex item is itself a flex container: -->
+<div class="container">
+  <div class="item innerFlex">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+<!-- Flex item is itself a multi-line flex container: -->
+<div class="container">
+  <div class="item innerFlex" style="flex-wrap: wrap">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003b.html
new file mode 100644
index 000000000..a81403c09
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003b.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing that used "flex-basis: content" is treated as
+    "max-content" when calculating flex base size
+  </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/#flex-base-size">
+  <link rel="match" href="flexbox-flex-basis-content-003-ref.html">
+  <style>
+  .container {
+    display: flex;
+    /* flex container has an extremely-constrained width (and items will
+       overflow horizontally). This is intentional, as part of stress-testing
+       item sizing. */
+    width: 1px;
+  }
+
+  .item {
+    /* We give all flex items a used "flex-basis" of "content"
+       (from "flex-basis:auto" and default "width:auto").
+       We also give them zero flex-grow, flex-shrink, and min-main-size, so
+       that the flex base size entirely determines the flex item's size. */
+    flex: 0 0 auto;
+    min-width: 0;
+    border: 2px solid teal;
+  }
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  float {
+    float: left;
+    background: fuchsia;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  canvas {
+    background: brown;
+    border: 1px solid gray;
+  }
+  .innerFlex {
+    display: flex;
+  }
+  innerItem {
+    background: salmon;
+    border: 1px solid gray;
+    height: 10px;
+    width: 15px;
+    flex: none;
+  }
+  </style>
+</head>
+<body>
+<!-- The idea of this test is to be sure the UA is using the "max-content" size
+     (and not e.g. the "fit-content size") when resolving the flex base size
+     inside each flex container.  To differentiate between max-content and
+     other intrinsic size possibilities (min-content/fit-content), we:
+       - use flex items with a large difference between its min-content size &
+       its max-content size (e.g. wrappable content).
+       - use a very small container (to compress the size, if the UA incorrectly
+       allows the size to be influenced by the container size).
+-->
+
+<!-- Flex item has several inline-blocks
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item"><ib></ib><ib></ib><ib></ib></div>
+</div>
+
+<!-- Flex item has several floats: -->
+<div class="container">
+  <div class="item">
+    <float></float>
+    <float></float>
+    <float></float>
+  </div>
+</div>
+
+<!-- Flex item has several inline replaced elements:
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item">
+    <canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas>
+  </div>
+</div>
+
+<!-- Flex item *is* a replaced element: -->
+<div class="container">
+  <canvas class="item" width="25" height="10"></canvas>
+</div>
+
+<!-- Flex item is itself a flex container: -->
+<div class="container">
+  <div class="item innerFlex">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+<!-- Flex item is itself a multi-line flex container: -->
+<div class="container">
+  <div class="item innerFlex" style="flex-wrap: wrap">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004-ref.html
new file mode 100644
index 000000000..7da4de7a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <meta charset="utf-8">
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+  .container {
+    clear: both; /* In this reference case, we use floats instead of
+                    flex items (see below), so the container just
+                    needs to reset the float state for each example. */
+    height: 50px;
+  }
+
+  .item {
+    border: 2px solid teal;
+    float: left; /* Use floated elements as a reference for (hopefully)
+                    max-content sized flex items in testcase. */
+  }
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  float {
+    float: left;
+    background: fuchsia;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  canvas {
+    background: brown;
+    border: 1px solid gray;
+  }
+  .innerFlex {
+    display: flex;
+    flex-direction: column;
+  }
+  innerItem {
+    background: salmon;
+    border: 1px solid gray;
+    height: 10px;
+    width: 15px;
+    flex: none;
+  }
+  </style>
+</head>
+<body>
+<!-- In testcase, flex item has several inline-blocks
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item"><ib></ib><ib></ib><ib></ib></div>
+</div>
+
+<!-- In testcase, flex item has several floats: -->
+<div class="container">
+  <div class="item">
+    <float></float>
+    <float></float>
+    <float></float>
+  </div>
+</div>
+
+<!-- In testcase, flex item has several inline replaced elements:
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item">
+    <canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas>
+  </div>
+</div>
+
+<!-- In testcase, flex item *is* a replaced element: -->
+<div class="container">
+  <canvas class="item" width="25" height="10"></canvas>
+</div>
+
+<!-- In testcase, flex item is itself a flex container: -->
+<div class="container">
+  <div class="item innerFlex">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+<!-- In testcase, flex item is itself a multi-line flex container: -->
+<div class="container">
+  <div class="item innerFlex" style="flex-wrap: wrap">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004a.html
new file mode 100644
index 000000000..65a86b508
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004a.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing that explicit "flex-basis: content" is treated as
+    "max-content" when calculating flex base size
+  </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/#flex-base-size">
+  <link rel="match" href="flexbox-flex-basis-content-004-ref.html">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    /* flex container has an extremely-constrained height (and items will
+       overflow vertically). This is intentional, as part of stress-testing
+       item sizing. We add a large margin-bottom so that overflowing
+       items don't overlap between examples. */
+    height: 1px;
+    margin-bottom: 49px;
+  }
+
+  .item {
+    /* We give all flex items "flex-basis: content".
+       We also give them zero flex-grow, flex-shrink, and min-main-size, so
+       that the flex base size entirely determines the flex item's size. */
+    flex: 0 0 content;
+    min-height: 0;
+    border: 2px solid teal;
+  }
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  float {
+    float: left;
+    background: fuchsia;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  canvas {
+    background: brown;
+    border: 1px solid gray;
+  }
+  .innerFlex {
+    display: flex;
+    flex-direction: column;
+  }
+  innerItem {
+    background: salmon;
+    border: 1px solid gray;
+    height: 10px;
+    width: 15px;
+    flex: none;
+  }
+  </style>
+</head>
+<body>
+<!-- This test exists for symmetry with the previous set of tests
+     (flexbox-flex-basis-content-003*). Those previous tests check how
+     "flex-basis:content" is resolved to a flex base size, in the inline axis,
+     when the container's size is constrained in that axis. This test does the
+     same, but for the *block* axis, using flex-direction:column. As with the
+     previous set of tests, the expectation here is that we should use the
+     item's max-content size as its flex base size. Note that there's a bit
+     less subtlety here because intrinsic sizes (min-content, max-content) are
+     typically all the same in the block axis.
+-->
+
+<!-- Flex item has several inline-blocks
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item"><ib></ib><ib></ib><ib></ib></div>
+</div>
+
+<!-- Flex item has several floats: -->
+<div class="container">
+  <div class="item">
+    <float></float>
+    <float></float>
+    <float></float>
+  </div>
+</div>
+
+<!-- Flex item has several inline replaced elements:
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item">
+    <canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas>
+  </div>
+</div>
+
+<!-- Flex item *is* a replaced element: -->
+<div class="container">
+  <canvas class="item" width="25" height="10"></canvas>
+</div>
+
+<!-- Flex item is itself a flex container: -->
+<div class="container">
+  <div class="item innerFlex">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+<!-- Flex item is itself a multi-line flex container: -->
+<div class="container">
+  <div class="item innerFlex" style="flex-wrap: wrap">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004b.html
new file mode 100644
index 000000000..a686f1aa1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004b.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>
+    CSS Test: Testing that used "flex-basis: content" is treated as
+    "max-content" when calculating flex base size
+  </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/#flex-base-size">
+  <link rel="match" href="flexbox-flex-basis-content-004-ref.html">
+  <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    /* flex container has an extremely-constrained height (and items will
+       overflow vertically). This is intentional, as part of stress-testing
+       item sizing. We add a large margin-bottom so that overflowing
+       items don't overlap between examples. */
+    height: 1px;
+    margin-bottom: 49px;
+  }
+
+  .item {
+    /* We give all flex items a used "flex-basis" of "content"
+       (from "flex-basis:auto" and default "width:auto").
+       We also give them zero flex-grow, flex-shrink, and min-main-size, so
+       that the flex base size entirely determines the flex item's size. */
+    flex: 0 0 auto;
+    min-height: 0;
+    border: 2px solid teal;
+  }
+  ib {
+    display: inline-block;
+    background: blue;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  float {
+    float: left;
+    background: fuchsia;
+    border: 1px solid gray;
+    width: 15px;
+    height: 10px;
+  }
+  canvas {
+    background: brown;
+    border: 1px solid gray;
+  }
+  .innerFlex {
+    display: flex;
+    flex-direction: column;
+  }
+  innerItem {
+    background: salmon;
+    border: 1px solid gray;
+    height: 10px;
+    width: 15px;
+    flex: none;
+  }
+  </style>
+</head>
+<body>
+<!-- This test exists for symmetry with the previous set of tests
+     (flexbox-flex-basis-content-003*). Those previous tests check how
+     "flex-basis:content" is resolved to a flex base size, in the inline axis,
+     when the container's size is constrained in that axis. This test does the
+     same, but for the *block* axis, using flex-direction:column. As with the
+     previous set of tests, the expectation here is that we should use the
+     item's max-content size as its flex base size. Note that there's a bit
+     less subtlety here because intrinsic sizes (min-content, max-content) are
+     typically all the same in the block axis.
+-->
+
+<!-- Flex item has several inline-blocks
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item"><ib></ib><ib></ib><ib></ib></div>
+</div>
+
+<!-- Flex item has several floats: -->
+<div class="container">
+  <div class="item">
+    <float></float>
+    <float></float>
+    <float></float>
+  </div>
+</div>
+
+<!-- Flex item has several inline replaced elements:
+     (no spaces, to avoid any text-layout dependency): -->
+<div class="container">
+  <div class="item">
+    <canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas
+    ><canvas width="15" height="10"></canvas>
+  </div>
+</div>
+
+<!-- Flex item *is* a replaced element: -->
+<div class="container">
+  <canvas class="item" width="25" height="10"></canvas>
+</div>
+
+<!-- Flex item is itself a flex container: -->
+<div class="container">
+  <div class="item innerFlex">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+<!-- Flex item is itself a multi-line flex container: -->
+<div class="container">
+  <div class="item innerFlex" style="flex-wrap: wrap">
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+    <innerItem></innerItem>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest.list b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
index 075aa660e..7cac455ae 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -98,6 +98,16 @@
 == flexbox-column-row-gap-004.html flexbox-column-row-gap-004-ref.html
 == flexbox-gap-position-absolute.html flexbox-gap-position-absolute-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
+== flexbox-flex-basis-content-003a.html flexbox-flex-basis-content-003-ref.html
+== flexbox-flex-basis-content-003b.html flexbox-flex-basis-content-003-ref.html
+== flexbox-flex-basis-content-004a.html flexbox-flex-basis-content-004-ref.html
+== flexbox-flex-basis-content-004b.html flexbox-flex-basis-content-004-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
author	FranklinDM <mrmineshafter17@gmail.com>	2022-04-17 19:01:33 -0500
committer	Matt A. Tobin <email@mattatobin.com>	2022-04-17 19:02:32 -0500
commit	20ae4cdbdaa44eeac22e4a2f961f11c6cd57cfe1 (patch)
tree	4c9ab11e8ad4fb99a3000d6c2a440cc676bff3ae /layout/reftests
parent	df5aca3bde8c1baddae207bc3e89d196451d8747 (diff)
download	aura-central-20ae4cdbdaa44eeac22e4a2f961f11c6cd57cfe1.tar.gz