mirror of
https://github.com/servo/servo.git
synced 2025-08-08 23:15:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>CSS Test: Change the value of 'order' property</title>
|
||||
|
||||
<meta name="assert" content="The order of three should be blue-red-black" />
|
||||
|
||||
<link rel="match" href="reference/Flexible-order-ref.html">
|
||||
<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" />
|
||||
|
||||
<style>
|
||||
|
||||
.box {
|
||||
margin:0 auto;
|
||||
background:#CCC;
|
||||
border-radius:5px;
|
||||
width:600px;
|
||||
display:flex;
|
||||
flex-flow:row;
|
||||
}
|
||||
|
||||
.box div {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.box .red {
|
||||
order:-2;
|
||||
flex:0 1 auto;
|
||||
width:200px;
|
||||
background:#F00;
|
||||
}
|
||||
.box .blue {
|
||||
order:-4;
|
||||
flex:0 1 auto;
|
||||
width:200px;
|
||||
background:#00F;
|
||||
}
|
||||
.box .black {
|
||||
order:-1;
|
||||
flex:0 1 auto;
|
||||
width:200px;
|
||||
background:#000;
|
||||
color:#FFF;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- FLEX CONTAINER -->
|
||||
<div class="box">
|
||||
<div class="red">A</div>
|
||||
<div class="blue">B</div>
|
||||
<div class="black">C</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
8
tests/wpt/web-platform-tests/css/css-flexbox/OWNERS
Normal file
8
tests/wpt/web-platform-tests/css/css-flexbox/OWNERS
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@kojiishi
|
||||
@plinss
|
||||
@mrego
|
||||
@cbiesinger
|
||||
@chenxix
|
||||
@atanassov
|
||||
@fantasai
|
||||
@tabatkins
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A multi-line flex container with the 'align-content' property set to 'center'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: center' centers lines in the flex container." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, green 0, green 25px, red 25px, red 75px, green 75px, green 100px);
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 26px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A multi-line flex container with the 'align-content' property set to 'flex-start'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: flex-start' packs lines toward the start of the flex container." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, red 0, red 50px, green 50px, green 100px);
|
||||
align-content: flex-start;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 26px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A multi-line flex container with the 'align-content' property set to 'flex-end'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: flex-end' packs lines toward the end of the flex container." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, green 0, green 50px, red 50px, red 100px);
|
||||
align-content: flex-end;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 26px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A multi-line flex container with the 'align-content' property set to 'space-between'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: space-between' distributes lines evenly in the flex container." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: repeating-linear-gradient(to bottom, red 0, red 20px, green 20px, green 40px);
|
||||
align-content: space-between;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 21px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A multi-line flex container with the 'align-content' property set to 'space-around'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: space-around' distributes lines evenly in the flex container, with half-size spaces on either end." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, green 0, green 15px, red 15px, red 35px, green 35px, green 65px, red 65px, red 85px, green 85px, green 100px);
|
||||
align-content: space-around;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 22px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A multi-line flex container with the 'align-content' property set to 'stretch'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that a multi-line flex container with 'align-content: stretch' stretches lines to take up the remaining space." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: red;
|
||||
align-content: center;
|
||||
align-content: stretch;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content_center</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the align-content value center." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br>
|
||||
2. the rectangle 1, 2, 3 appear in middle left of red rectangle.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content_flex-end</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the align-content value flex-end." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br>
|
||||
2. the rectangle 1, 2, 3 appear in bottom left of red rectangle.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content_flex-start</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the align-content value flex-start." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br>
|
||||
2. the rectangle 1, 2, 3 appear in upper left of red rectangle.</p>
|
||||
<div id=log></div>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content_space-around</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify align-content value space-around." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br>
|
||||
2. the rectangle 1, 2, 3 are distributed such that the empty space between any two adjacent rectangle is the same, and the empty space of the column before the first and after the last rectangle are half the size of the other empty spaces.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content_space-between</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the display can recognize inline-flex value." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br>
|
||||
2. No gap between the top of red rectangle and the top of rectangle 1, no gap between the bottom of red rectangle and the bottom of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content_stretch</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the align-content value stretch." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: stretch;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.<br>
|
||||
2. No gap between the top of red rectangle and the top of rectangle 1, and rectangle 1 , 2, 3 are distributed so that the empty space in the column between 1 , 2 , 3 is the same.
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex container with the 'align-items' property set to 'center'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex container with 'align-items: center' centers each flex item's margin box in the cross-axis of its line." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, green 0, green 25px, red 25px, red 75px, green 75px, green 100px);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 52px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex container with the 'align-items' property set to 'flex-start'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex container with 'align-items: flex-start' places each flex item's margin box flush with the cross-start edge of line." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, red 0, red 50px, green 50px, green 100px);
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 51px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex container with the 'align-items' property set to 'flex-end'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex container with 'align-items: flex-end' places each flex item's margin box flush with the cross-end edge of line." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, green 0, green 50px, red 50px, red 100px);
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 51px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex container with the 'align-items' property set to 'baseline'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, green 0, green 16px, red 17px, red 35px, green 36px, green 66px, red 67px, red 85px, green 86px, green 100px);
|
||||
align-items: flex-start;
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
color: green;
|
||||
font: 20px/1em Ahem;
|
||||
width: 75px;
|
||||
}
|
||||
#div3, #div7
|
||||
{
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div id="div1">d1</div>
|
||||
<div id="div2">d2</div>
|
||||
<div id="div3">d3</div>
|
||||
<div id="div4">d4</div>
|
||||
<div id="div5">d5</div>
|
||||
<div id="div6">d6</div>
|
||||
<div id="div7">d7</div>
|
||||
<div id="div8">d8</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex container with the 'align-items' property set to 'stretch'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex container with 'align-items: stretch' places each flex item's margin box so that its cross size is the same as the cross size of the line." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: red;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex container with 'column' direction and 'align-items' property set to 'flex-start'</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="assert" content="This test checks that 'align-items: flex-start' implies the flex item's 'auto' width to be resolved as 'fit-content'." />
|
||||
<style type="text/css">
|
||||
.block {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
#flexbox
|
||||
{
|
||||
font: 50px/1 Ahem;
|
||||
background: green;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div class="block">
|
||||
<div style="width: 200px; height: 50px; background: green"></div>
|
||||
</div>
|
||||
<div id="flexbox">
|
||||
<div style="background: red; color: red">XXXX</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - flex-start</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: flex-start;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
margin-top: -50px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - flex-end</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: flex-end;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
margin-top: -100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - center</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'center' centered the flex items in the cross axis within the line">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: center;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#top {
|
||||
background-color: green;
|
||||
margin-top: -100px;
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
#bottom {
|
||||
background-color: green;
|
||||
height: 25px;
|
||||
margin-top: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - stretch</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'stretch' makes the cross size of the item's margin box
|
||||
as close to the same size as the line as possible">
|
||||
<style>
|
||||
#test {
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: stretch;
|
||||
background-color: green;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - stretch (height: number)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number">
|
||||
<style>
|
||||
#test {
|
||||
background-color: green;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: stretch;
|
||||
background-color: red;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
top: -100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - baseline</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'baseline' aligns the flex items to the baseline of content">
|
||||
<style>
|
||||
#test {
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
}
|
||||
#test div {
|
||||
align-self: baseline;
|
||||
}
|
||||
#div1 {
|
||||
height: 90px;
|
||||
font-size: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
#div2 {
|
||||
height: 50px;
|
||||
font-size: 10px;
|
||||
width: 30px;
|
||||
}
|
||||
#div3 {
|
||||
height: 100px;
|
||||
font-size: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
#div4 {
|
||||
height: 80px;
|
||||
font-size: 15px;
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if the underline of all 'a' characters within black border box is horizontal and no breaking.</p>
|
||||
<div id="test">
|
||||
<div id="div1"><a href="#">aaa</a></div>
|
||||
<div id="div2"><a href="#">aaaaa</a></div>
|
||||
<div id="div3"><a href="#">aa</a></div>
|
||||
<div id="div4"><a href="#">aaa</a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - auto and align-items - flex-start</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'">
|
||||
<style>
|
||||
#test {
|
||||
align-items: flex-start;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: auto;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
margin-top: -50px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - auto and align-items - flex-end</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'">
|
||||
<style>
|
||||
#test {
|
||||
align-items: flex-end;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: auto;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
margin-top: -100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - auto and align-items - center</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'auto' will center flex items the flex items in the cross axis when 'align-items' set 'center'">
|
||||
<style>
|
||||
#test {
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: auto;
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#top {
|
||||
background-color: green;
|
||||
margin-top: -100px;
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
#bottom {
|
||||
background-color: green;
|
||||
height: 25px;
|
||||
margin-top: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - auto and align-items - baseline</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'auto' aligns the flex items to the baseline of content when 'align-items' set 'baseline'">
|
||||
<style>
|
||||
#test {
|
||||
align-items: baseline;
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
}
|
||||
#test div {
|
||||
align-self: auto;
|
||||
}
|
||||
#div1 {
|
||||
height: 90px;
|
||||
font-size: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
#div2 {
|
||||
height: 50px;
|
||||
font-size: 10px;
|
||||
width: 30px;
|
||||
}
|
||||
#div3 {
|
||||
height: 100px;
|
||||
font-size: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
#div4 {
|
||||
height: 80px;
|
||||
font-size: 15px;
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if the underline of all 'a' characters within black border box is horizontal and no breaking.</p>
|
||||
<div id="test">
|
||||
<div id="div1"><a href="#">aaa</a></div>
|
||||
<div id="div2"><a href="#">aaaaa</a></div>
|
||||
<div id="div3"><a href="#">aa</a></div>
|
||||
<div id="div4"><a href="#">aaa</a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - auto and align-items - stretch</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property set 'auto' makes the cross size of the item's margin box
|
||||
as close to the same size as the line as possible when 'align-items' set 'stretch'">
|
||||
<style>
|
||||
#test {
|
||||
align-items: stretch;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
align-self: auto;
|
||||
background-color: green;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - auto (initial value)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The initial value of 'align-self' property is 'auto'">
|
||||
<style>
|
||||
#test {
|
||||
align-items: stretch;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
width: 25px;
|
||||
}
|
||||
.auto {
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div class="auto"></div>
|
||||
<div class="auto"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: align-self - invalid if applied to flex container</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'align-self' property is invalid if applied to flex container">
|
||||
<style>
|
||||
#test {
|
||||
align-items: flex-start;
|
||||
align-self: flex-end;
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
margin-top: -50px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<style>
|
||||
|
||||
#circles, #circles div {
|
||||
border: 1em solid blue;
|
||||
border-radius:50%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#circles { width:9em; height:9em; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
|
||||
|
||||
<p>The word OK should be centered vertically and horizontally.</p>
|
||||
<div style="width: 4em; height: 4em; background: silver">
|
||||
<table style="width: 100%; height: 100%;"><tr><td style="text-align: center">OK</td></tr></table>
|
||||
</div>
|
||||
|
||||
<div style="width: 4em; height: 4em; margin-top: 10px; background: silver; writing-mode: vertical-rl">
|
||||
<table style="width: 100%; height: 100%;"><tr><td style="text-align: center">OK</td></tr></table>
|
||||
</div>
|
||||
|
||||
<p>You should see 3 blue concentric circles.</p>
|
||||
<div id="circles">
|
||||
<div style="width: 5em; height: 5em; margin-top: 1em;">
|
||||
<div style="width: 1em; height: 1em; margin-top: 1em;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The computed style of each margin should not be 0.<br>OK: PASS<br>Vertical OK: PASS</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Aligning with auto margins</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins">
|
||||
<link rel="match" href="auto-margins-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style>
|
||||
|
||||
#circles, #circles div {
|
||||
display: flex;
|
||||
width: -webkit-calc(100% - 4em);
|
||||
width: calc(100% - 4em);
|
||||
height: -webkit-calc(100% - 4em);
|
||||
height: calc(100% - 4em);
|
||||
border: 1em solid blue;
|
||||
border-radius:50%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#circles { width:9em; height:9em; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
|
||||
|
||||
<p>The word OK should be centered vertically and horizontally.</p>
|
||||
<div class="flexbox" style="width: 4em; height: 4em; background: silver">
|
||||
<p id="ok" style="margin: auto;">OK</p>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="width: 4em; height: 4em; margin-top: 10px; background: silver; writing-mode: vertical-rl">
|
||||
<p id="okVertical" style="margin: auto;">OK</p>
|
||||
</div>
|
||||
|
||||
<p>You should see 3 blue concentric circles.</p>
|
||||
<div id="circles"><div><div></div></div></div>
|
||||
|
||||
<p id="log">The computed style of each margin should not be 0.</p>
|
||||
<script>
|
||||
var okStyle = getComputedStyle(document.getElementById('ok'));
|
||||
document.getElementById("log").innerHTML += "<br>OK: " +
|
||||
((parseInt(okStyle.marginTop) && parseInt(okStyle.marginRight) && parseInt(okStyle.marginBottom) && parseInt(okStyle.marginLeft)) ? "PASS" : "FAIL");
|
||||
|
||||
var okVerticalStyle = getComputedStyle(document.getElementById('okVertical'));
|
||||
document.getElementById("log").innerHTML += "<br>Vertical OK: " +
|
||||
((parseInt(okVerticalStyle.marginTop) && parseInt(okVerticalStyle.marginRight) && parseInt(okVerticalStyle.marginBottom) && parseInt(okVerticalStyle.marginLeft)) ? "PASS" : "FAIL");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox |css-box-justify-content</title>
|
||||
<link rel="author" href="mailto:ava656094@gmail.com" title="xiaoxia">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="match" href="reference/css-box-justify-content-ref.html">
|
||||
<style>
|
||||
#flexbox {
|
||||
background: green;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item{
|
||||
width:50px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the DIV5's position in the end and the div is Horizontal layout</p>
|
||||
<div id="flexbox">
|
||||
<div class="item" style="background-color: rgb(242, 210, 80); color: rgb(41, 119, 248);">DIV1</div>
|
||||
|
||||
<div class="item" style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);">DIV2</div>
|
||||
|
||||
<div class="item" style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);">DIV3</div>
|
||||
|
||||
<div class="item" style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);">DIV4</div>
|
||||
|
||||
<div class="item" style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);">DIV5</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
color: white;
|
||||
width: 9em;
|
||||
}
|
||||
.item {
|
||||
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,55 @@
|
|||
<!DOCTYPE html> <!-- coding:utf-8 -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row</title>
|
||||
<link rel="author" title="Naoki Okada" href="mailto:somathor@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="match" href="css-flexbox-column-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse wrap-reverse;
|
||||
writing-mode: vertical-rl;
|
||||
width: 9em;
|
||||
min-height: 4em;
|
||||
color: white;
|
||||
align-content: flex-end;
|
||||
background: green;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 1em;
|
||||
width: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
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 class="item">ｔ</div>
|
||||
<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 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,55 @@
|
|||
<!DOCTYPE html> <!-- coding:utf-8 -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row</title>
|
||||
<link rel="author" title="Naoki Okada" href="mailto:somathor@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="match" href="css-flexbox-column-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse wrap;
|
||||
writing-mode: vertical-rl;
|
||||
width: 9em;
|
||||
min-height: 4em;
|
||||
color: white;
|
||||
align-content: flex-start;
|
||||
background: green;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 1em;
|
||||
width: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
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 class="item">ｔ</div>
|
||||
<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 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,40 @@
|
|||
<!DOCTYPE html> <!-- coding:utf-8 -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row</title>
|
||||
<link rel="author" title="Naoki Okada" href="mailto:somathor@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="match" href="css-flexbox-column-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
writing-mode: vertical-rl;
|
||||
width: 9em;
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 4em;
|
||||
width: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
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,55 @@
|
|||
<!DOCTYPE html> <!-- coding:utf-8 -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row</title>
|
||||
<link rel="author" title="Naoki Okada" href="mailto:somathor@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="match" href="css-flexbox-column-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap-reverse;
|
||||
writing-mode: vertical-rl;
|
||||
width: 9em;
|
||||
min-height: 4em;
|
||||
color: white;
|
||||
align-content: flex-end;
|
||||
background: green;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 1em;
|
||||
width: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
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 class="item">２</div>
|
||||
<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 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,55 @@
|
|||
<!DOCTYPE html> <!-- coding:utf-8 -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row</title>
|
||||
<link rel="author" title="Naoki Okada" href="mailto:somathor@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="match" href="css-flexbox-column-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
writing-mode: vertical-rl;
|
||||
width: 9em;
|
||||
min-height: 4em;
|
||||
color: white;
|
||||
align-content: flex-start;
|
||||
background: green;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 1em;
|
||||
width: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
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 class="item">２</div>
|
||||
<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 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,40 @@
|
|||
<!DOCTYPE html> <!-- coding:utf-8 -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row</title>
|
||||
<link rel="author" title="Naoki Okada" href="mailto:somathor@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="match" href="css-flexbox-column-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
writing-mode: vertical-rl;
|
||||
width: 9em;
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 4em;
|
||||
width: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
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,23 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox Test: Items stretch correctly while content is animating</title>
|
||||
<link rel="author" title="Micky Brunetti" href="mailto:micky2be@gmail.com">
|
||||
<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,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox Test: Items stretch correctly while content is animating</title>
|
||||
<link rel="author" title="Micky Brunetti" href="mailto:micky2be@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
|
||||
<link rel="match" href="css-flexbox-height-animation-stretch-ref.html"/>
|
||||
<meta name="flags" content="animated">
|
||||
<meta name="assert" content="Items should stretch vertically in all time">
|
||||
<style>
|
||||
@keyframes resize {
|
||||
0% {height: 100px;}
|
||||
100% {height: 50px;}
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
width: 200px;
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
.item {
|
||||
background-color: green;
|
||||
width: 50px;
|
||||
|
||||
}
|
||||
.content {
|
||||
height: 50px;
|
||||
}
|
||||
.bigger.content {
|
||||
height: 100px;
|
||||
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 class="container">
|
||||
<div class="item"><div class="bigger content"></div></div>
|
||||
<div class="item"><div class="content"></div></div>
|
||||
<div class="item"><div class="content"></div></div>
|
||||
<div class="item"><div class="content"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox Test: Image Expansion</title>
|
||||
<link rel="author" title="Eiji Kitamura" href="mailto:agektmr@gmail.com">
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="reference/css-flexbox-img-expand-evenly-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="3 rectangular images fill out border.">
|
||||
<style type="text/css">
|
||||
|
||||
/* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
img {
|
||||
width: 48px;
|
||||
flex-grow: 1;
|
||||
background: purple;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>3 rectangular 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,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
writing-mode: vertical-rl;
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
</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,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="css-flexbox-row-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse wrap-reverse, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
writing-mode: vertical-rl;
|
||||
color: white;
|
||||
|
||||
height: 9em;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 9em;
|
||||
width: 3em;
|
||||
z-index: -1;
|
||||
}
|
||||
</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="error"></div>
|
||||
<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,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="css-flexbox-row-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse wrap, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap;
|
||||
writing-mode: vertical-rl;
|
||||
color: white;
|
||||
|
||||
height: 9em;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 9em;
|
||||
width: 3em;
|
||||
z-index: -1;
|
||||
}
|
||||
</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="error"></div>
|
||||
<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,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="css-flexbox-row-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row-reverse, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
writing-mode: vertical-rl;
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 9em;
|
||||
width: 3em;
|
||||
z-index: -1;
|
||||
}
|
||||
</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="error"></div>
|
||||
<div class="container">
|
||||
<div class="item">７８９<br />ｇｈｉ</div>
|
||||
<div class="item">４５６<br />ｄｅｆ</div>
|
||||
<div class="item">１２３<br />ａｂｃ</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="css-flexbox-row-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row wrap-reverse, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse;
|
||||
writing-mode: vertical-rl;
|
||||
color: white;
|
||||
|
||||
height: 9em;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 9em;
|
||||
width: 3em;
|
||||
z-index: -1;
|
||||
}
|
||||
</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="error"></div>
|
||||
<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,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="css-flexbox-row-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row wrap, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
writing-mode: vertical-rl;
|
||||
color: white;
|
||||
|
||||
height: 9em;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 9em;
|
||||
width: 3em;
|
||||
z-index: -1;
|
||||
}
|
||||
</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="error"></div>
|
||||
<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,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="css-flexbox-row-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 9em;
|
||||
width: 3em;
|
||||
z-index: -1;
|
||||
}
|
||||
</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="error"></div>
|
||||
<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 rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org">
|
||||
<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,50 @@
|
|||
<!DOCTYPE html> <!-- coding:utf-8 -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Flexbox Test: flex direction: row, writing mode vertical</title>
|
||||
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org" />
|
||||
<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<!-- You must have at least one spec link, but may have as many as are covered in the test. -->
|
||||
<!-- Be sure to make the main testing area first in the order -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link rel="match" href="css-flexbox-test1-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
writing-mode: vertical-rl;
|
||||
color: white;
|
||||
}
|
||||
.item {
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 9em;
|
||||
width: 3em;
|
||||
z-index: -1;
|
||||
}
|
||||
</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="error"></div>
|
||||
<div class="container">
|
||||
<div class="item">１２３<br />１２３</div>
|
||||
<div class="item">４５６<br />４５６</div>
|
||||
<div class="item">７８９<br />７８９</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: An element with the 'display' property set to 'flex' establishes a new block-level flex container</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" />
|
||||
<link rel="match" href="reference/align-content-001-ref.html" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that an element with 'display' property set to 'flex' establishes a new block-level flex container." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: display_flex</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check if the web engine can indenfy the display value flex." />
|
||||
<style>
|
||||
div#test{
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
<div id=test></div>
|
||||
<script type="text/javascript">
|
||||
var t = async_test(document.title, {timeout:500});
|
||||
t.step(function () {
|
||||
assert_equals(window.getComputedStyle(document.querySelector('div#test')).display, "flex", "Display value is");
|
||||
});
|
||||
t.done();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: display_inline-flex</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check if the web engine can identify the display value inline-flex." />
|
||||
<style>
|
||||
div#test{
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
<div id=test></div>
|
||||
<script type="text/javascript">
|
||||
var t = async_test(document.title, {timeout:500});
|
||||
t.step(function () {
|
||||
assert_equals(window.getComputedStyle(document.querySelector('div#test')).display, "inline-flex", "Display value is");
|
||||
});
|
||||
t.done();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
36
tests/wpt/web-platform-tests/css/css-flexbox/flex-001.htm
Normal file
36
tests/wpt/web-platform-tests/css/css-flexbox/flex-001.htm
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: The 'flex' shorthand adjusting the 'flex-grow' sub-property</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" />
|
||||
<link rel="match" href="reference/justify-content-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex grow factor determines the distribution of positive free space."/>
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background-color: red;
|
||||
display: flex;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: orange;
|
||||
flex: 1 0 auto;
|
||||
height: 100px;
|
||||
}
|
||||
#flexItem1
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div id="flexItem1"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
53
tests/wpt/web-platform-tests/css/css-flexbox/flex-002.htm
Normal file
53
tests/wpt/web-platform-tests/css/css-flexbox/flex-002.htm
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: The 'flex' shorthand adjusting the 'flex-shrink' sub-property</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" />
|
||||
<link rel="match" href="reference/justify-content-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex shrink factor is multiplied by the flex base size when distributing negative space."/>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#flexbox
|
||||
{
|
||||
background-color: red;
|
||||
display: flex;
|
||||
width: 300px;
|
||||
}
|
||||
#flexItem1
|
||||
{
|
||||
flex: 0 2 auto;
|
||||
width: 300px;
|
||||
}
|
||||
#flexItem2
|
||||
{
|
||||
width: 200px;
|
||||
}
|
||||
#flexItem1, #ref1
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
#flexItem2, #ref2
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
#ref1, #ref2
|
||||
{
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div id="flexItem1"></div>
|
||||
<div id="flexItem2"></div>
|
||||
</div>
|
||||
<div id="ref1"></div><div id="ref2"></div>
|
||||
</body>
|
||||
</html>
|
||||
54
tests/wpt/web-platform-tests/css/css-flexbox/flex-003.htm
Normal file
54
tests/wpt/web-platform-tests/css/css-flexbox/flex-003.htm
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Comparing two different elements using different values for the 'flex-grow' sub-property on the 'flex' shorthand</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" />
|
||||
<link rel="match" href="reference/justify-content-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex items with a different flex grow factor have different flexibilities."/>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#flexbox
|
||||
{
|
||||
background-color: red;
|
||||
display: flex;
|
||||
width: 300px;
|
||||
}
|
||||
#flexItem1
|
||||
{
|
||||
flex: 1 0 auto;
|
||||
width: 100px;
|
||||
}
|
||||
#flexItem2
|
||||
{
|
||||
flex: 2 0 auto;
|
||||
width: 50px;
|
||||
}
|
||||
#flexItem1, #ref1
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
#flexItem2, #ref2
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
#ref1, #ref2
|
||||
{
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div id="flexItem1"></div>
|
||||
<div id="flexItem2"></div>
|
||||
</div>
|
||||
<div id="ref1"></div><div id="ref2"></div>
|
||||
</body>
|
||||
</html>
|
||||
54
tests/wpt/web-platform-tests/css/css-flexbox/flex-004.htm
Normal file
54
tests/wpt/web-platform-tests/css/css-flexbox/flex-004.htm
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Comparing two different elements using different values for the 'flex-shrink' sub-property on the 'flex' shorthand</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property" />
|
||||
<link rel="match" href="reference/justify-content-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the flex items with a different flex shrink factor have different flexibilities."/>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#flexbox
|
||||
{
|
||||
background-color: red;
|
||||
display: flex;
|
||||
width: 300px;
|
||||
}
|
||||
#flexItem1
|
||||
{
|
||||
flex: 0 2 auto;
|
||||
width: 300px;
|
||||
}
|
||||
#flexItem2
|
||||
{
|
||||
flex: 0 3 auto;
|
||||
width: 600px;
|
||||
}
|
||||
#flexItem1, #ref1
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
#flexItem2, #ref2
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
#ref1, #ref2
|
||||
{
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div id="flexItem1"></div>
|
||||
<div id="flexItem2"></div>
|
||||
</div>
|
||||
<div id="ref1"></div><div id="ref2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#alignment" />
|
||||
<link rel="match" href="reference/flex-align-items-center-ref.html" />
|
||||
<meta name="assert" content="flex items center" />
|
||||
<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;
|
||||
}
|
||||
#container > div {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#fail-flag {
|
||||
position: absolute;
|
||||
top: 162px;
|
||||
left: 272px;
|
||||
width: 92px;
|
||||
height: 36px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items center</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<div id="fail-flag"></div>
|
||||
<section id="container">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<style type="text/css">
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#constrained-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: none;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="constrained-flex">
|
||||
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a height is specified" />
|
||||
<style type="text/css">
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#constrained-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: none;
|
||||
height: 100px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="constrained-flex">
|
||||
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" />
|
||||
<style type="text/css">
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#constrained-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: none;
|
||||
flex-basis: 100px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="constrained-flex">
|
||||
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<style type="text/css">
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#constrained-flex {
|
||||
display: flex;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: none;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="constrained-flex">
|
||||
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a width is specified" />
|
||||
<style type="text/css">
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#constrained-flex {
|
||||
display: flex;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: none;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="constrained-flex">
|
||||
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" />
|
||||
<style type="text/css">
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#constrained-flex {
|
||||
display: flex;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: none;
|
||||
flex-basis: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="constrained-flex">
|
||||
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - positive number</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property set positive number, the actual value of test element size is same as the positive number">
|
||||
<style>
|
||||
#container {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#container div{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
}
|
||||
#test {
|
||||
flex-basis: 60px;
|
||||
}
|
||||
#ref {
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
<div id="ref"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - positive number</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property specified correct value, the actual value of test element size is same as to the value of 'flex-basis' property, and the 'width' property is invalid.">
|
||||
<style>
|
||||
#container {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#container div{
|
||||
height: 100px;
|
||||
}
|
||||
#test {
|
||||
flex-basis: 60px;
|
||||
width: 80px;
|
||||
}
|
||||
#ref {
|
||||
background-color: green;
|
||||
width: 40px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
margin-top: -100px;
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
<div id="ref"></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - negative number(width not specified)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property set negative number, the tested element is not shown when width not set either.">
|
||||
<style>
|
||||
#container {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#container div{
|
||||
height: 100px;
|
||||
}
|
||||
#test {
|
||||
flex-basis: -50px;
|
||||
}
|
||||
#ref {
|
||||
background-color: green;
|
||||
width: 50px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
margin-left: 50px;
|
||||
margin-top: -100px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
<div id="ref"></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - negative number(width specified)</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property set negative number, the actual width of tested element is
|
||||
same as the value of 'width' property specified.">
|
||||
<style>
|
||||
#container {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#container div{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
}
|
||||
#test {
|
||||
flex-basis: -50px;
|
||||
width: 30px;
|
||||
}
|
||||
#ref {
|
||||
width: 50px;
|
||||
}
|
||||
#cover {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
margin-left: 80px;
|
||||
margin-top: -100px;
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
<div id="ref"></div>
|
||||
</div>
|
||||
<div id="cover"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - 0</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property set '0', the actual width of tested element is same as 0.">
|
||||
<style>
|
||||
#container {
|
||||
background-color: green;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
background-color: red;
|
||||
flex-basis: 0;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - 0%</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property set '0%', the actual width of tested element is same as 0.">
|
||||
<style>
|
||||
#container {
|
||||
background-color: green;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test {
|
||||
background-color: red;
|
||||
flex-basis: 0%;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - auto</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property set 'auto', the actual width of tested element same as the value which specified by width property.">
|
||||
<style>
|
||||
#container {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#container div{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
}
|
||||
#ref {
|
||||
width: 50px;
|
||||
}
|
||||
#test {
|
||||
flex-basis: auto;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
<div id="ref"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-basis - 50%</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Intel" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-basis' property set positive percentage, the actual width of tested element same as the percentage of flex container size.">
|
||||
<style>
|
||||
#container {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#container div{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
}
|
||||
#ref {
|
||||
width: 40px;
|
||||
}
|
||||
#test {
|
||||
flex-basis: 60%;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="ref"></div>
|
||||
<div id="test"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox Test: flex-wrap: wrap</title>
|
||||
<link rel="author" title="Tsuyoshi Tokuda" href="mailto:tokuda109@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="reference/flex-box-wrap-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="the test passes if you see green box.">
|
||||
<style type="text/css">
|
||||
|
||||
.flex-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
width: 200px;
|
||||
}
|
||||
.flex-item,
|
||||
.error {
|
||||
list-style-type: none;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.error {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be a green block with no red.</p>
|
||||
|
||||
<ul class="flex-box">
|
||||
<li class="flex-item">width: 120px</li>
|
||||
<li class="flex-item">width: 120px</li>
|
||||
<li class="error"></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#item-margins">
|
||||
<link rel="match" href="reference/flex-container-margin-ref.html">
|
||||
<meta name="assert" content="The margins of adjacent flex items do not collapse." />
|
||||
<style>
|
||||
.flex-container{
|
||||
display: flex;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
}
|
||||
.flex-item{
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px;
|
||||
background: #eee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-container">
|
||||
<div class="flex-item"></div>
|
||||
<div class="flex-item"></div>
|
||||
<div class="flex-item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex-direction: column-reverse swaps main start and end directions</title>
|
||||
<link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com">
|
||||
<link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that column-reverse flex-direction swaps the main start and main end directions">
|
||||
<style>
|
||||
.test {
|
||||
display: flex;
|
||||
float:left;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.test > span {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
#column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if both the two columns below are identical.</p>
|
||||
<div class="test" id="column">
|
||||
<span>A</span><span>B</span><span>C</span>
|
||||
</div>
|
||||
<div class="test" id="column-reverse">
|
||||
<span>C</span><span>B</span><span>A</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="match" href="reference/flex-direction-modify.html">
|
||||
<meta name="assert" content="Changing 'flex-direction' with JavaScript and then changing it back should returns to the original look." />
|
||||
<style>
|
||||
.flex-container{
|
||||
display: flex;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
}
|
||||
.flex-item{
|
||||
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:<span id="current_direction">row</h1>
|
||||
<div id="flex_container" class="flex-container"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
<script>
|
||||
var container = document.getElementById("flex_container");
|
||||
var direction_text = document.getElementById("current_direction");
|
||||
var baseClass = "flex-container ";
|
||||
var classPrefix = "flex-direction-";
|
||||
function change_direction( direction ){
|
||||
container.className = baseClass + classPrefix + direction;
|
||||
notify( direction );
|
||||
}
|
||||
|
||||
function notify( direction ){
|
||||
direction_text.innerHTML = direction;
|
||||
}
|
||||
|
||||
change_direction("row");
|
||||
change_direction("row-reverse");
|
||||
change_direction("column");
|
||||
change_direction("row-column-reverse");
|
||||
change_direction("row");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flow-direction:row-reverse swaps main start and end directions</title>
|
||||
<link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com">
|
||||
<link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that row-reverse flex-direction swaps the main start and main end directions">
|
||||
<style>
|
||||
.test {
|
||||
display: flex;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.test > span {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
#row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if both the lines below are identical.</p>
|
||||
<div class="test" id="row">
|
||||
<span>A</span><span>B</span><span>C</span>
|
||||
</div>
|
||||
<div class="test" id="row-reverse">
|
||||
<span>C</span><span>B</span><span>A</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex-direction:row has the same orientation as inline axis</title>
|
||||
<link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com">
|
||||
<link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current vertical writing mode">
|
||||
<style>
|
||||
#vertical {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.test {
|
||||
display: flex;
|
||||
width: 3em;
|
||||
flex-direction :row;
|
||||
}
|
||||
|
||||
.test > span {
|
||||
width: 1em;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#row-ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#row-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if both the two columns below are identical.</p>
|
||||
<div id="vertical">
|
||||
<div class="test" id="row-ltr">
|
||||
<span>A</span><span>B</span><span>C</span>
|
||||
</div>
|
||||
<div class="test" id="row-rtl">
|
||||
<span>C</span><span>B</span><span>A</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex-direction:row axis matches that of writing mode inline axis</title>
|
||||
<link rel="author" title="Sylvain Galineau" href="mailto:galineau@adobe.com">
|
||||
<link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current writing mode">
|
||||
<style>
|
||||
|
||||
.test {
|
||||
display: flex;
|
||||
width: 3em;
|
||||
flex-direction :row;
|
||||
}
|
||||
|
||||
.test > span {
|
||||
width: 1em;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#row-ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#row-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if both the lines below are identical.</p>
|
||||
<div class="test" id="row-ltr">
|
||||
<span>A</span><span>B</span><span>C</span>
|
||||
</div>
|
||||
<div class="test" id="row-rtl">
|
||||
<span>C</span><span>B</span><span>A</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="match" href="reference/flex-direction-with-element-insert.html">
|
||||
<meta name="assert" content="The flex items inserted by script shuould follow the right direction what the flex-direction property directives." />
|
||||
<style>
|
||||
.flex-container{
|
||||
display: flex;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
}
|
||||
.flex-item{
|
||||
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 id="flex-direction-row" 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 id="flex-direction-row-reverse" class="flex-container flex-direction-row-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
<h1>flex-direction:column</h1>
|
||||
<div id="flex-direction-column" class="flex-container flex-direction-column"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
<h1>flex-direction:column-reverse</h1>
|
||||
<div id="flex-direction-column-reverse" class="flex-container flex-direction-column-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
|
||||
<script>
|
||||
var ids = ['flex-direction-row',
|
||||
'flex-direction-row-reverse',
|
||||
'flex-direction-column',
|
||||
'flex-direction-column-reverse'];
|
||||
|
||||
for( var i in ids ){
|
||||
var new_element = document.createElement("div")
|
||||
new_element.className="flex-item";
|
||||
new_element.innerHTML="new";
|
||||
var container = document.getElementById( ids[i] );
|
||||
container.appendChild( new_element );
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="match" href="reference/flex-direction.html">
|
||||
<meta name="assert" content="The flow of flex items in the the flex container should observe the flex-direction property." />
|
||||
<style>
|
||||
.flex-container{
|
||||
display: flex;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
}
|
||||
.flex-item{
|
||||
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"><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">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
<h1>flex-direction:column</h1>
|
||||
<div class="flex-container flex-direction-column"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
<h1>flex-direction:column-reverse</h1>
|
||||
<div class="flex-container flex-direction-column-reverse"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-direction_column-reverse</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the flex-direction value column-reverse." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br>
|
||||
2. the rectangle 1, 2, 3 appear in bottom left of red rectangle and from top to bottom of the column: 3, 2, 1.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-direction_column</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the flex-direction value column." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.<br>
|
||||
2. They are all appear in upper left of the red rectangle.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-direction_row-reverse</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the flex-direction value row-reverse." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br>
|
||||
2. the rectangle 1, 2, 3 appear in upper right of red rectangle and from left to right of the row: 3, 2, 1.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-direction_row</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" />
|
||||
<link rel="stylesheet" href="support/test-style.css">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Check if the web engine can identify the flex-direction value row." />
|
||||
<style>
|
||||
#test{
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if:<br>
|
||||
1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.<br>
|
||||
2. the rectangle 1, 2, 3 appear in upper left of red rectangle.</p>
|
||||
<div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>flex item child margin</title>
|
||||
<link rel="author" title="shaofeic" href="mailto:csf178@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
|
||||
<link rel="match" href="reference/flex-flexitem-childmargin-ref.html">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="margin should effect the orange box and green box need to align to bottom." />
|
||||
<style type="text/css">
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
display: flex;
|
||||
height:300px;
|
||||
}
|
||||
#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;">
|
||||
a
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p style="width:100px;height:100px;background:green;">
|
||||
b
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>flex item size prescation</title>
|
||||
<link rel="author" title="shaofeic" href="mailto:csf178@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
|
||||
<link rel="match" href="reference/flex-flexitem-percentage-prescation-ref.html">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="no blue color could be seen." />
|
||||
<style type="text/css">
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
display: flex;
|
||||
height:300px;
|
||||
width:101px;
|
||||
}
|
||||
p {
|
||||
flex:1;
|
||||
background:red;
|
||||
flex-direction:row;
|
||||
margin:0 0 0 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<p style="background:green;">damer</p>
|
||||
<p>damer</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test Reference File</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-flow - row nowrap</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="flex-flow-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-flow' property set 'row nowrap' controls the flex container is single-line">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<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 id="test">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test Reference File</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.float {
|
||||
margin-left: 50px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-flow - row wrap</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="flex-flow-002-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-flow' property set 'row wrap' controls the flex container is multi-line">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<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 id="test">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-flow - row wrap-reverse</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="flex-flow-002-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-flow' property set 'row wrap-reverse' controls the flex container is multi-line
|
||||
but the cross-start and cross-end directions are swapped">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<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 id="test">
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-flow - row-reverse nowrap</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="flex-flow-001-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-flow' property set 'row-reverse nowrap' controls the flex container is single-line,
|
||||
but the main-start and main-end directions are swapped">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
flex-flow: row-reverse nowrap;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<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 id="test">
|
||||
<div>4</div>
|
||||
<div>3</div>
|
||||
<div>2</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-flow - row-reverse wrap</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="flex-flow-002-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-flow' property set 'row-reverse wrap' controls the flex container is multi-line
|
||||
but the main-start and main-end directions are swapped">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<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 id="test">
|
||||
<div>2</div>
|
||||
<div>1</div>
|
||||
<div>4</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: flex-flow - row-reverse wrap-reverse</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="5.3. Flex Direction and Wrap: the 'flex-flow' shorthand" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="flex-flow-002-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'flex-flow' property set 'row-reverse wrap-reverse' controls the flex container is multi-line
|
||||
but the main-start and main-end, cross-start and cross-end directions are all swapped">
|
||||
<style>
|
||||
#test {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
flex-flow: row-reverse wrap-reverse;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test div {
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<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 id="test">
|
||||
<div>4</div>
|
||||
<div>3</div>
|
||||
<div>2</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
</body>
|
||||
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