Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-24 00:54:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

Browse source
This commit is contained in:
James Graham 2015-07-27 17:47:31 +01:00
parent 662c00a810
commit df03062d62
10934 changed files with 428309 additions and 254265 deletions
Download patch file Download diff file Expand all files Collapse all files

33
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm
View file

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu">
<style>
.flex-container{
display:block;
margin:20px;
background: #333;
line-height: 0px;
}
.flex-item{
display: inline-block;
width:50px;
height:50px;
margin:20px 20px;
background: #eee;
}
.flex-item.first{
margin-left:20px;
}
.flex-item.last{
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div>
</div>
</body></html>

75
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-001-ref.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: horizontal-tb; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
</body></html>

75
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-002-ref.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
</body></html>

75
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-003-ref.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
</body></html>

75
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-004-ref.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: horizontal-tb; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
</body></html>

75
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-005-ref.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

75
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-006-ref.htm Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
</body></html>

55
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-007-ref.htm Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

55
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-008-ref.htm Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
</body></html>

55
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-writing-mode-009-ref.htm Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
</body></html>

4
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-center-ref.htm
View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - center</title>
<title>CSS Flexible Box Test: align-content property - center</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {
@ -26,7 +26,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table.</p>
<p>The test passed if you see a centered 2*2 table.</p>
<div class="container">
<span>first</span>
<span>second</span>

2
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-end-ref.htm
View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - flex-end</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {

38
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-space-between-ref.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content property - space-between</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {
position: relative;
height: 14em;
width: 20em;
background: red;
margin: 1em;
border: 1px solid black;
}
.first, .second {
margin-bottom: 112px;
}
span {
height: 2em;
display: inline-block;
background: green;
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p>
<div class="container">
<span class="first">first</span>
<span class="second">second</span>
<span>third</span>
<span>forth</span>
</div>
</body></html>

35
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-start-ref.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content property - flex-start</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {
position: relative;
height: 14em;
width: 20em;
background: red;
margin: 1em;
border: 1px solid black;
}
span {
height: 2em;
display: inline-block;
background: green;
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p>
<div class="container">
<span>first</span>
<span>second</span>
<span>third</span>
<span>forth</span>
</div>
</body></html>

36
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-column-reverse-ref.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */
.container {
position: relative;
background: red;
margin: 1em 0;
border: 1px solid black;
}
span ~ span {
margin: 2em 1em 1em;
}
span {
display: block;
background: green;
color: white;
margin: 1em;
width: 8em;
}
</style>
</head>
<body>
<p>The test passed if you see all the cells are arraged vertically and reversed.</p>
<div class="container">
<span>forth</span>
<span>third</span>
<span>second</span>
<span>first</span>
</div>
</body></html>

1
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm
View file

@ -6,7 +6,6 @@
.container {
position: relative;
display: flex;
flex-direction: row-reverse;
background: red;
margin: 1em 0;
border: 1px solid black;

25
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-inline-ref.htm → tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-wrap-ref.htm
View file

@ -1,26 +1,35 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: display proprety - inline-flex</title>
<title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */
.container {
position: relative;
background: red;
margin: 1em 0;
border: 1px solid black;
width: 20em;
height: 6.5em;
}
.greenSquare {
span {
display: inline-block;
margin-top: -200px;
background: green;
}
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a green block which its text is 'Success!
'.</p>
<p>The test passed if you see a 2 * 2 table on the page.</p>
<div class="container">
<!-- This is the square that should not be visible if the test passes -->
<div class="greenSquare">Success!</div>
<span>first</span>
<span>second</span>
<span>third</span>
<span>forth</span>
</div>