mirror of
https://github.com/servo/servo.git
synced 2025-08-12 00:45: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,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: #5555FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a purple square below.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a green square below with a vertical scrollbar.</li>
|
||||
<li>You should be able to drag the scrollbars</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
}
|
||||
.region {
|
||||
margin: .5em;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see two green squares below.</li>
|
||||
</ol>
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.translucent {
|
||||
color: #5555FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.opaque {
|
||||
color: blue;
|
||||
/*a light-ish blue, to give us a nice purple when alpha-blended with red*/
|
||||
opacity: 1;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 180px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see four alternating purple and blue rectangles below.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">
|
||||
<div class="translucent">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="translucent">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br>xxxxx<br>xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
#content-child {
|
||||
position: absolute;
|
||||
color: green;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a dark green square in the middle of a light green square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<div id="content-child">
|
||||
xxxx
|
||||
xxxx
|
||||
xxxx
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#region {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square in the gray box.</li>
|
||||
<li>You should see no red.</li>
|
||||
</ol>
|
||||
<dialog id="region">
|
||||
<div id="content"></div>
|
||||
</dialog>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.show();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0px;
|
||||
background-color: green;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square inside a gray square.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<dialog id="content"></dialog>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.show();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
z-index: 42;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
opacity: 0.9;
|
||||
color: red;
|
||||
}
|
||||
#region-parent {
|
||||
background-color: blue;
|
||||
float: left;
|
||||
}
|
||||
#region {
|
||||
opacity: 0.5;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#region p {
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red or blue.</li>
|
||||
<li>Test passes if you see a purple square.</li>
|
||||
</ol>
|
||||
<div id="region-parent">
|
||||
<div id="region">
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
#region {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border: 10px solid lime;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a dark green square with a light green border around its top half.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square in the gray box.</li>
|
||||
<li>You should see no red.</li>
|
||||
</ol>
|
||||
<dialog id="region">
|
||||
<div id="content"></div>
|
||||
</dialog>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.showModal();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: flowing modal dialog elements in region</title>
|
||||
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
|
||||
<style>
|
||||
#content {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<dialog id="content"></dialog>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dialog = document.getElementsByTagName('dialog')[0];
|
||||
dialog.showModal();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.back {
|
||||
z-index: 1;
|
||||
}
|
||||
.middle {
|
||||
z-index: 10;
|
||||
}
|
||||
.front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a blue square, a green square and a yellow square.</li>
|
||||
</ol>
|
||||
<div class="right front"></div>
|
||||
<div class="left back"></div>
|
||||
<div class="center middle region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
#container {
|
||||
opacity: 0.7;
|
||||
}
|
||||
#container > div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
ol {
|
||||
margin-left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a blue square, a green square and a yellow square.</li>
|
||||
</ol>
|
||||
<div id="container">
|
||||
<div class="left"></div>
|
||||
<div class="center region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.region p{
|
||||
height: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: relative;
|
||||
opacity: .7;
|
||||
}
|
||||
#container > div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.center {
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.right {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see three colored overlapping squares, from back to front: a green square, a blue square and a yellow square.</li>
|
||||
</ol>
|
||||
<div id="container">
|
||||
<div class="left region">
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx<br>
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="center"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.center {
|
||||
top: -75px;
|
||||
left: 25px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.right {
|
||||
top: -150px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
#region {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
/* the properties below are needed to force the region in creating a stacking context */
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#dummy {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -75px;
|
||||
margin-left: 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see four colored overlapping squares, from back to front: a purple square, a green square, a blue square and a yellow square.</li>
|
||||
</ol>
|
||||
|
||||
<div id="region">
|
||||
<div class="left"></div>
|
||||
<div class="center"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<div id="dummy"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
#front {
|
||||
z-index: 10;
|
||||
color: blue;
|
||||
}
|
||||
#back {
|
||||
z-index: 1;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.region {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
opacity: .999;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#front-region {
|
||||
margin-top: -50px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>You should see two colored overlapping squares: a green square on top of a blue square.</li>
|
||||
</ol>
|
||||
<div class="region">
|
||||
<span id="front">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</span>
|
||||
</div>
|
||||
<div id="front-region" class="region">
|
||||
<span id="back">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue