mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 939901 part 8: Reftests for multi-line flexbox layout. r=mats
--HG-- rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1a-wrap.html rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1c-wrap.html rename : layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d.html => layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1d-wrap.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1-ref.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-1.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2-ref.html rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-1.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-2.html
This commit is contained in:
Daniel Holbert
parent
9e3f151aab
commit
cf95cd5211
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 2px dotted black;
|
||||
height: 298px;
|
||||
}
|
||||
.multicol {
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
-moz-column-width: 20px;
|
||||
-moz-column-fill: auto;
|
||||
border: 4px solid orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: row" and
|
||||
"flex-wrap: wrap".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
-moz-column-width: 20px;
|
||||
-moz-column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: row-reverse" and
|
||||
"flex-wrap: wrap".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
-moz-column-width: 20px;
|
||||
-moz-column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: column" and
|
||||
"flex-wrap: wrap".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
-moz-column-width: 20px;
|
||||
-moz-column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with a single unbreakable
|
||||
child, with the flex container having "flex-direction: column-reverse"
|
||||
and "flex-wrap: wrap".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
-moz-column-width: 20px;
|
||||
-moz-column-fill: auto;
|
||||
border: 2px solid orange;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
background: teal;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, smaller than available height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 8px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, between available height and child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 15px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, same as child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 20px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, larger than child height: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 24px">
|
||||
<img src="" class="item">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with several children in a
|
||||
multi-line vertical flexbox.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
-moz-column-width: 60px;
|
||||
-moz-column-fill: auto;
|
||||
border: 2px solid purple;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
background: yellow;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.item {
|
||||
width: 40px;
|
||||
height: 15px;
|
||||
border: 1px dotted teal;
|
||||
margin: 1px;
|
||||
font: 10px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 38px">
|
||||
<div class="item">1</div>
|
||||
<div class="item">3</div>
|
||||
<div class="item">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auto-height container, with enough children that our last flex line
|
||||
overflows (in the cross axis) -->
|
||||
<!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
|
||||
overflowing flex line to a continuation of the flex container -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 38px">
|
||||
<div style="width: 132px">
|
||||
<div class="item">1</div>
|
||||
<div class="item">3</div>
|
||||
<div class="item">5</div>
|
||||
<div class="item">2</div>
|
||||
<div class="item">4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container-->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 70px">
|
||||
<div class="item">1</div>
|
||||
<div class="item">3</div>
|
||||
<div class="item">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, with enough children that our last flex line
|
||||
overflows (in the cross axis) -->
|
||||
<!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
|
||||
overflowing flex line to a continuation of the flex container -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 70px">
|
||||
<div style="width: 132px">
|
||||
<div class="item">1</div>
|
||||
<div class="item">3</div>
|
||||
<div class="item">5</div>
|
||||
<div class="item">2</div>
|
||||
<div class="item">4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!-- Testcase for how we fragment a flex container with several children in a
|
||||
multi-line vertical flexbox.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.multicol {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
-moz-column-width: 60px;
|
||||
-moz-column-fill: auto;
|
||||
border: 2px solid purple;
|
||||
margin-bottom: 15px; /* (just for spacing between testcases) */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
background: yellow;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
.item {
|
||||
width: 40px;
|
||||
height: 15px;
|
||||
border: 1px dotted teal;
|
||||
margin: 1px;
|
||||
font: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- auto-height container: -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<div class="item">1</div>
|
||||
<div class="item">2</div>
|
||||
<div class="item">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- auto-height container, with enough children that our last flex line
|
||||
overflows (in the cross axis) -->
|
||||
<!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
|
||||
overflowing flex line to a continuation of the flex container -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer">
|
||||
<div class="item">1</div>
|
||||
<div class="item">2</div>
|
||||
<div class="item">3</div>
|
||||
<div class="item">4</div>
|
||||
<div class="item">5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container-->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 70px">
|
||||
<div class="item">1</div>
|
||||
<div class="item">2</div>
|
||||
<div class="item">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fixed-height container, with enough children that our last flex line
|
||||
overflows (in the cross axis) -->
|
||||
<!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the
|
||||
overflowing flex line to a continuation of the flex container -->
|
||||
<div class="multicol">
|
||||
<div class="flexContainer" style="height: 70px">
|
||||
<div class="item">1</div>
|
||||
<div class="item">2</div>
|
||||
<div class="item">3</div>
|
||||
<div class="item">4</div>
|
||||
<div class="item">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -19,7 +19,12 @@
|
||||
== flexbox-empty-2d.html flexbox-empty-2-ref.html
|
||||
|
||||
# Tests for how we fragment a flex container with one unbreakable child
|
||||
== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1a.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1a-wrap.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1b.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1b-wrap.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1c.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1c-wrap.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1d.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-1d-wrap.html flexbox-unbreakable-child-1-ref.html
|
||||
== flexbox-unbreakable-child-2.html flexbox-unbreakable-child-2-ref.html
|
||||
|
||||
@ -0,0 +1,129 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: 30px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 160px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 80px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 60px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-top: 60px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 40px"/>
|
||||
<div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 20px"/>
|
||||
<div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-top: 40px"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,138 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
|
||||
<link rel="match" href="flexbox-align-content-horiz-1-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: auto; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,139 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. Additionally,
|
||||
the flex container derives its width from the "max-width" property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
|
||||
<link rel="match" href="flexbox-align-content-horiz-1-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
max-width: 20px; /* Skinny, to force us to wrap */
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
height: auto; /* height comes from contents */
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,132 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
height: 20px;
|
||||
clear: all;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: lightgreen;
|
||||
float: left;
|
||||
}
|
||||
div.b {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background: pink;
|
||||
float: left;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 160px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 80px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 60px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 60px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 40px"/>
|
||||
<div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 20px"/>
|
||||
<div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 40px"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,138 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
|
||||
<link rel="match" href="flexbox-align-content-vert-1-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto; /* width comes from contents */
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,139 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. Additionally,
|
||||
the flex container derives its height from the "max-height" property.-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical flex container</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property"/>
|
||||
<link rel="match" href="flexbox-align-content-vert-1-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
max-height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto; /* width comes from contents */
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
baseline-aligned items aligned using specific font-size / line-heights,
|
||||
and with unaligned children taken out of baseline-alignment using
|
||||
"vertical-align:top".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-1-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
flex-wrap: wrap;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.unaligned { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont unaligned">g</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with several flex lines.
|
||||
The spec says this about this case:
|
||||
[Given that the first line has no baseline-aligned items:]
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-1-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
/* We'll make the second flex line not paint anything, so that the
|
||||
reference case doesn't need to bother matching it. */
|
||||
.flexContainer > *:nth-child(3),
|
||||
.flexContainer > *:nth-child(4) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont">c</div
|
||||
><div class="bigFont">d</div
|
||||
><div class="medFont">e</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont">g</div
|
||||
><div class="medFont">h</div
|
||||
><div class="bigFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont">k</div
|
||||
><div class="bigFont" style="align-self: baseline">l</div
|
||||
><div class="medFont" style="align-self: baseline">m</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case, using inline-block instead of inline-flex, and with the
|
||||
baseline-aligned items aligned using specific font-size / line-heights,
|
||||
and with unaligned children taken out of baseline-alignment using
|
||||
"vertical-align:top".
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-1-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
flex-wrap: wrap;
|
||||
width: 40px;
|
||||
/* Split testcase's 40px height into 20px of padding-top and 20px of
|
||||
height, to set aside space for the testcase's (invisible) second line
|
||||
(which is above the first line, since this is wrap-reverse) */
|
||||
height: 20px;
|
||||
padding-top: 20px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.unaligned { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont unaligned">g</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for how we compute the baseline of a horizontal flex container
|
||||
with several flex lines (wrapping in the reverse direction).
|
||||
The spec says this about this case:
|
||||
[Given that the first line has no baseline-aligned items:]
|
||||
...if the flex container has at least one flex item, and its
|
||||
first flex item has a baseline parallel to the flex
|
||||
container's main axis, the flex container's main-axis
|
||||
baseline is that baseline.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-baselines">
|
||||
<link rel="match" href="flexbox-baseline-multi-line-horiz-2-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
/* We'll make the second flex line not paint anything, so that the
|
||||
reference case doesn't need to bother matching it. */
|
||||
.flexContainer > *:nth-child(3),
|
||||
.flexContainer > *:nth-child(4) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.smallFont {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
.medFont {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div
|
||||
><div class="bigFont">c</div
|
||||
><div class="bigFont">d</div
|
||||
><div class="medFont">e</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">f</div
|
||||
><div class="smallFont">g</div
|
||||
><div class="medFont">h</div
|
||||
><div class="bigFont">i</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with second line baseline-aligned
|
||||
(shouldn't make a difference) -->
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">j</div
|
||||
><div class="bigFont">k</div
|
||||
><div class="bigFont" style="align-self: baseline">l</div
|
||||
><div class="medFont" style="align-self: baseline">m</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
width: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.fullCrossSize {
|
||||
height: 18px;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize"></div>
|
||||
<div class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize"></div>
|
||||
<div class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize"></div>
|
||||
<div class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-before in horizontal multi-line flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
width: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-before specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the beginning): -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on second item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on third item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-after in horizontal multi-line flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
width: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-after specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the end): -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on first item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on second item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
width: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.fullCrossSize {
|
||||
height: 18px;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
height: 8px;
|
||||
}
|
||||
div.shrunkMainSize {
|
||||
width: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-before in horizontal single-line flex containers (should have no effect)</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
border: 1px dashed black;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
width: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-before specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the beginning): -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on second item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on third item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-after in horizontal single-line flex containers (should have no effect)</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
border: 1px dashed black;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
width: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-after specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the end): -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on first item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on second item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
height: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.fullCrossSize {
|
||||
width: 18px;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
<div class="item halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-before in vertical multi-line flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
height: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-before specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the beginning): -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on second item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on third item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-after in vertical multi-line flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
height: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-after specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the end): -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on first item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on second item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
height: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.fullCrossSize {
|
||||
width: 18px;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
width: 8px;
|
||||
}
|
||||
div.shrunkMainSize {
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize"></div>
|
||||
<div class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect)</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px dashed black;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
height: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-before specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the beginning): -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on second item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-before specified on third item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-before: right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing page-break-after in vertical single-line flex containers (should have no effect)</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#algo-line-break">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-3-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px dashed black;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
margin: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.item {
|
||||
height: 28px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- page-break-after specified on first (and only) item, at a point where
|
||||
we're already "breaking" (the end): -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on first item, at a point where breaking
|
||||
would otherwise be unnecessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- page-break-after specified on second item, at a point where breaking
|
||||
is already necessary: -->
|
||||
<!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: auto"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: avoid"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<!-- * With 'page-break-after: always, left, right' (requesting a break): -->
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: always"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: left"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="page-break-after: right"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
width: 100px;
|
||||
height: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
div.halfMainSize {
|
||||
width: 48px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.hugeMainSize {
|
||||
width: 148px;
|
||||
border: 1px solid purple;
|
||||
background: fuchsia;
|
||||
}
|
||||
div.fullCrossSize {
|
||||
height: 10px;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
height: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item with 'margin-left' set to push it to protrude
|
||||
from the far edge of the container (and to shrink as a result) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize"
|
||||
style="margin-left: 80px; width: 18px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small inflexible flex item with 'margin-left' set to push it to
|
||||
protrude from the far edge of the container -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize"
|
||||
style="margin-left: 80px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize" style="float: left"></div>
|
||||
<div class="halfMainSize fullCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on first item, to force second item to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize"></div>
|
||||
<div class="halfMainSize halfCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on second item, again forcing it to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize"></div>
|
||||
<div class="halfMainSize halfCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) and is shrunk
|
||||
to fit container's main-size -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize fullCrossSize" style="width: 98px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize fullCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize"></div>
|
||||
<div class="hugeMainSize halfCrossSize" style="width: 98px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large inflexible flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize"></div>
|
||||
<div class="hugeMainSize halfCrossSize"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing flex-wrap in horizontal flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-1-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
width: 100px;
|
||||
height: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
div.halfMainSize {
|
||||
width: 48px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.hugeMainSize {
|
||||
width: 148px;
|
||||
border: 1px solid purple;
|
||||
background: fuchsia;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item with 'margin-left' set to push it to protrude
|
||||
from the far edge of the container (and to shrink as a result) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize" style="margin-left: 80px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small inflexible flex item with 'margin-left' set to push it to
|
||||
protrude from the far edge of the container -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize" style="margin-left: 80px; flex: none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="halfMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on first item, to force second item to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize" style="margin-right: 1px"></div>
|
||||
<div class="halfMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on second item, again forcing it to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="halfMainSize" style="margin-right: 1px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) and is shrunk
|
||||
to fit container's main-size -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize" style="flex: none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="hugeMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large inflexible flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="hugeMainSize" style="flex: none"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
min-width: 100px;
|
||||
height: 12px;
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
div.smallItem {
|
||||
width: 30px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
float: left;
|
||||
}
|
||||
div.fullCrossSize {
|
||||
height: 10px;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
height: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- No flex items -->
|
||||
<div class="flexbox">
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem fullCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple flex items, larger than flex container's min-size: -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem fullCrossSize"></div>
|
||||
<div class="smallItem fullCrossSize"></div>
|
||||
<div class="smallItem fullCrossSize"></div>
|
||||
<div class="smallItem fullCrossSize"></div>
|
||||
<div class="smallItem fullCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!--- ...and now with flex container constrained by both min and max-size -->
|
||||
<div class="flexbox" style="max-width: 120px">
|
||||
<div class="smallItem halfCrossSize"></div>
|
||||
<div class="smallItem halfCrossSize"></div>
|
||||
<div class="smallItem halfCrossSize"></div>
|
||||
<div class="smallItem halfCrossSize"></div>
|
||||
<div class="smallItem halfCrossSize"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Ensure that min-width is honored for horizontal multi-line flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
|
||||
<link rel="match" href="flexbox-flex-wrap-horiz-2-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
min-width: 100px;
|
||||
height: 12px;
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
div.smallItem {
|
||||
width: 30px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- No flex items -->
|
||||
<div class="flexbox">
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple flex items, larger than flex container's min-size: -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
<!--- ...and now with flex container constrained by both min and max-size -->
|
||||
<div class="flexbox" style="max-width: 120px">
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
width: 12px;
|
||||
height: 100px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.halfMainSize {
|
||||
height: 48px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.hugeMainSize {
|
||||
height: 148px;
|
||||
border: 1px solid purple;
|
||||
background: fuchsia;
|
||||
}
|
||||
div.fullCrossSize {
|
||||
width: 10px;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
width: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item with 'margin-left' set to push it to protrude
|
||||
from the far edge of the container (and to shrink as a result) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize"
|
||||
style="margin-top: 80px; height: 18px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small inflexible flex item with 'margin-left' set to push it to
|
||||
protrude from the far edge of the container -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize"
|
||||
style="margin-top: 80px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize fullCrossSize"></div>
|
||||
<div class="halfMainSize fullCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on first item, to force second item to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize" style="float: left"></div>
|
||||
<div class="halfMainSize halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on second item, again forcing it to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize" style="float: left"></div>
|
||||
<div class="halfMainSize halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) and is shrunk
|
||||
to fit container's main-size -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize fullCrossSize" style="height: 98px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize fullCrossSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize" style="float: left"></div>
|
||||
<div class="hugeMainSize halfCrossSize" style="float: left; height: 98px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large inflexible flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize halfCrossSize" style="float: left"></div>
|
||||
<div class="hugeMainSize halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Testing flex-wrap in vertical flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
|
||||
<link rel="match" href="flexbox-flex-wrap-vert-1-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
width: 12px;
|
||||
height: 100px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.halfMainSize {
|
||||
height: 48px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.hugeMainSize {
|
||||
height: 148px;
|
||||
border: 1px solid purple;
|
||||
background: fuchsia;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item with 'margin-top' set to push it to protrude
|
||||
from the far edge of the container (and to shrink as a result) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize" style="margin-top: 80px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single small inflexible flex item with 'margin-top' set to push it to
|
||||
protrude from the far edge of the container -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize" style="margin-top: 80px; flex: none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="halfMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on first item, to force second item to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize" style="margin-bottom: 1px"></div>
|
||||
<div class="halfMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- and now with some margin on second item, again forcing it to wrap: -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="halfMainSize" style="margin-bottom: 1px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) and is shrunk
|
||||
to fit container's main-size -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Single large flex item: overflows (but does not wrap) -->
|
||||
<div class="flexbox">
|
||||
<div class="hugeMainSize" style="flex: none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="hugeMainSize"></div>
|
||||
</div>
|
||||
|
||||
<!-- Small flex item, followed by large inflexible flex item (which wraps to
|
||||
its own line and then shrink to container's main-size) -->
|
||||
<div class="flexbox">
|
||||
<div class="halfMainSize"></div>
|
||||
<div class="hugeMainSize" style="flex: none"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
border: 1px dashed black;
|
||||
width: 12px;
|
||||
min-height: 100px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.smallItem {
|
||||
height: 30px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
div.halfCrossSize {
|
||||
width: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- No flex items -->
|
||||
<div class="flexbox">
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple flex items, larger than flex container's min-size: -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
<!--- ...and now with flex container constrained by both min and max-size -->
|
||||
<div class="flexbox" style="max-height: 120px">
|
||||
<div class="smallItem halfCrossSize" style="float: left"></div>
|
||||
<div class="smallItem halfCrossSize" style="float: left"></div>
|
||||
<div class="smallItem halfCrossSize" style="float: left"></div>
|
||||
<div class="smallItem halfCrossSize" style="float: left"></div>
|
||||
<div class="smallItem halfCrossSize" style="float: left"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Ensure that min-height is honored for vertical multi-line flex containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox/#flex-wrap-property">
|
||||
<link rel="match" href="flexbox-flex-wrap-vert-2-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
border: 1px dashed black;
|
||||
width: 12px;
|
||||
min-height: 100px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.smallItem {
|
||||
height: 30px;
|
||||
border: 1px solid blue;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- No flex items -->
|
||||
<div class="flexbox">
|
||||
</div>
|
||||
|
||||
<!-- Single small flex item -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
<!-- Multiple flex items, larger than flex container's min-size: -->
|
||||
<div class="flexbox">
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
<!--- ...and now with flex container constrained by both min and max-size -->
|
||||
<div class="flexbox" style="max-height: 120px">
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
<div class="smallItem"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +1,9 @@
|
||||
# Tests for alignment of flex lines (align-content property)
|
||||
== flexbox-align-content-horiz-1a.xhtml flexbox-align-content-horiz-1-ref.xhtml
|
||||
== flexbox-align-content-horiz-1b.xhtml flexbox-align-content-horiz-1-ref.xhtml
|
||||
== flexbox-align-content-vert-1a.xhtml flexbox-align-content-vert-1-ref.xhtml
|
||||
== flexbox-align-content-vert-1b.xhtml flexbox-align-content-vert-1-ref.xhtml
|
||||
|
||||
# Tests for cross-axis alignment (align-self / align-items properties)
|
||||
== flexbox-align-self-baseline-horiz-1.xhtml flexbox-align-self-baseline-horiz-1-ref.xhtml
|
||||
|
||||
@ -25,6 +31,8 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-1.xhtml flexbox-align-s
|
||||
== flexbox-baseline-empty-1b.html flexbox-baseline-empty-1-ref.html
|
||||
== flexbox-baseline-multi-item-horiz-1.html flexbox-baseline-multi-item-horiz-1-ref.html
|
||||
== flexbox-baseline-multi-item-vert-1.html flexbox-baseline-multi-item-vert-1-ref.html
|
||||
== flexbox-baseline-multi-line-horiz-1.html flexbox-baseline-multi-line-horiz-1-ref.html
|
||||
== flexbox-baseline-multi-line-horiz-2.html flexbox-baseline-multi-line-horiz-2-ref.html
|
||||
== flexbox-baseline-single-item-1a.html flexbox-baseline-single-item-1-ref.html
|
||||
== flexbox-baseline-single-item-1b.html flexbox-baseline-single-item-1-ref.html
|
||||
|
||||
@ -46,6 +54,22 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-1.xhtml flexbox-align-s
|
||||
== flexbox-basic-video-horiz-1.xhtml flexbox-basic-video-horiz-1-ref.xhtml
|
||||
== flexbox-basic-video-vert-1.xhtml flexbox-basic-video-vert-1-ref.xhtml
|
||||
|
||||
# Tests for "page-break-before" / "page-break-after" on a flex item
|
||||
== flexbox-break-request-horiz-1a.html flexbox-break-request-horiz-1-ref.html
|
||||
== flexbox-break-request-horiz-1b.html flexbox-break-request-horiz-1-ref.html
|
||||
== flexbox-break-request-horiz-2a.html flexbox-break-request-horiz-2-ref.html
|
||||
== flexbox-break-request-horiz-2b.html flexbox-break-request-horiz-2-ref.html
|
||||
== flexbox-break-request-vert-1a.html flexbox-break-request-vert-1-ref.html
|
||||
== flexbox-break-request-vert-1b.html flexbox-break-request-vert-1-ref.html
|
||||
== flexbox-break-request-vert-2a.html flexbox-break-request-vert-2-ref.html
|
||||
== flexbox-break-request-vert-2b.html flexbox-break-request-vert-2-ref.html
|
||||
|
||||
# Tests for flex-wrap property
|
||||
== flexbox-flex-wrap-horiz-1.html flexbox-flex-wrap-horiz-1-ref.html
|
||||
== flexbox-flex-wrap-horiz-2.html flexbox-flex-wrap-horiz-2-ref.html
|
||||
== flexbox-flex-wrap-vert-1.html flexbox-flex-wrap-vert-1-ref.html
|
||||
== flexbox-flex-wrap-vert-2.html flexbox-flex-wrap-vert-2-ref.html
|
||||
|
||||
# Tests for flex items as (pseudo) stacking contexts
|
||||
== flexbox-items-as-stacking-contexts-1.xhtml flexbox-items-as-stacking-contexts-1-ref.xhtml
|
||||
== flexbox-items-as-stacking-contexts-2.html flexbox-items-as-stacking-contexts-2-ref.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user