wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-08-15 08:53:07 +09:00
Code Issues Projects Releases Packages Wiki Activity

Issue #1370 - Part 6: Update tests

Browse source
This commit is contained in:
FranklinDM 2022-04-07 01:07:24 +08:00 • committed by roytam1
commit 3c6a52a0a6
14 changed files with 1227 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

77
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001-ref.html Normal file
View file

@ -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>

83
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001a.html Normal file
View file

@ -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>

83
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-001b.html Normal file
View file

@ -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>

78
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002-ref.html Normal file
View file

@ -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>

84
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002a.html Normal file
View file

@ -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>

84
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-002b.html Normal file
View file

@ -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>

103
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003-ref.html Normal file
View file

@ -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>

123
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003a.html Normal file
View file

@ -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>

124
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-003b.html Normal file
View file

@ -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>

105
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004-ref.html Normal file
View file

@ -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>

129
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004a.html Normal file
View file

@ -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>

130
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-basis-content-004b.html Normal file
View file

@ -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>

10
layout/reftests/w3c-css/submitted/flexbox/reftest.list
View file

@ -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

20
layout/style/test/property_database.js
View file

@ -4130,6 +4130,8 @@ var gCSSProperties = {
"calc(50px/(2 - 1))",
],
invalid_values: [ "none", "-2px",
/* invalid for width but not flex-basis */
"content",
/* invalid -moz-calc() values */
"-moz-calc(50%+ 2px)",
"-moz-calc(50% +2px)",
@ -4645,12 +4647,18 @@ var gCSSProperties = {
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ " auto" ],
// NOTE: This is cribbed directly from the "width" chunk, since this
// property takes the exact same values as width (albeit with
// different semantics on 'auto').
// XXXdholbert (Maybe these should get separated out into
// a reusable array defined at the top of this file?)
other_values: [ "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
// NOTE: Besides "content", this is cribbed directly from the "width"
// chunk, since this property takes the exact same values as width
// (plus 'content' & with different semantics on 'auto').
other_values: [
"15px",
"3em",
"15%",
"-moz-max-content",
"-moz-min-content",
"-moz-fit-content",
"-moz-available",
"content",
// valid calc() values
"calc(-2px)",
"calc(2px)",