Bug 1105111 part 5: Add reftests for 'flex-basis:content' in column-oriented flex container. r=mats
MozReview-Commit-ID: 6TMrmisHOUr
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
