mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>CSS Test: Change the value of 'order' property</title>
|
||||
<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" />
|
||||
|
||||
<style>
|
||||
|
||||
.box {
|
||||
margin:0 auto;
|
||||
background:#CCC;
|
||||
border-radius:5px;
|
||||
width:600px;
|
||||
}
|
||||
|
||||
.box div {
|
||||
margin:0;
|
||||
width:200px;
|
||||
float:left;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.box .red {
|
||||
background:#F00;
|
||||
}
|
||||
.box .blue {
|
||||
background:#00F;
|
||||
}
|
||||
.box .black {
|
||||
color:#FFF;
|
||||
background:#000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- FLEX CONTAINER -->
|
||||
<div class="box">
|
||||
<div class="blue">B</div>
|
||||
<div class="red">A</div>
|
||||
<div class="black">C</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox |css-box-justify-content</title>
|
||||
<link rel="author" href="mailto:ava656094@gmail.com" title="xiaoxia">
|
||||
<style>
|
||||
#flexbox {
|
||||
background: green;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
text-align:right;
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
text-align:left;
|
||||
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,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Eiji Kitamura" href="mailto:agektmr+github@gmail.com">
|
||||
<style type="text/css">
|
||||
|
||||
/* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
border: 2px dotted black;
|
||||
}
|
||||
img {
|
||||
width: 98px;
|
||||
height: 48px;
|
||||
background: purple;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>3 rectangular images fill out border.</p>
|
||||
|
||||
<!-- PAGE CONTENT -->
|
||||
<div class="flexbox">
|
||||
<!-- It is important that there is no linebreak between the <img> tags.
|
||||
The line break would be rendered as whitespace, breaking the test.
|
||||
-->
|
||||
<img src="../support/solidblue.png" /><img src="../support/solidblue.png" /><img src="../support/solidblue.png" />
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
#a {
|
||||
top: 148px;
|
||||
left: 239px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#b {
|
||||
top: 148px;
|
||||
left: 293px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#c {
|
||||
top: 148px;
|
||||
left: 347px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items center</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
</section>
|
||||
<div id="a" style="position:absolute"></div>
|
||||
<div id="b" style="position:absolute"></div>
|
||||
<div id="c" style="position:absolute"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>flexible box flex item float effect</title>
|
||||
<link rel="author" title="zhouli" href="mailto:liz@oupeng.com">
|
||||
<style>
|
||||
#myDiv{
|
||||
position: relative;
|
||||
}
|
||||
#myDiv p{
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
#first-p{
|
||||
background-color: green;
|
||||
}
|
||||
#second-p{
|
||||
background-color: blue;
|
||||
}
|
||||
#myDiv #fail-flag{
|
||||
width: 600px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>'float' have no effect on a flex item.</p>
|
||||
<p>The test passes if there is a green square, a blue square and no red square.</p>
|
||||
<div id="myDiv">
|
||||
<p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p>
|
||||
</div>
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox Test: flex-wrap: wrap</title>
|
||||
<link rel="author" title="Tsuyoshi Tokuda" href="mailto:tokuda109@gmail.com">
|
||||
<style type="text/css">
|
||||
|
||||
.box {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
width: 200px;
|
||||
}
|
||||
.item {
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be a green block with no red.</p>
|
||||
|
||||
<ul class="box">
|
||||
<li class="item">width: 120px</li>
|
||||
<li class="item">width: 120px</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<style>
|
||||
.flex-container{
|
||||
display:block;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
line-height: 0px;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px 20px;
|
||||
background: #eee;
|
||||
}
|
||||
.flex-item.first{
|
||||
margin-left:20px;
|
||||
}
|
||||
.flex-item.last{
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-container">
|
||||
<div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<style>
|
||||
.flex-container{
|
||||
display: flex;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px;
|
||||
background: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.flex-container.flex-direction-row{
|
||||
flex-direction : row;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-row-reverse{
|
||||
flex-direction : row-reverse;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column{
|
||||
flex-direction : column;
|
||||
}
|
||||
.flex-container.flex-direction-column-reverse{
|
||||
flex-direction : column-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>flex-direction:row</h1>
|
||||
<div id="flex_container" 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<style>
|
||||
.flex-container{
|
||||
display:block;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
line-height: 0px;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px 20px;
|
||||
background: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-row{
|
||||
flex-direction : row;
|
||||
}
|
||||
.flex-container.flex-direction-row-reverse{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column-reverse .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>flex-direction:row</h1>
|
||||
<div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">new</div></div>
|
||||
|
||||
<h1>flex-direction:row-reverse</h1>
|
||||
<div class="flex-container flex-direction-row-reverse"><div class="flex-item">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div>
|
||||
|
||||
<h1>flex-direction:column</h1>
|
||||
<div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item last">new</div></div>
|
||||
|
||||
<h1>flex-direction:column-reverse</h1>
|
||||
<div class="flex-container flex-direction-column-reverse"><div class="flex-item first">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flex flow direction</title>
|
||||
<link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
|
||||
<style>
|
||||
.flex-container{
|
||||
display:block;
|
||||
margin:20px;
|
||||
background: #333;
|
||||
line-height: 0px;
|
||||
}
|
||||
.flex-item{
|
||||
display: inline-block;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin:20px 20px;
|
||||
background: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-row{
|
||||
flex-direction : row;
|
||||
}
|
||||
.flex-container.flex-direction-row-reverse{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse{
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item{
|
||||
display: block;
|
||||
margin:40px 20px;
|
||||
}
|
||||
|
||||
.flex-container.flex-direction-column-reverse .flex-item.first{
|
||||
margin-top:0px;
|
||||
}
|
||||
.flex-container.flex-direction-column-reverse .flex-item.last{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>flex-direction:row</h1>
|
||||
<div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
|
||||
|
||||
<h1>flex-direction:row-reverse</h1>
|
||||
<div class="flex-container flex-direction-row-reverse"><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div>
|
||||
|
||||
<h1>flex-direction:column</h1>
|
||||
<div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item last">3</div></div>
|
||||
|
||||
<h1>flex-direction:column-reverse</h1>
|
||||
<div class="flex-container flex-direction-column-reverse"><div class="flex-item first">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: childNodes' 'margin' property of flex item'</title>
|
||||
<link rel="author" title="Shaofei Cheng" href="mailto:csf178@gmail.com" />
|
||||
<meta name="flags" content="" />
|
||||
<style>
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
display: block;
|
||||
height:300px;
|
||||
position:relative;
|
||||
}
|
||||
#test>div.flex {
|
||||
width: 100px;
|
||||
background:red;
|
||||
}
|
||||
#test>div.fixed
|
||||
{
|
||||
height: 300px;
|
||||
flex:1;
|
||||
background:red;
|
||||
}
|
||||
#test p
|
||||
{
|
||||
margin:200px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<div class="fixed">
|
||||
<p style="width:100px;height:100px;background:orange;position:absolute;left:0px;bottom:0px;">
|
||||
a
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p style="width:100px;height:100px;background:green;position:absolute;right:0px;bottom:0px;">
|
||||
b
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: childNodes' 'margin' property of flex item'</title>
|
||||
<link rel="author" title="Shaofei Cheng" href="mailto:csf178@gmail.com" />
|
||||
<meta name="flags" content="" />
|
||||
<style>
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
position:relative;
|
||||
height:300px;
|
||||
width:101px;
|
||||
}
|
||||
p
|
||||
{
|
||||
position:absolute;
|
||||
margin:0 0 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<div id="test">
|
||||
<p style="background:green;top:0px;height:300px;left:0px;height:300px;width:50.5px;">damer</p>
|
||||
<p style="top:0px;left:50.5px;height:300px;background:Red;width:50.5px;">damer</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
#flex {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 166.5px;
|
||||
width: 253px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items flexibility</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
<div id="flex"></div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Reference File</title>
|
||||
<link rel="author" title="Ping Huang" href="mailto:phuangce@gmail.com" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 10px;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#box1 {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
#box2 {
|
||||
margin: 100px 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green boxes and no red.</p>
|
||||
<div id="container">
|
||||
<div id="box1" class="box"></div>
|
||||
<div id="box2" class="box"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: 'display' property set to 'flex'</title>
|
||||
<link rel="author" title="Hua Zhao" href="mailto:zhaohua.design@163.com" />
|
||||
|
||||
<style type="text/css">
|
||||
input{
|
||||
margin:0;
|
||||
padding:0;
|
||||
vertical-align:top;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<input type="text" value="input1" />
|
||||
<input type="radio" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference: Flexbox direction and wrapping</title>
|
||||
<link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com">
|
||||
<link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<meta name="flags" content="">
|
||||
<style>
|
||||
|
||||
/* Ref test styles */
|
||||
|
||||
.flex-wrapper div{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* Test-series styles */
|
||||
|
||||
.flex-wrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
/* should only display on error */
|
||||
background: red;
|
||||
|
||||
/* Enforce writing mode */
|
||||
direction: ltr;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.flex-wrapper div {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
|
||||
background: green;
|
||||
border: 1px solid limegreen;
|
||||
|
||||
color: white;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p>
|
||||
<div class="flex-wrapper">
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference: Flexbox flex-wrap: nowrap</title>
|
||||
<link rel="author" title="Gavin Elster" href="mailto:gavin.elster@me.com">
|
||||
<link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<meta name="flags" content="">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Ryuichi Nonaka" href="mailto:ryuichi1com@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.item
|
||||
{
|
||||
position: absolute;
|
||||
|
||||
width: 100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.item.one
|
||||
{
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
background: red;
|
||||
}
|
||||
.item.two
|
||||
{
|
||||
top: 100px;
|
||||
right: 0;
|
||||
|
||||
background: yellow;
|
||||
}
|
||||
.item.three
|
||||
{
|
||||
top: 0;
|
||||
right: 100px;
|
||||
|
||||
background: green;
|
||||
}
|
||||
.item.four
|
||||
{
|
||||
top: 100px;
|
||||
right: 100px;
|
||||
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see green and red top, blue and yellow bottom.</p>
|
||||
<div id="test">
|
||||
<div class="container">
|
||||
<div class="item one"></div>
|
||||
<div class="item two"></div>
|
||||
<div class="item three"></div>
|
||||
<div class="item four"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
#blue {
|
||||
background: blue;
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
}
|
||||
#orange {
|
||||
background: orange;
|
||||
height: 100px;
|
||||
left: 150px;
|
||||
position: relative;
|
||||
top: -100px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
<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="blue"></div>
|
||||
<div id="orange"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com">
|
||||
<style type="text/css">
|
||||
.flex {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
background: green;
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
overflow: scroll;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flex">
|
||||
<div></div><div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub+github@gmail.com">
|
||||
<style type="text/css">
|
||||
.flex {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flex">
|
||||
<div></div><div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference for negative margins</title>
|
||||
<link rel="author" title="Google Inc." href="https://www.google.com/">
|
||||
<style>
|
||||
.container {
|
||||
width: 60px;
|
||||
height: 10px;
|
||||
background-color: green;
|
||||
border: 3px black solid;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>You should see a green rectangle with a black border, 60px wide. You should see no red.</p>
|
||||
|
||||
<div class="container">
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content property - center</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
height: 6em;
|
||||
width: 20em;
|
||||
background: red;
|
||||
margin: 1em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
span:nth-child(3), span:nth-child(4) {
|
||||
margin: 2em 1em;
|
||||
}
|
||||
span {
|
||||
height: 2em;
|
||||
display: inline-block;
|
||||
background: green;
|
||||
color: white;
|
||||
margin: 0 1em;
|
||||
width: 8em;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see a centered 2*2 table.</p>
|
||||
<div class="container">
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
<span>third</span>
|
||||
<span>forth</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content property - flex-end</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
height: 8em;
|
||||
width: 20em;
|
||||
background: red;
|
||||
margin: 1em;
|
||||
padding-top: 6em;
|
||||
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 bottom of container.</p>
|
||||
<div class="container">
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
<span>third</span>
|
||||
<span>forth</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content property - space-between</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<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: 2.5em 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 bottom of container.</p>
|
||||
<div class="container">
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
<span>third</span>
|
||||
<span>forth</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content property - space-between</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: align-content property - flex-start</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: display proprety - flex</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
height: 6em;
|
||||
width: 3em;
|
||||
background: red;
|
||||
margin: 1em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.success {
|
||||
background: green;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you can't find red color.</p>
|
||||
<div class="container">
|
||||
<span class="success">Hello</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-direction proprety - column</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<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.</p>
|
||||
<div class="container">
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
<span>third</span>
|
||||
<span>forth</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-direction proprety - row-reverse</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
background: red;
|
||||
margin: 1em 0;
|
||||
border: 1px solid black;
|
||||
text-align: right;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
background: green;
|
||||
color: white;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p>
|
||||
<div class="container">
|
||||
<span>forth</span><span>third</span><span>second</span><span>first</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: display proprety - inline-flex</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<style type="text/css">
|
||||
/* Positioned container allows for the self-describing statement to still
|
||||
be visible in the case of failure */
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.greenSquare {
|
||||
display: inline-block;
|
||||
margin-top: -200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see a green block which its text is 'Success!'.</p>
|
||||
<div class="container">
|
||||
<!-- This is the square that should not be visible if the test passes -->
|
||||
<div class="greenSquare">Success!</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: order proprety - value</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
height: 6em;
|
||||
background: red;
|
||||
margin: 1em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
span {
|
||||
height: 2em;
|
||||
display: inline-block;
|
||||
background: green;
|
||||
color: white;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if all the cells are reversed.</p>
|
||||
<div class="container">
|
||||
<span class="first">forth</span><span class="second">third</span><span class="third">second</span><span class="forth">first</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<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;
|
||||
}
|
||||
span {
|
||||
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 on the page.</p>
|
||||
<div class="container">
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
<span>third</span>
|
||||
<span>forth</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexible Box Test: flex-wrap proprety - wrap-reverse</title>
|
||||
<link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">
|
||||
<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;
|
||||
}
|
||||
span {
|
||||
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 on the page and the order of them are reversed.</p>
|
||||
<div class="container">
|
||||
<span>third</span>
|
||||
<span>forth</span>
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue