Bug 1374540 part 1: Add reftests to verify that used 'flex-basis:content' resolves to the max-content size on flex items in row-oriented flex container. r?mats
Note: These tests fail in current mozilla-central (and hence are marked as
failing), but they start passing as of a patch later on in this series.
MozReview-Commit-ID: ElWJCl1ki0H
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -98,16 +98,18 @@ fuzzy-if(Android,158,32) == flexbox-alig
== 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
+fails == flexbox-flex-basis-content-003a.html flexbox-flex-basis-content-003-ref.html # bug 1374540
+fails == flexbox-flex-basis-content-003b.html flexbox-flex-basis-content-003-ref.html # bug 1374540
# 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
