mirror of
https://github.com/servo/servo.git
synced 2025-06-24 09:04:33 +01:00
Update CSS tests to revision 7a87ef71fc579e52d3438e009107aa442bc4021b
This commit is contained in:
Ms2ger
parent
ad94ef5a96
commit
145aea3eeb
1196 changed files with 14344 additions and 6221 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox |css-box-justufy-content</title>
|
||||
<html><head><title>flexbox |css-box-justify-content</title>
|
||||
<link href="ava656094@gmail.com" rel="author" title="xiaoxia">
|
||||
<style>
|
||||
#flexbox {
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
align:right;
|
||||
text-align:left;
|
||||
width:50px;
|
||||
height: 30px;
|
||||
}
|
||||
|
|
@ -24,4 +24,5 @@
|
|||
<div style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);" class="item">DIV3</div>
|
||||
<div style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);" class="item">DIV4</div>
|
||||
<div style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);" class="item">DIV5</div>
|
||||
</div></body></html>
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -20,13 +20,14 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>3 square images fill out border.</p>
|
||||
<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">
|
||||
<!-- 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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
left: 10px;
|
||||
}
|
||||
#a {
|
||||
top: 150px;
|
||||
left: 230px;
|
||||
top: 148px;
|
||||
left: 239px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
flex: none;
|
||||
}
|
||||
#b {
|
||||
top: 150px;
|
||||
left: 283px;
|
||||
top: 148px;
|
||||
left: 293px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
|
|
@ -41,8 +41,8 @@
|
|||
flex: none;
|
||||
}
|
||||
#c {
|
||||
top: 150px;
|
||||
left: 336px;
|
||||
top: 148px;
|
||||
left: 347px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
|
|
@ -63,4 +63,5 @@
|
|||
<div style="position:absolute" id="b"></div>
|
||||
<div style="position:absolute" id="c"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
<body>
|
||||
<div id="test">
|
||||
<div id="test">
|
||||
<p style="background:green;top:0px;height:300px;left:0px;height:300px;width:50px;">damer</p>
|
||||
<p style="top:0px;left:50px;height:300px;background:Red;width:51px;">damer</p>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,6 @@
|
|||
<link href="mailto:zhangcs_423@163.com" rel="author" title="Chunsheng Zhang">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
|
|
@ -16,22 +13,16 @@
|
|||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
div {
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
#flex {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
flex: 2 0 auto;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 160px;
|
||||
width: 254px;
|
||||
top: 73px;
|
||||
left: 166.5px;
|
||||
width: 253px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -39,9 +30,8 @@
|
|||
<p>This case tests that flex items flexibility</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
<div></div>
|
||||
<div id="flex"></div>
|
||||
<div></div>
|
||||
</section>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -14,14 +14,13 @@ ul {
|
|||
}
|
||||
li {
|
||||
color: white;
|
||||
margin: 0 3px 0 0;
|
||||
margin: 0;
|
||||
width: 3.3333em;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><ul>
|
||||
<li>EFGH</li>
|
||||
<li>ABCD</li>
|
||||
<li>IJKL</li>
|
||||
<li>EFGH</li><li>ABCD</li><li>IJKL</li>
|
||||
</ul>
|
||||
</body></html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | flexcontainer vs generated content</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<style>
|
||||
div {
|
||||
content: "xxx";
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div></div>
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | min-height: auto</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 602px;
|
||||
}
|
||||
div {
|
||||
background: #3366cc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
p {
|
||||
background: yellow;
|
||||
margin: 1em 1em 2em;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | min-width: auto</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 602px;
|
||||
}
|
||||
div {
|
||||
background: #3366cc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
div::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
background: yellow;
|
||||
margin: 1em;
|
||||
min-width: auto;
|
||||
width: auto;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
</div>
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
.test {
|
||||
width: 300px;
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
.test {
|
||||
width: 300px;
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
<link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk">
|
||||
<link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins">
|
||||
<style>
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!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;
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
@ -5,10 +5,10 @@
|
|||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: red;
|
||||
margin: 1em 0;
|
||||
border: 1px solid black;
|
||||
text-align: right;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
@ -16,16 +16,14 @@
|
|||
color: white;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see all the cells are arraged horizontally and the order of cells are reversed.</p>
|
||||
<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>
|
||||
<span>forth</span><span>third</span><span>second</span><span>first</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flexible Box Test: display proprety - inline-flex</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;
|
||||
}
|
||||
.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>
|
||||
|
|
@ -23,10 +23,7 @@
|
|||
<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>
|
||||
<span class="first">forth</span><span class="second">third</span><span class="third">second</span><span class="forth">first</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue