mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update CSS tests to revision d13905941293af83ea8c3c1750dba652e0423fb0
This commit is contained in:
Ms2ger
parent
b492a3e8b1
commit
5450053b02
842 changed files with 42936 additions and 27 deletions
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
overflow: hidden;
|
||||
max-width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares separated by a small vertical space. The squares should
|
||||
have a black outline, the top square should be blue and the bottom one should be green.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div>
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<style>
|
||||
article {
|
||||
color: blue;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.float {
|
||||
color: green;
|
||||
float: left;
|
||||
}
|
||||
.region {
|
||||
margin: 10px;
|
||||
width: 200px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two identical rows of colored squares. Each row should have three
|
||||
squares, from left to right as follows: blue, gray, green. The squares in a row should
|
||||
be flush to each other, but the two rows should have some space between them.<br>
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow">
|
||||
<div class="float">
|
||||
<div>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
xxxxx xxxxx xxxxx xxxxx xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow">
|
||||
<div class="float">
|
||||
<div>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
xxxxx xxxxx xxxxx xxxxx xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.spaced {
|
||||
margin: 1em 2em 3em 5em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
<li>The black-bordered rectangles should be separated by a small horizontal space</li>
|
||||
<li>The colored squares should be positioned roughly in the top-left area of their
|
||||
rectangles, but without being flush to any of its sides</li>
|
||||
</ul><br>
|
||||
You should see no red.
|
||||
<p></p>
|
||||
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div class="spaced float">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div><div class="bordered region">
|
||||
<article>
|
||||
<div class="break spaced">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.spaced {
|
||||
margin: 0 2em 3em 5em;
|
||||
color: green;
|
||||
}
|
||||
.float {
|
||||
margin-top: 1em;
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
/* float: left; is used to trigger shrink-to-fit sizing */
|
||||
float: left;;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
<li>The black-bordered rectangles should be separated by a small vertical space</li>
|
||||
<li>The green square should have its top edge flush with the top border of its
|
||||
containing rectangle</li>
|
||||
</ul>
|
||||
You should see no red.
|
||||
<p></p>
|
||||
|
||||
<div style="height: 125px;" class="bordered region">
|
||||
<article>
|
||||
<div class="spaced float">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div><div class="bordered region">
|
||||
<article>
|
||||
<div class="spaced">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
|
||||
<style>
|
||||
.flow {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
.big {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.small {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two green squares (one bigger and one smaller) and no red.</p>
|
||||
<div class="container">
|
||||
<div class="big region">
|
||||
<div class="flow">
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="small region">
|
||||
<div class="flow">
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
|
||||
<style type="text/css">
|
||||
.square {
|
||||
float: left;
|
||||
font-family: Ahem;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
margin-left: 10px;
|
||||
color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if:</p>
|
||||
<ul>
|
||||
<li>The two squares each contain five green horizontal stripes</li>
|
||||
<li>There are two green horizontal stripes below the square on right</li>
|
||||
<li>There is no red</li>
|
||||
</ul>
|
||||
<div class="square">
|
||||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
<div class="square">
|
||||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
|
||||
<style type="text/css">
|
||||
.green-rect {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see either two green squares or one vertical green rectangle. There should be no red.</p>
|
||||
<div class="green-rect"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
|
||||
<style type="text/css">
|
||||
.green-square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see either two green squares or one vertical green rectangle. There should be no red.</p>
|
||||
<div class="green-square"></div>
|
||||
<div class="green-square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
|
||||
<style type="text/css">
|
||||
.green-square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see two green squares and no red.</p>
|
||||
<div class="green-square"></div>
|
||||
<div class="green-square"></div>
|
||||
|
||||
</body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue