mirror of
https://github.com/servo/servo.git
synced 2025-08-05 13:40:08 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>CSS Test: Change the value of 'order' property</title>
|
||||
<link href="mailto:keynesqu@sohu.com" rel="author" title="KeynesQu">
|
||||
|
||||
<style>
|
||||
|
||||
.box {
|
||||
margin:0 auto;
|
||||
background:#CCC;
|
||||
border-radius:5px;
|
||||
width:600px;
|
||||
}
|
||||
|
||||
.box div {
|
||||
margin:0;
|
||||
width:200px;
|
||||
float:left;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.box .red {
|
||||
background:#F00;
|
||||
}
|
||||
.box .blue {
|
||||
background:#00F;
|
||||
}
|
||||
.box .black {
|
||||
color:#FFF;
|
||||
background:#000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- FLEX CONTAINER -->
|
||||
<div class="box">
|
||||
<div class="blue">B</div>
|
||||
<div class="red">A</div>
|
||||
<div class="black">C</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.flex {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.region {
|
||||
width: 100px;
|
||||
background-color: gray;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a green square inside a gray square.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="region">
|
||||
<div class="flex">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.blue {
|
||||
height: 60px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
position: relative;
|
||||
bottom: 40px;
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a blue rectangle and a green rectangle, from left to right in this order.</li>
|
||||
<li>The blue rectangle one the left should be taller than the green rectangle on the right.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="blue"> </div>
|
||||
<div class="green"> </div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
line-height: 1em;
|
||||
font-size: 20px;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a horizontal green stripe.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
XXXXX<br>
|
||||
XXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see three horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">XXXX</div>
|
||||
<div class="content">XXXX</div>
|
||||
<div class="content">XXXX</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.c1, .c2 {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: blue;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a column of three horizontal stripes with colors in the following order:
|
||||
green, blue, green.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="c2">XXX</div>
|
||||
<div class="c1">XXX</div>
|
||||
<div class="c2">XXX</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.white {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you can see two squares placed on the same horizontal line. Each square consists of two
|
||||
vertical halves. The left square has the left half colored green and the right half colored blue.
|
||||
The right square has left half colored blue and the right half colored green.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="block green"></div><div class="block blue"></div><div class="block white"></div><div class="block blue"></div><div class="block green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.block {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you can see two squares: a green square at the top and a blue square at the bottom.</li>
|
||||
<li>The two squares should be of the same size.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="block green"></div>
|
||||
<div class="block blue"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.column {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>The green and blue rectangles are regions placed inside a flexbox with column wrap flow.</li>
|
||||
<li>Test passes if you see two columns with a total of 6 alternating horizontal green and blue stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="column">
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
</div><div class="column">
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.fixed {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
margin-bottom: 20px;
|
||||
background-color: green;
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see two green stripes.</li>
|
||||
<li>You should not see any red.</li>
|
||||
</ul>
|
||||
<div class="fixed"></div>
|
||||
<div class="fixed"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.stripe {
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
margin-right: 26px;
|
||||
margin-top: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see three horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a rectangle having the left half colored green and the right half colored
|
||||
blue.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="block green"></div><div class="block blue"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.stripe {
|
||||
background-color: green;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
margin-top: 39px;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see you three identical green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.stripe {
|
||||
background-color: green;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see three horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea">
|
||||
<style>
|
||||
.first, .second {
|
||||
width: 80px;
|
||||
background-color: green;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.second {
|
||||
height: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see two horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox |css-box-justufy-content</title>
|
||||
<link href="ava656094@gmail.com" rel="author" title="xiaoxia">
|
||||
<style>
|
||||
#flexbox {
|
||||
background: green;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
text-align:right;
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
align:right;
|
||||
width:50px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><p>This test passes if the DIV5's position in the end and the div is Horizontal layout</p>
|
||||
<div id="flexbox">
|
||||
<div style="background-color: rgb(242, 210, 80); color: rgb(41, 119, 248);" class="item">DIV1</div>
|
||||
<div style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);" class="item">DIV2</div>
|
||||
<div style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);" class="item">DIV3</div>
|
||||
<div style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);" class="item">DIV4</div>
|
||||
<div style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);" class="item">DIV5</div>
|
||||
</div></body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:info@ogaoga.org" rel="author" title="Tsutomu ogaoga Ogasawara">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
color: white;
|
||||
width: 9em;
|
||||
}
|
||||
.item {
|
||||
-webkit-writing-mode: vertical-rl;
|
||||
writing-mode: vertical-rl;
|
||||
background: green;
|
||||
height: 4em;
|
||||
width: 1.5em;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p>
|
||||
<div class="container">
|
||||
<div class="item">１２３</div>
|
||||
<div class="item">ａｂｃ</div>
|
||||
<div class="item">４５６</div>
|
||||
<div class="item">ｄｅｆ</div>
|
||||
<div class="item">７８９</div>
|
||||
<div class="item">ｇｈｉ</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flexbox Test: Items stretch correctly while content is animating</title>
|
||||
<link href="mailto:micky2be@gmail.com" rel="author" title="Micky Brunetti">
|
||||
<style>
|
||||
@keyframes resize {
|
||||
0% {height: 100px;}
|
||||
100% {height: 50px;}
|
||||
}
|
||||
.test {
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
background-color: green;
|
||||
animation: resize 500ms infinite alternate;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you keep seeing a green rectangle and no red.</p>
|
||||
<div class="test"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:agektmr+github@gmail.com" rel="author" title="Eiji Kitamura">
|
||||
<style type="text/css">
|
||||
|
||||
/* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
border: 2px dotted black;
|
||||
}
|
||||
img {
|
||||
width: 98px;
|
||||
height: 48px;
|
||||
background: purple;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>3 square images fill out border.</p>
|
||||
|
||||
<!-- PAGE CONTENT -->
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png">
|
||||
<img src="support/solidblue.png">
|
||||
<img src="support/solidblue.png">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:info@ogaoga.org" rel="author" title="Tsutomu ogaoga Ogasawara">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
writing-mode: vertical-rl;
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p>
|
||||
|
||||
<div class="container">
|
||||
<div class="item">１２３<br>ａｂｃ</div>
|
||||
<div class="item">４５６<br>ｄｅｆ</div>
|
||||
<div class="item">７８９<br>ｇｈｉ</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:info@ogaoga.org" rel="author" title="Tsutomu ogaoga Ogasawara">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
writing-mode: vertical-rl;
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>The test passes if you see a tall green box with pairs of the digits 1-9 listed top to bottom in two columns.</p>
|
||||
|
||||
<div class="container">
|
||||
<div class="item">１２３<br>１２３</div>
|
||||
<div class="item">４５６<br>４５６</div>
|
||||
<div class="item">７８９<br>７８９</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link href="mailto:zhangcs_423@163.com" rel="author" title="Chunsheng Zhang">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
#a {
|
||||
top: 150px;
|
||||
left: 230px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#b {
|
||||
top: 150px;
|
||||
left: 283px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#c {
|
||||
top: 150px;
|
||||
left: 336px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items center</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
</section>
|
||||
<div style="position:absolute" id="a"></div>
|
||||
<div style="position:absolute" id="b"></div>
|
||||
<div style="position:absolute" id="c"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>flexible box flex item float effect</title>
|
||||
<link href="mailto:liz@oupeng.com" rel="author" title="zhouli">
|
||||
<style>
|
||||
#myDiv{
|
||||
position: relative;
|
||||
}
|
||||
#myDiv p{
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
#first-p{
|
||||
background-color: green;
|
||||
}
|
||||
#second-p{
|
||||
background-color: blue;
|
||||
}
|
||||
#myDiv #fail-flag{
|
||||
width: 600px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>'float' have no effect on a flex item.</p>
|
||||
<p>The test passes if there is a green square, a blue square and no red square.</p>
|
||||
<div id="myDiv">
|
||||
<p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p>
|
||||
</div>
|
||||
<script>
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flexbox Test: flex-wrap: wrap</title>
|
||||
<link href="mailto:tokuda109@gmail.com" rel="author" title="Tsuyoshi Tokuda">
|
||||
<style type="text/css">
|
||||
|
||||
.box {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
width: 200px;
|
||||
}
|
||||
.item {
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be a green block with no red.</p>
|
||||
|
||||
<ul class="box">
|
||||
<li class="item">width: 120px</li>
|
||||
<li class="item">width: 120px</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
|
||||
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu">
|
||||
<style>
|
||||
.flex-container{
|
||||
display:block;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
line-height: 0px;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px 20px;
|
||||
background: #eee;
|
||||
}
|
||||
.flex-item.first{
|
||||
margin-left:20px;
|
||||
}
|
||||
.flex-item.last{
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-container">
|
||||
<div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu">
|
||||
<style>
|
||||
.flex-container{
|
||||
display: flex;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px;
|
||||
background: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.flex-container.flex-direction-row{
|
||||
flex-direction : row;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-row-reverse{
|
||||
flex-direction : row-reverse;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column{
|
||||
flex-direction : column;
|
||||
}
|
||||
.flex-container.flex-direction-column-reverse{
|
||||
flex-direction : column-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>flex-direction:row</h1>
|
||||
<div class="flex-container flex-direction-row" id="flex_container"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu">
|
||||
<style>
|
||||
.flex-container{
|
||||
display:block;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
line-height: 0px;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px 20px;
|
||||
background: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-row{
|
||||
flex-direction : row;
|
||||
}
|
||||
.flex-container.flex-direction-row-reverse{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column-reverse .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>flex-direction:row</h1>
|
||||
<div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">new</div></div>
|
||||
|
||||
<h1>flex-direction:row-reverse</h1>
|
||||
<div class="flex-container flex-direction-row-reverse"><div class="flex-item">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div>
|
||||
|
||||
<h1>flex-direction:column</h1>
|
||||
<div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item last">new</div></div>
|
||||
|
||||
<h1>flex-direction:column-reverse</h1>
|
||||
<div class="flex-container flex-direction-column-reverse"><div class="flex-item first">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu">
|
||||
<style>
|
||||
.flex-container{
|
||||
display:block;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
line-height: 0px;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px 20px;
|
||||
background: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-row{
|
||||
flex-direction : row;
|
||||
}
|
||||
.flex-container.flex-direction-row-reverse{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column-reverse .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>flex-direction:row</h1>
|
||||
<div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
<h1>flex-direction:row-reverse</h1>
|
||||
<div class="flex-container flex-direction-row-reverse"><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div>
|
||||
|
||||
<h1>flex-direction:column</h1>
|
||||
<div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item last">3</div></div>
|
||||
|
||||
<h1>flex-direction:column-reverse</h1>
|
||||
<div class="flex-container flex-direction-column-reverse"><div class="flex-item first">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: childNodes' 'margin' property of flex item'</title>
|
||||
<link href="mailto:csf178@gmail.com" rel="author" title="Shaofei Cheng">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
display: block;
|
||||
height:300px;
|
||||
position:relative;
|
||||
}
|
||||
#test>div.flex {
|
||||
width: 100px;
|
||||
background:red;
|
||||
}
|
||||
#test>div.fixed
|
||||
{
|
||||
height: 300px;
|
||||
flex:1;
|
||||
background:red;
|
||||
}
|
||||
#test p
|
||||
{
|
||||
margin:200px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<div class="fixed">
|
||||
<p style="width:100px;height:100px;background:orange;position:absolute;left:0px;bottom:0px;">
|
||||
a
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p style="width:100px;height:100px;background:green;position:absolute;right:0px;bottom:0px;">
|
||||
b
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: childNodes' 'margin' property of flex item'</title>
|
||||
<link href="mailto:csf178@gmail.com" rel="author" title="Shaofei Cheng">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
position:relative;
|
||||
height:300px;
|
||||
width:101px;
|
||||
}
|
||||
p
|
||||
{
|
||||
position:absolute;
|
||||
margin:0 0 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<div id="test">
|
||||
<p style="background:green;top:0px;height:300px;left:0px;height:300px;width:50px;">damer</p>
|
||||
<p style="top:0px;left:50px;height:300px;background:Red;width:51px;">damer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Flexbox Test Reference File</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green rectangle whose width is greater than height
|
||||
and the number within rectangle is '1 2 3 4' from left to right.</p>
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Flexbox Test Reference File</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.float {
|
||||
margin-left: 50px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4'
|
||||
from left to right, top to bottom.</p>
|
||||
<div>1</div>
|
||||
<div class="float">2</div>
|
||||
<div>3</div>
|
||||
<div class="float">4</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Flexbox Test Reference File</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.</p>
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Hanrui Gao" href="mailto:hanrui.gao@gmail.com">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
width: 240px;
|
||||
height: 60px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
#container > div {
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
#child_1 {
|
||||
width: 30px;
|
||||
background-color: green;
|
||||
}
|
||||
#child_2 {
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
#child_3 {
|
||||
width: 130px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="child_1"></div>
|
||||
<div id="child_2"></div>
|
||||
<div id="child_3"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link href="mailto:zhangcs_423@163.com" rel="author" title="Chunsheng Zhang">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
div {
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
#flex {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
flex: 2 0 auto;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 160px;
|
||||
width: 254px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items flexibility</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
<div></div>
|
||||
<div id="flex"></div>
|
||||
<div></div>
|
||||
</section>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flexible Box Reference File</title>
|
||||
<link href="mailto:phuangce@gmail.com" rel="author" title="Ping Huang">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 10px;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#box1 {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
#box2 {
|
||||
margin: 100px 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green boxes and no red.</p>
|
||||
<div id="container">
|
||||
<div class="box" id="box1"></div>
|
||||
<div class="box" id="box2"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference: flex order</title>
|
||||
<link href="mailto:mitsuteru.s@gmail.com" rel="author" title="Mitsuteru Sawa">
|
||||
<style>
|
||||
#container { display: -webkit-flex; }
|
||||
#highOrdinal {
|
||||
background: lime;
|
||||
height: 100px; width: 100px;
|
||||
}
|
||||
#middleOrdinal {
|
||||
background: orange;
|
||||
height: 100px; width: 100px;
|
||||
}
|
||||
#lowOrdinal {
|
||||
background: red;
|
||||
height: 100px; width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="highOrdinal"></div>
|
||||
<div id="middleOrdinal"></div>
|
||||
<div id="lowOrdinal"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: 'display' property set to 'flex'</title>
|
||||
<link href="mailto:zhaohua.design@163.com" rel="author" title="Hua Zhao">
|
||||
|
||||
<style type="text/css">
|
||||
input{
|
||||
margin:0;
|
||||
padding:0;
|
||||
vertical-align:top;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<input type="text" value="input1">
|
||||
<input type="radio">
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.tealBlock {
|
||||
background: teal;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
<div class="tealBlock"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<!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">
|
||||
<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>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 160px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 120px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 80px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 60px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-top: 160px"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-top: 60px"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c" style="margin-top: 60px"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 40px"></div>
|
||||
<div class="b" style="margin-top: 80px"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 20px"></div>
|
||||
<div class="b" style="margin-top: 40px"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c" style="margin-top: 40px"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<!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">
|
||||
<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>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 160px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 120px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 80px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 60px"></div>
|
||||
<div class="b"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
<div class="b" style="margin-left: 60px"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c" style="margin-left: 60px"></div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 40px"></div>
|
||||
<div class="b" style="margin-left: 80px"><div class="fixedSizeChild"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 20px"></div>
|
||||
<div class="b" style="margin-left: 40px"><div class="fixedSizeChild"></div></div>
|
||||
<div class="c" style="margin-left: 40px"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self.
|
||||
|
||||
NOTE: For multi-line 'display: block' elements in the testcase (and inline
|
||||
content that gets wrapped in an anonymous block), we add an inline-table
|
||||
wrapper here in the reference case, so that we get first-line baseline
|
||||
alignment instead of the last-line baseline-alignment that an inline-block
|
||||
would give us.
|
||||
--><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
display: block;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
}
|
||||
|
||||
div { display: inline-block; }
|
||||
table { display: inline-table; }
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font: 24px sans-serif;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.super {
|
||||
vertical-align: super;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sub {
|
||||
vertical-align: sub;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
.aqua { background: aqua; }
|
||||
.tan { background: tan; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="lime">blk_1line</div><table cellspacing="0" cellpadding="0" class="yellow">blk<br>2lines</table><div class="orange"><span class="super">super</span></div><div class="pink"><span class="sub">sub</span></div><table cellspacing="0" cellpadding="0" class="aqua big">big<br>text<br>3lines</table><table class="tan" cellspacing="0" cellpadding="0">
|
||||
<i>ital<br>ic</i>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!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">
|
||||
<style>
|
||||
.flexbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
margin: 5px; /* just for visual separation */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ZEROTH ROW: NO MARGINS -->
|
||||
<!-- No margins on flex item: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
|
||||
<br style="clear: both">
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: -4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 4px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large (pushing us out of container): -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 25px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
|
||||
<br style="clear: both">
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!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">
|
||||
<style>
|
||||
.flexbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
margin: 5px; /* just for visual separation */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ZEROTH ROW: NO MARGINS -->
|
||||
<!-- No margins on flex item: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
|
||||
<br style="clear: both">
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large (pushing us out of container): -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 18px">a</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
|
||||
<br style="clear: both">
|
||||
|
||||
<!-- auto: -->
|
||||
<div class="flexbox">
|
||||
<div>a</div>
|
||||
</div>
|
||||
|
||||
<!-- Negative: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 22px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Small: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: 14px">a</div>
|
||||
</div>
|
||||
|
||||
<!-- Large: -->
|
||||
<div class="flexbox">
|
||||
<div style="margin-top: -7px">a</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self, in a multi-line flex container.
|
||||
|
||||
This reference case just consists of three single-line flex containers,
|
||||
to match the testcase's one flex container with three flex lines.
|
||||
--><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
width: 28px;
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.big { font: 24px sans-serif; }
|
||||
.medium { font: 14px sans-serif; }
|
||||
.small { font: 8px sans-serif; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<!-- First flex line: Just 3 different sizes of text -->
|
||||
<div class="big">a</div>
|
||||
<div class="small">b</div>
|
||||
<div class="medium">c</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- Second flex line: different margin/padding amounts on each item,
|
||||
and one non-baseline-aligned item.-->
|
||||
<div class="medium" style="padding-top: 10px">d</div>
|
||||
<div class="medium" style="margin-bottom: 8px">e</div>
|
||||
<div class="medium" style="align-self: stretch">f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- Third flex line: other margin/padding amounts on each item -->
|
||||
<div class="small" style="margin-top: 20px">g</div>
|
||||
<div class="big">h</div>
|
||||
<div class="medium" style="padding-bottom: 6px">i</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self, in a multi-line flex container.
|
||||
|
||||
This reference case just consists of three single-line flex containers,
|
||||
to match the testcase's one flex container with three flex lines.
|
||||
--><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
width: 28px;
|
||||
background: yellow;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.big { font: 24px sans-serif; }
|
||||
.medium { font: 14px sans-serif; }
|
||||
.small { font: 8px sans-serif; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Note: The lines are reversed here with respect to the testcase,
|
||||
due to the testcase's "wrap-reverse". -->
|
||||
<div class="flexbox">
|
||||
<!-- Third flex line: other margin/padding amounts on each item -->
|
||||
<div class="small" style="margin-top: 20px">g</div>
|
||||
<div class="big">h</div>
|
||||
<div class="medium" style="padding-bottom: 6px">i</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- Second flex line: different margin/padding amounts on each item,
|
||||
and one non-baseline-aligned item.-->
|
||||
<div class="medium" style="padding-top: 10px">d</div>
|
||||
<div class="medium" style="margin-bottom: 8px">e</div>
|
||||
<div class="medium" style="align-self: stretch">f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<!-- First flex line: Just 3 different sizes of text -->
|
||||
<div class="big">a</div>
|
||||
<div class="small">b</div>
|
||||
<div class="medium">c</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using margin-top in place of the align-items /
|
||||
align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
width: 560px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="margin-top: 190px">end</div>
|
||||
<div class="flex-end big" style="margin-top: 100px">a b c d e f</div>
|
||||
<div class="center" style="margin-top: 95px">center</div>
|
||||
<div class="center big" style="margin-top: 50px">a b c d e f</div>
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div style="width: 80px">
|
||||
<div class="baseline" style="width: 40px; display: inline-block">base</div><div class="baseline big" style="width: 40px; display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 100%">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto" style="margin-top: 95px">auto</div>
|
||||
<div class="unspecified" style="margin-top: 95px">unspec</div>
|
||||
<div class="initial" style="margin-top: 95px">initial</div>
|
||||
<div class="inherit" style="margin-top: 190px">inherit</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using relative positioning in place of the
|
||||
align-items / align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flexbox > div { float: left }
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.auto, .unspecified, .initial, .inherit {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
position: relative;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="top: 172px">end</div>
|
||||
<div class="flex-end big" style="top: 82px">a b c d e f</div>
|
||||
<div class="center" style="top: 86px">center</div>
|
||||
<div class="center big" style="top: 41px">a b c d e f</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="flexbox">
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div>
|
||||
<div class="baseline" style="display: inline-block">base</div><div class="baseline big" style="display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 182px">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using relative positioning in place of the
|
||||
align-items / align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
padding: 3px;
|
||||
width: 560px;
|
||||
height: 4px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="position: relative; top: -6px">end</div>
|
||||
<div class="flex-end big" style="position: relative; top: -96px">a b c d e f</div>
|
||||
<div class="center" style="position: relative; top: -3px">center</div>
|
||||
<div class="center big" style="position: relative; top: -48px">a b c d e f</div>
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div style="width: 80px">
|
||||
<div class="baseline" style="width: 40px; display: inline-block">base</div><div class="baseline big" style="width: 40px; display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 100%">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="auto" style="height: 100%">auto</div>
|
||||
<div class="unspecified" style="height: 100%">unspec</div>
|
||||
<div class="initial" style="height: 100%">initial</div>
|
||||
<div class="inherit" style="height: 100%">inherit</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior, using floated divs
|
||||
in place of flex items and using relative positioning in place of the
|
||||
align-items / align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
padding: 3px;
|
||||
height: 4px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
font-family: sans-serif;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 120px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flexbox > div { float: left }
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.auto, .unspecified, .initial, .inherit {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
position: relative;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 100px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end" style="top: -24px">end</div>
|
||||
<div class="flex-end big" style="top: -114px">a b c d e f</div>
|
||||
<div class="center" style="top: -12px">center</div>
|
||||
<div class="center big" style="top: -57px">a b c d e f</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="flexbox">
|
||||
<!-- We use inline-blocks inside of a wrapper-block as references for the
|
||||
baseline-aligned flex items, since inline-blocks get
|
||||
baseline-aligned in block layout. We also need to specify the widths
|
||||
manually here since the "flexbox > div" child-selector doesn't
|
||||
handle these guys (since they're grandchildren).
|
||||
-->
|
||||
<div>
|
||||
<div class="baseline" style="display: inline-block">base</div><div class="baseline big" style="display: inline-block">abc</div>
|
||||
</div>
|
||||
<div class="stretch" style="height: 2px">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior with auto
|
||||
margins in play. This reference case uses fixed margin-top values
|
||||
in place of the testcase's auto margins. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 140px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kidsAutoTop > div { margin-top: 130px; }
|
||||
.kidsAutoTop > div.big { margin-top: 60px; }
|
||||
.kidsAutoBoth > div { margin-top: 65px; }
|
||||
.kidsAutoBoth > div.big { margin-top: 30px; }
|
||||
|
||||
.flexbox > div {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.flexbox > div.big {
|
||||
height: 80px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox kidsAutoTop">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox kidsAutoBottom">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox kidsAutoBoth">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">a b c d e f</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- In this reference case, we just have the testcases's text placed directly
|
||||
in the outermost wrapper-block, with a lime background on that wrapper
|
||||
instead of on a flex item.
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.fixedWidthWrapper {
|
||||
width: 200px;
|
||||
/* Small enough that 3 characters can _easily_ fit in our width */
|
||||
font-size: 12px;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixedWidthWrapper">
|
||||
A B C
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- In this reference case, we use floated fixed-sized divs to mimic the
|
||||
testcases's flex items.
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div.container {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
div.item {
|
||||
width: 48px;
|
||||
height: 15px;
|
||||
float: left;
|
||||
border: 1px dotted blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></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/
|
||||
--><!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
margin: auto;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
width: 100%;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
margin: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
margin: auto;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
margin: auto;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
float: right;
|
||||
}
|
||||
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.centerParent > * {
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="auto">auto</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="unspecified">unspec</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="initial">initial</div>
|
||||
</div>
|
||||
<div class="inherit">inherit</div>
|
||||
<!-- Since that last div is floated right, the container doesn't include
|
||||
its height by default. So we add some invisible hacky text (of the
|
||||
same font) to make sure our container is tall enough. -->
|
||||
<span style="visibility:hidden">hacky text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-left: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="centerParent clearFloats">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch clearFloats">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
float: left;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: left;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: right;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-left: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: left;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
margin: auto;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
width: 100%;
|
||||
}
|
||||
.auto {
|
||||
background: yellow;
|
||||
margin: auto;
|
||||
}
|
||||
.unspecified {
|
||||
background: lightgreen;
|
||||
margin: auto;
|
||||
}
|
||||
.initial {
|
||||
background: aqua;
|
||||
margin: auto;
|
||||
}
|
||||
.inherit {
|
||||
background: violet;
|
||||
float: left;
|
||||
}
|
||||
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.centerParent > * {
|
||||
display: inline-block;
|
||||
text-align: left; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
<div class="centerParent">
|
||||
<div class="auto">auto</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="unspecified">unspec</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="initial">initial</div>
|
||||
</div>
|
||||
<div class="inherit">inherit</div>
|
||||
<!-- Since that last div is floated right, the container doesn't include
|
||||
its height by default. So we add some invisible hacky text (of the
|
||||
same font) to make sure our container is tall enough. -->
|
||||
<span style="visibility:hidden">hacky text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
float: left;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
font-family: sans-serif;
|
||||
direction: rtl;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-right: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
<div class="centerParent clearFloats">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch clearFloats">stretch</div>
|
||||
<div class="stretch big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for align-items / align-self behavior in a vertical
|
||||
"direction: rtl" flex container, using blocks in place of flex items and
|
||||
using float and width keywords to emulate the align-items / align-self
|
||||
properties. --><html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 4px;
|
||||
float: left;
|
||||
direction: rtl;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 18px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. For this to work, the parent has to be at
|
||||
least as wide as the centered content inside of it, so we make it
|
||||
large with a negative margin such that its center aligns with the
|
||||
4px-wide container's center. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin-right: -48px;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b</div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
a ab bx x
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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
|
||||
unaligned children taken out of baseline-alignment with
|
||||
"vertical-align:top".
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
vertical-align: top;
|
||||
}
|
||||
.hugeAndUnaligned {
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.flexContainer > * { display: inline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">b</div><div>c</div><div class="hugeAndUnaligned">d</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">e</div><div>f</div><div class="smallFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">h</div><div class="smallFont">i</div><div>j</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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
|
||||
unaligned children taken out of baseline-alignment with
|
||||
"vertical-align:top".
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<link href="support/ahem.css" type="text/css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
}
|
||||
.hugeAndUnaligned {
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
/* Baseline is 0.8em = 8px from top */
|
||||
}
|
||||
* { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: inline-block; margin-top: 12px">a</div>
|
||||
<div style="margin-top: 20px" class="flexContainer">
|
||||
<div class="smallFont">b</div><div>c</div><div class="hugeAndUnaligned">d</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">e</div><div>f</div><div class="smallFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="hugeAndUnaligned">h</div><div class="smallFont">i</div><div>j</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- In this reference case, we have inline-blocks instead of inline
|
||||
flex containers. We stick an Ahem whitespace character in each
|
||||
inline-block, with a customized line-height to make the baseline
|
||||
end up at the bottom of the inline-block's content-box. --><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<link href="support/ahem.css" type="text/css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font: 20px Ahem;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
/* Each inline-block's baseline will be the baseline of the single Ahem
|
||||
character that it contains. We want to set up that char such that its
|
||||
baseline is at the bottom of the container's content box (since that's
|
||||
the corresponding flex container's baseline). So, we use a line-height
|
||||
of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the
|
||||
bottom of the container's content-box -- awesome. */
|
||||
line-height: 20px;
|
||||
background: purple;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<!-- We have to include a character in the inline-blocks in order for them
|
||||
to baseline-align; otherwise, they align the bottom of their
|
||||
border-boxes. -->
|
||||
<div class="flexContainer"> </div>
|
||||
<div style="padding-bottom: 20px" class="flexContainer"> </div>
|
||||
<div style="padding: 10px" class="flexContainer"> </div>
|
||||
<div style="border-width: 3px" class="flexContainer"> </div>
|
||||
<div style="border-bottom-width: 4px" class="flexContainer"> </div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * { display: inline; }
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.unaligned { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div class="flexContainer smallFont">
|
||||
<div class="smallFont">b</div><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">d</div><div class="smallFont unaligned">e</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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
|
||||
inline-blocks manually positioned with "vertical-align:top" and
|
||||
margin-top.
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<link href="support/ahem.css" type="text/css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font: 20px Ahem;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
background: lightblue;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
/* Baseline is 0.8em = 8px from top */
|
||||
}
|
||||
.bigFont {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
/* Baseline is 0.8em = 16px from top */
|
||||
}
|
||||
* { vertical-align: top }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<div style="margin-top: 8px" class="flexContainer">
|
||||
<div class="smallFont">b</div><div class="bigFont">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">d</div><div class="smallFont">e</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
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,64 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
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: 20px;
|
||||
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,84 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* We use an outer vertical flex container, wrapping two single-line
|
||||
flex containers, to match the testcase's multi-line flex container. */
|
||||
.outerFlexContainer {
|
||||
height: 100px;
|
||||
background: lightgray;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* to mimic testcase's "align-content:center" */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.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 container with second item in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div>
|
||||
<div style="align-self: baseline" class="bigFont">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">d</div>
|
||||
<div class="smallFont">e</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with both items in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div style="align-self: baseline" class="smallFont">f</div>
|
||||
<div style="align-self: baseline" class="medFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with all items baseline-aligned
|
||||
(only those on first line should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div style="align-items: baseline" class="flexContainer">
|
||||
<div class="bigFont">j</div>
|
||||
<div style="padding-bottom: 20px" class="smallFont">k</div>
|
||||
</div>
|
||||
<div style="align-items: baseline" class="flexContainer">
|
||||
<div class="smallFont">l</div>
|
||||
<div class="medFont">m</div>
|
||||
</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* We use an outer vertical flex container, wrapping two single-line
|
||||
flex containers, to match the testcase's multi-line flex container. */
|
||||
.outerFlexContainer {
|
||||
height: 100px;
|
||||
background: lightgray;
|
||||
display: inline-flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center; /* to mimic testcase's "align-content:center" */
|
||||
}
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.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 container with second item in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">b</div>
|
||||
<div style="align-self: baseline" class="bigFont">c</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="medFont">d</div>
|
||||
<div class="smallFont">e</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with both items in first line baseline-aligned
|
||||
(should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div class="flexContainer">
|
||||
<div style="align-self: baseline" class="smallFont">f</div>
|
||||
<div style="align-self: baseline" class="medFont">g</div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="bigFont">h</div>
|
||||
<div class="smallFont">i</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex container with all items baseline-aligned
|
||||
(only those on first line should set the container's baseline) -->
|
||||
<div class="outerFlexContainer">
|
||||
<div style="align-items: baseline" class="flexContainer">
|
||||
<div class="bigFont">j</div>
|
||||
<div style="padding-bottom: 20px" class="smallFont">k</div>
|
||||
</div>
|
||||
<div style="align-items: baseline" class="flexContainer">
|
||||
<div class="smallFont">l</div>
|
||||
<div class="medFont">m</div>
|
||||
</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!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
|
||||
"float: left".
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
height: 20px;
|
||||
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 { float: left }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div><br><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div><br><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><br><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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
|
||||
"float: left".
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
/* Split testcase's 40px width into 20px of padding-left and 20px of
|
||||
width, to set aside space for the testcase's (invisible) second line
|
||||
(which is to the left of the first line, since this is wrap-reverse)
|
||||
*/
|
||||
width: 20px;
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.flexContainer > * {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
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 { float: left }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
a
|
||||
<!-- Flex containers with flex items that have a mix of baselines: -->
|
||||
<div class="flexContainer medFont">
|
||||
<div class="medFont">b</div><br><div class="bigFont unaligned">c</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer bigFont">
|
||||
<div class="bigFont">f</div><br><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><br><div class="bigFont unaligned">k</div>
|
||||
</div>
|
||||
n
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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. --><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: purple;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
A
|
||||
<div class="flexContainer">a</div>
|
||||
<div style="padding-bottom: 20px" class="flexContainer">a</div>
|
||||
<div style="padding: 10px" class="flexContainer">a</div>
|
||||
<div style="border-width: 3px" class="flexContainer">a</div>
|
||||
<div style="border-bottom-width: 4px" class="flexContainer">a</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!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">
|
||||
<style>
|
||||
div { height: 100px; }
|
||||
div.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
}
|
||||
div.a {
|
||||
display: inline-block;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
display: inline-block;
|
||||
background: yellow;
|
||||
}
|
||||
div.c {
|
||||
display: inline-block;
|
||||
background: orange;
|
||||
}
|
||||
div.auto {
|
||||
display: inline-block;
|
||||
background: pink;
|
||||
}
|
||||
div.inflex {
|
||||
display: inline-block;
|
||||
background: gray;
|
||||
}
|
||||
div.spacer {
|
||||
height: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 80px"></div><div class="b" style="width: 120px"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 62.5px"></div><div class="c" style="width: 137.5px"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 185px"></div><div class="auto">
|
||||
<div class="spacer" style="width: 15px"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="width: 76px"></div><div class="c" style="width: 124px"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="width: 170px"></div><div class="auto">
|
||||
<div class="spacer" style="width: 30px"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="width: 45px"></div><div class="b" style="width: 50px"></div><div class="inflex" style="width: 20px"></div><div class="c" style="width: 85px"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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">
|
||||
<style>
|
||||
div { width: 50px; }
|
||||
div.flexbox {
|
||||
border: 1px dashed blue;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
background: yellow;
|
||||
}
|
||||
div.c {
|
||||
background: orange;
|
||||
}
|
||||
div.auto {
|
||||
background: pink;
|
||||
}
|
||||
div.inflex {
|
||||
background: gray;
|
||||
}
|
||||
div.spacer {
|
||||
width: 15px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 80px"></div><div class="b" style="height: 120px"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 62.5px"></div><div class="c" style="height: 137.5px"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 185px"></div><div class="auto">
|
||||
<div class="spacer" style="height: 15px"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="height: 76px"></div><div class="c" style="height: 124px"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="height: 170px"></div><div class="auto">
|
||||
<div class="spacer" style="height: 30px"></div></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="height: 45px"></div><div class="b" style="height: 50px"></div><div class="inflex" style="height: 20px"></div><div class="c" style="height: 85px"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
canvas {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 22px">
|
||||
some words
|
||||
<canvas style="float:right"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 122.5px"></canvas><canvas style="width: 73.5px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 93px"></canvas><canvas style="width: 103px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 114px"></canvas><canvas style="width: 82px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 106px"></canvas><canvas style="width: 90px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="width: 46px"></canvas><canvas style="width: 150px"></canvas>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
width: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
background: lightgreen;
|
||||
line-height: 0;
|
||||
}
|
||||
canvas {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="font: 8px monospace; height: 188px">
|
||||
a b
|
||||
</div>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 122.5px"></canvas><canvas style="height: 73.5px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 93px"></canvas><canvas style="height: 103px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 114px"></canvas><canvas style="height: 82px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 106px"></canvas><canvas style="height: 90px"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<canvas style="height: 46px"></canvas><canvas style="height: 150px"></canvas>
|
||||
</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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
clear: all;
|
||||
height: 22px;
|
||||
}
|
||||
fieldset {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<fieldset></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 22px">
|
||||
some words
|
||||
<fieldset style="float:right"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 122.5px"></fieldset><fieldset style="width: 73.5px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 93px"></fieldset><fieldset style="width: 103px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 114px"></fieldset><fieldset style="width: 82px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 106px"></fieldset><fieldset style="width: 90px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="width: 46px"></fieldset><fieldset style="width: 150px"></fieldset>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
width: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
background: lightgreen;
|
||||
line-height: 0;
|
||||
}
|
||||
fieldset {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 1px dotted green;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<fieldset></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="font: 8px monospace; height: 188px">
|
||||
a b
|
||||
</div>
|
||||
<fieldset></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="height: 122.5px"></fieldset><fieldset style="height: 73.5px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="height: 93px"></fieldset><fieldset style="height: 103px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="height: 114px"></fieldset><fieldset style="height: 82px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="height: 106px"></fieldset><fieldset style="height: 90px"></fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<fieldset style="height: 46px"></fieldset><fieldset style="height: 150px"></fieldset>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
iframe {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<iframe></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 22px">
|
||||
some words
|
||||
<iframe style="float:right"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="width: 122.5px"></iframe><iframe style="width: 73.5px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="width: 93px"></iframe><iframe style="width: 103px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="width: 114px"></iframe><iframe style="width: 82px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="width: 106px"></iframe><iframe style="width: 90px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="width: 46px"></iframe><iframe style="width: 150px"></iframe>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
width: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
background: lightgreen;
|
||||
line-height: 0;
|
||||
}
|
||||
iframe {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<iframe></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="font: 8px monospace; height: 188px">
|
||||
a b
|
||||
</div>
|
||||
<iframe></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="height: 122.5px"></iframe><iframe style="height: 73.5px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="height: 93px"></iframe><iframe style="height: 103px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="height: 114px"></iframe><iframe style="height: 82px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="height: 106px"></iframe><iframe style="height: 90px"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<iframe style="height: 46px"></iframe><iframe style="height: 150px"></iframe>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
img {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png">
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 22px">
|
||||
some words
|
||||
<img src="support/solidblue.png" style="float:right">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="width: 122.5px"><img src="support/solidblue.png" style="width: 73.5px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="width: 93px"><img src="support/solidblue.png" style="width: 103px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="width: 114px"><img src="support/solidblue.png" style="width: 82px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="width: 106px"><img src="support/solidblue.png" style="width: 90px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="width: 46px"><img src="support/solidblue.png" style="width: 150px">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
width: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
background: lightgreen;
|
||||
line-height: 0;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="font: 8px monospace; height: 188px">
|
||||
a b
|
||||
</div>
|
||||
<img src="support/solidblue.png">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="height: 122.5px"><img src="support/solidblue.png" style="height: 73.5px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="height: 93px"><img src="support/solidblue.png" style="height: 103px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="height: 114px"><img src="support/solidblue.png" style="height: 82px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="height: 106px"><img src="support/solidblue.png" style="height: 90px">
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png" style="height: 46px"><img src="support/solidblue.png" style="height: 150px">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
textarea {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 0;
|
||||
border: 1px dotted green;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 24px">
|
||||
some words
|
||||
<textarea style="float:right"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="width: 122.5px"></textarea><textarea style="width: 73.5px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="width: 93px"></textarea><textarea style="width: 103px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="width: 114px"></textarea><textarea style="width: 82px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="width: 106px"></textarea><textarea style="width: 90px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="width: 46px"></textarea><textarea style="width: 150px"></textarea>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
width: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
background: lightgreen;
|
||||
line-height: 0;
|
||||
}
|
||||
textarea {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: white;
|
||||
border-radius: 0;
|
||||
border: 1px dotted green;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="font: 8px monospace; height: 188px">
|
||||
a b
|
||||
</div>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="height: 122.5px"></textarea><textarea style="height: 73.5px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="height: 93px"></textarea><textarea style="height: 103px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="height: 114px"></textarea><textarea style="height: 82px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="height: 106px"></textarea><textarea style="height: 90px"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<textarea style="height: 46px"></textarea><textarea style="height: 150px"></textarea>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
background: lightgreen;
|
||||
margin-bottom: 5px;
|
||||
line-height: 8px;
|
||||
}
|
||||
video {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<video></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 22px">
|
||||
some words
|
||||
<video style="float:right"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="width: 122.5px"></video><video style="width: 73.5px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="width: 93px"></video><video style="width: 103px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="width: 114px"></video><video style="width: 82px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="width: 106px"></video><video style="width: 90px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="width: 46px"></video><video style="width: 150px"></video>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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">
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
width: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
background: lightgreen;
|
||||
line-height: 0;
|
||||
}
|
||||
video {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<video></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="font: 8px monospace; height: 188px">
|
||||
a b
|
||||
</div>
|
||||
<video></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="height: 122.5px"></video><video style="height: 73.5px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="height: 93px"></video><video style="height: 103px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="height: 114px"></video><video style="height: 82px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="height: 106px"></video><video style="height: 90px"></video>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<video style="height: 46px"></video><video style="height: 150px"></video>
|
||||
</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 Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<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 style="float: left" class="item fullCrossSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize"></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 style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<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 style="float: left" class="item fullCrossSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></div>
|
||||
<div style="float: left" class="item fullCrossSize shrunkMainSize"></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 Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<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 style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
<div style="float: left" class="item halfCrossSize"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<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,61 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- In this reference case, we get each container to be sized the same as
|
||||
in the testcase, without any visible baseline alignemnt, by using some
|
||||
hidden flex items.
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
background: yellow;
|
||||
border: 1px dotted black;
|
||||
margin: 5px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.hiddenItemForSizing {
|
||||
width: 0;
|
||||
min-width: 0; /* disable default min-width:auto behavior */
|
||||
color: transparent;
|
||||
align-self: baseline;
|
||||
}
|
||||
.largeFont {
|
||||
font-size: 20px;
|
||||
background: lightblue;
|
||||
/* Our flex items get padding on opposite sides (top/bottom) so that they
|
||||
produce a large combined height when baseline-aligned: */
|
||||
padding-top: 5px;
|
||||
}
|
||||
.smallFont {
|
||||
font-size: 10px;
|
||||
background: pink;
|
||||
/* Our flex items get padding on opposite sides (top/bottom) so that they
|
||||
produce a large combined height when baseline-aligned: */
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer">
|
||||
<div class="largeFont">a</div>
|
||||
<!-- Hidden flex items used to determine container's cross size,
|
||||
based on their baseline-aligned combined cross size: -->
|
||||
<div class="largeFont hiddenItemForSizing">a</div>
|
||||
<div class="smallFont hiddenItemForSizing">b</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainer">
|
||||
<div class="smallFont">b</div>
|
||||
<!-- Hidden flex items used to determine container's cross size,
|
||||
based on their baseline-aligned combined cross size: -->
|
||||
<div class="largeFont hiddenItemForSizing">a</div>
|
||||
<div class="smallFont hiddenItemForSizing">b</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- In this reference case, we have blocks in place of the testcase's
|
||||
flex containers. The testcase's collapsed flex items are entirely
|
||||
absent here (and the remaining content is sized using exact pixel
|
||||
values).
|
||||
--><html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
background: yellow;
|
||||
border: 1px dotted black;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
}
|
||||
.flexContainer > * {
|
||||
/* All flex items have 20px base size */
|
||||
width: 20px;
|
||||
}
|
||||
.collapse {
|
||||
flex-basis: 0;
|
||||
height: 20px;
|
||||
}
|
||||
.flexible {
|
||||
flex: 1 auto;
|
||||
}
|
||||
.heightTall {
|
||||
height: 40px;
|
||||
background: purple;
|
||||
}
|
||||
.heightAuto {
|
||||
background: teal;
|
||||
}
|
||||
.heightShort {
|
||||
height: 10px;
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIRST ROW: -->
|
||||
<!-- Just one (collapsed) flex item, which ends up establishing
|
||||
the container's size (even though it's collapsed): -->
|
||||
<div class="flexContainer">
|
||||
<div class="heightTall collapse"></div>
|
||||
</div>
|
||||
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- SECOND ROW: -->
|
||||
<!-- One collapsed flex item, one short flex item.
|
||||
(Container ends up with collapsed item's height) -->
|
||||
<div class="flexContainer">
|
||||
<div class="heightTall collapse"></div>
|
||||
<div class="heightShort"></div>
|
||||
</div>
|
||||
<!-- (same, but with items in opposite order) -->
|
||||
<div class="flexContainer">
|
||||
<div class="heightShort"></div>
|
||||
<div class="heightTall collapse"></div>
|
||||
</div>
|
||||
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- THIRD ROW: -->
|
||||
<!-- One collapsed flex item, one stretched flex item.
|
||||
(Container and stretched item end up with collapsed item's height) -->
|
||||
<div class="flexContainer">
|
||||
<div class="heightTall collapse"></div>
|
||||
<div class="heightAuto"></div>
|
||||
</div>
|
||||
<!-- (again, with items in opposite order) -->
|
||||
<div class="flexContainer">
|
||||
<div class="heightAuto"></div>
|
||||
<div class="heightTall collapse"></div>
|
||||
</div>
|
||||
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- FOURTH ROW: -->
|
||||
<!-- One collapsed flex item, one other flex item; both are flexible.
|
||||
(The non-collapsed one should take all of the available width.) -->
|
||||
<div class="flexContainer">
|
||||
<div class="heightAuto collapse"></div>
|
||||
<div class="heightTall flexible"></div>
|
||||
</div>
|
||||
<!-- (again, with items in opposite order) -->
|
||||
<div class="flexContainer">
|
||||
<div class="heightTall flexible"></div>
|
||||
<div class="heightAuto collapse"></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 Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
/* These let us show where each flex line begins (and hence, how tall
|
||||
the flex lines end up) */
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
width: 30px;
|
||||
background: yellow;
|
||||
border: 1px dotted black;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
}
|
||||
.collapsedItem {
|
||||
width: 0;
|
||||
height: 25px;
|
||||
}
|
||||
.halfWidthItem {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: teal;
|
||||
}
|
||||
.fullWidthItem {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background: purple;
|
||||
}
|
||||
.veryTallItem {
|
||||
width: 15px;
|
||||
height: 40px;
|
||||
background: olive;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIRST ROW: -->
|
||||
<!-- One collapsed flex item, at the beginning of a flex line, which
|
||||
ends up establishing its flex line's cross size: -->
|
||||
<div class="flexContainer">
|
||||
<div class="collapsedItem"></div>
|
||||
<div class="halfWidthItem"></div>
|
||||
<div class="fullWidthItem"></div>
|
||||
</div>
|
||||
<!-- ...and now with it being at the end of that flex line: -->
|
||||
<div class="flexContainer">
|
||||
<div class="halfWidthItem"></div>
|
||||
<div class="collapsedItem"></div>
|
||||
<div class="fullWidthItem"></div>
|
||||
</div>
|
||||
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- SECOND ROW: -->
|
||||
<!-- One collapsed flex item, initially in its own line. It ends
|
||||
up being merged into another line after it collapses, due to its
|
||||
(post-collapse) zero main-size. -->
|
||||
<div class="flexContainer">
|
||||
<div class="collapsedItem"></div>
|
||||
<div class="fullWidthItem"></div>
|
||||
<div class="fullWidthItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="fullWidthItem"></div>
|
||||
<div class="collapsedItem"></div>
|
||||
<div class="fullWidthItem"></div>
|
||||
</div>
|
||||
<div class="flexContainer">
|
||||
<div class="fullWidthItem"></div>
|
||||
<div class="fullWidthItem"></div>
|
||||
<div class="collapsedItem"></div>
|
||||
</div>
|
||||
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<!-- THIRD ROW: -->
|
||||
<!-- One collapsed flex item, initially in a line with an even-taller item.
|
||||
The collapsed item ends up shifting into another line after it
|
||||
collapses, but it carries the taller item's cross size with it, as its
|
||||
strut size. -->
|
||||
<div class="flexContainer">
|
||||
<div class="fullWidthItem"></div>
|
||||
<div style="height: 40px" class="collapsedItem"></div>
|
||||
<div class="veryTallItem"></div>
|
||||
</div>
|
||||
<!-- ...and now with two (differently-sized) struts in first line:
|
||||
(the one that's taller - due to being initially grouped with the tall
|
||||
item - wins out.) -->
|
||||
<div class="flexContainer">
|
||||
<div class="collapsedItem"></div>
|
||||
<div class="fullWidthItem"></div>
|
||||
<div style="height: 40px" class="collapsedItem"></div>
|
||||
<div class="veryTallItem"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: stretch; /* Initial value; just here for emphasis */
|
||||
width: 25px;
|
||||
height: 60px;
|
||||
background: yellow;
|
||||
border: 1px dotted black;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
}
|
||||
.collapsedItem {
|
||||
width: 0;
|
||||
height: 40px;
|
||||
}
|
||||
.shortItem {
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
.tallItem {
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
background: olive;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer">
|
||||
<div class="shortItem"></div>
|
||||
<div class="collapsedItem"></div>
|
||||
<div class="tallItem"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference: Flexbox direction and wrapping</title>
|
||||
<link href="mailto:gavin.elster@me.com" rel="author" title="Gavin Elster">
|
||||
<link href="http://fantasai.inkedblade.net/contact" rel="reviewer" title="Elika J. Etemad">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
|
||||
/* Ref test styles */
|
||||
|
||||
.flex-wrapper div{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* Test-series styles */
|
||||
|
||||
.flex-wrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
/* should only display on error */
|
||||
background: red;
|
||||
|
||||
/* Enforce writing mode */
|
||||
direction: ltr;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.flex-wrapper div {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
|
||||
background: green;
|
||||
border: 1px solid limegreen;
|
||||
|
||||
color: white;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p>
|
||||
<div class="flex-wrapper">
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!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 href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.flexContainer {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
font: 10px sans-serif;
|
||||
background: yellow;
|
||||
float: left;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.flexContainer > * {
|
||||
border: 1px dotted gray;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* The single-line flex containers' flex items are shrunk in main axis: */
|
||||
.singleLineHoriz > * {
|
||||
width: 13px;
|
||||
}
|
||||
.singleLineVert > * {
|
||||
height: 13px;
|
||||
float: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- single-line (flex-wrap unspecified): -->
|
||||
<div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div>
|
||||
</div>
|
||||
<div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->
|
||||
<div>4</div><div>3</div><div>2</div><div>1</div>
|
||||
</div>
|
||||
<div class="flexContainer singleLineVert"><!-- flex-flow: column -->
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div>
|
||||
</div>
|
||||
<div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->
|
||||
<div>4</div><div>3</div><div>2</div><div>1</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<!-- now using "wrap", after flex-direction: -->
|
||||
<div class="flexContainer"><!-- flex-flow: row wrap -->
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: row-reverse wrap -->
|
||||
<div>2</div><div>1</div><div>4</div><div>3</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: column wrap -->
|
||||
<div>1</div><div>3</div><div>2</div><div>4</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: column-reverse wrap -->
|
||||
<div>2</div><div>4</div><div>1</div><div>3</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<!-- now using "wrap", before flex-direction: -->
|
||||
<div class="flexContainer"><!-- flex-flow: wrap row -->
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: wrap row-reverse -->
|
||||
<div>2</div><div>1</div><div>4</div><div>3</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: wrap column -->
|
||||
<div>1</div><div>3</div><div>2</div><div>4</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: wrap column-reverse -->
|
||||
<div>2</div><div>4</div><div>1</div><div>3</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<!-- now using "wrap-reverse", after flex-direction: -->
|
||||
<div class="flexContainer"><!-- flex-flow: row wrap-reverse -->
|
||||
<div>3</div><div>4</div><div>1</div><div>2</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->
|
||||
<div>4</div><div>3</div><div>2</div><div>1</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: column wrap-reverse -->
|
||||
<div>3</div><div>1</div><div>4</div><div>2</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->
|
||||
<div>4</div><div>2</div><div>3</div><div>1</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<!-- now using "wrap-reverse", before flex-direction: -->
|
||||
<div class="flexContainer"><!-- flex-flow: wrap-reverse row -->
|
||||
<div>3</div><div>4</div><div>1</div><div>2</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->
|
||||
<div>4</div><div>3</div><div>2</div><div>1</div>
|
||||
</div>
|
||||
<div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->
|
||||
<div>3</div><div>1</div><div>4</div><div>2</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->
|
||||
<div>4</div><div>2</div><div>3</div><div>1</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<!-- now just specifying flex-wrap (no flex-direction) -->
|
||||
<div class="flexContainer"><!-- flex-flow: wrap -->
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div>
|
||||
</div>
|
||||
<div class="flexContainer"><!-- flex-flow: wrap-reverse -->
|
||||
<div>3</div><div>4</div><div>1</div><div>2</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue