mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35: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,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout: Reference File</title>
|
||||
<link rel="author" title="swain" href="mailto:swainet@126.com"/>
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position:relative;
|
||||
width:400px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.error {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
#table {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
#table td {
|
||||
padding:0;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
#table td:first-child {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#table tr:last-child td {
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are 4 green rectangles and no red.</p>
|
||||
|
||||
<div id="container">
|
||||
<div class="error">
|
||||
<table id="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="background-color:green">cell1</td>
|
||||
<td style="background-color:limegreen">cell2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background-color:limegreen">cell3</td>
|
||||
<td style="background-color:green">cell4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout: Reference File</title>
|
||||
<link rel="author" title="swain" href="mailto:swainet@126.com"/>
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#table {
|
||||
width:400px;
|
||||
height:100px;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
#table td {
|
||||
padding:0;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
#table td:first-child {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#table tr:last-child td {
|
||||
height:30px;
|
||||
}
|
||||
|
||||
#table-wrapper {
|
||||
display:inline-block;
|
||||
clear:right;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align:top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are 4 green rectangles and no red.</p>
|
||||
|
||||
<div id="container">
|
||||
<div id="table-wrapper">
|
||||
<table id="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="background-color:green">cell1</td>
|
||||
<td style="background-color:limegreen">cell2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background-color:limegreen">cell3</td>
|
||||
<td style="background-color:green">cell4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<span>Inline</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS3 Grid Layout: Reference File</title>
|
||||
<link rel="author" title="swain" href="mailto:swainet@126.com"/>
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position:relative;
|
||||
width:400px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.error {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
#table {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
#table td {
|
||||
padding:0;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
#table td:first-child {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#table tr:first-child td {
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and no red.</p>
|
||||
|
||||
<div id="container">
|
||||
<div class="error">
|
||||
<table id="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>cell1</td>
|
||||
<td>cell2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cell3</td>
|
||||
<td style="background-color:green">cell4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS3 Grid Layout: Reference File</title>
|
||||
<link rel="author" title="swain" href="mailto:swainet@126.com"/>
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position:relative;
|
||||
width:400px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.error {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
#table {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
#table td {
|
||||
padding:0;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
#table td:first-child {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#table tr:first-child td {
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and no red.</p>
|
||||
|
||||
<div id="container">
|
||||
<div class="error">
|
||||
<table id="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>cell1</td>
|
||||
<td>cell2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cell3</td>
|
||||
<td style="background-color:green">cell4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
}
|
||||
|
||||
#blue {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
#yellow {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
#lime {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
#magenta {
|
||||
color: magenta;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div>
|
||||
<span id="blue">B</span><span id="yellow">Y</span>
|
||||
<br />
|
||||
<span id="lime">L</span><span id="magenta">M</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
#main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
|
||||
|
||||
<div id="main">
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Reference file text first letter should be green and margins do not collapse</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
p {
|
||||
/* Prevent collapsing body and paragraph margins. */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
<span class="green">T</span>he <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
|
||||
In addition, body and paragraph margins should <strong>not collapse</strong>.
|
||||
</p>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Reference</title>
|
||||
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
#caseTitle {
|
||||
margin: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
#grid {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
}
|
||||
.a {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
float: left;
|
||||
}
|
||||
.b {
|
||||
background: yellow;
|
||||
width: 50px;
|
||||
float: left;
|
||||
}
|
||||
.c {
|
||||
background: pink;
|
||||
width: 100px;
|
||||
clear: both;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div class="a"> </div>
|
||||
<div class="b"> </div>
|
||||
<div class="c"> </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Reference</title>
|
||||
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
#caseTitle {
|
||||
margin: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
#grid {
|
||||
margin: 0;
|
||||
width: 150px;
|
||||
}
|
||||
.a {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
float:left
|
||||
}
|
||||
.b {
|
||||
background: yellow;
|
||||
width: 50px;
|
||||
float:left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div class="a"> </div>
|
||||
<div class="b"> </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Reference</title>
|
||||
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
#caseTitle {
|
||||
margin: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
#grid {
|
||||
margin: 0;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background: yellow;
|
||||
position: relative;
|
||||
}
|
||||
.a {
|
||||
background: blue;
|
||||
height: 100px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.b1 {
|
||||
background: orange;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
}
|
||||
.b2 {
|
||||
background: cyan;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
}
|
||||
.c {
|
||||
background: pink;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
}
|
||||
.d {
|
||||
background: #eee;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div class="a"></div>
|
||||
|
||||
<div class="b1"></div>
|
||||
<div class="b2"></div>
|
||||
<div class="c"></div>
|
||||
<div class="d"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Reference</title>
|
||||
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#caseTitle {
|
||||
margin: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
#grid {
|
||||
width: 450px;
|
||||
position: relative;
|
||||
}
|
||||
.a {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
float:left
|
||||
}
|
||||
.b {
|
||||
background: yellow;
|
||||
width: 100px;
|
||||
float:left
|
||||
}
|
||||
.c {
|
||||
background: orange;
|
||||
width: 100px;
|
||||
float:left
|
||||
}
|
||||
.d {
|
||||
background: cyan;
|
||||
width: 100px;
|
||||
float:left
|
||||
}
|
||||
.e {
|
||||
background: pink;
|
||||
width: 50px;
|
||||
float:left
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div class="a"> </div>
|
||||
<div class="b"> </div>
|
||||
<div class="c"> </div>
|
||||
<div class="d"> </div>
|
||||
<div class="e"> </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Reference</title>
|
||||
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
#caseTitle {
|
||||
margin: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
#grid {
|
||||
margin: 0;
|
||||
width: 150px;
|
||||
color:white;
|
||||
}
|
||||
.a {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
float:left
|
||||
}
|
||||
.b {
|
||||
background: yellow;
|
||||
width: 50px;
|
||||
float:left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div class="a">up</div>
|
||||
<div class="b"> </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties</title>
|
||||
<link rel="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/>
|
||||
<style>
|
||||
#grid {
|
||||
position: relative;
|
||||
}
|
||||
.position {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#first-column-first-row {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: purple;
|
||||
}
|
||||
#third-column-first-and-second-rows {
|
||||
left: 60px;
|
||||
width: 30px;
|
||||
height: 60px;
|
||||
background-color: orange
|
||||
}
|
||||
#first-and-second-columns-second-row {
|
||||
top: 30px;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div class="position" id="first-column-first-row"></div>
|
||||
<div class="position" id="third-column-first-and-second-rows"></div>
|
||||
<div class="position" id="first-and-second-columns-second-row"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties accepting track listing as value</title>
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" />
|
||||
<style>
|
||||
#grid {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#first-column-first-row {
|
||||
width: 25px;
|
||||
height: 40px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#second-column-first-row {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
left: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
#first-column-second-row {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
top: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#second-column-second-row {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
top: 40px;
|
||||
left: 25px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
#first-and-second-column-third-row {
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
top: 70px;
|
||||
background-color: silver;
|
||||
}
|
||||
|
||||
#third-column-all-rows {
|
||||
left: 75px;
|
||||
height: 110px;
|
||||
width: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div class="absolute" id="first-column-first-row"></div>
|
||||
<div class="absolute" id="second-column-first-row"></div>
|
||||
<div class="absolute" id="first-column-second-row"></div>
|
||||
<div class="absolute" id="second-column-second-row"></div>
|
||||
<div class="absolute" id="first-and-second-column-third-row"></div>
|
||||
<div class="absolute" id="third-column-all-rows"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
p {
|
||||
color: green;
|
||||
/* Prevent collapsing body and paragraph margins. */
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
|
||||
Loading…
Add table
Add a link
Reference in a new issue