Auto merge of #8152 - frewsxcv:reftests, r=jdm

Use wptrunner for some old-style reftests.

Part of #5618

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/8152)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-10-23 08:51:29 -06:00
commit 6f59acdd0a
114 changed files with 1386 additions and 66 deletions

File diff suppressed because it is too large Load diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View file

@ -0,0 +1,175 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>
<link rel='match' href='acid1_b.html'>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>
display/box/float/clear test
</title>
<style type="text/css">
/* last modified: 1 Dec 98 */
html {
font: 10px/1 Verdana, sans-serif;
background-color: blue;
color: white;
}
body {
margin: 1.5em;
border: .5em solid black;
padding: 0;
width: 48em;
background-color: white;
}
dl {
/* overflow: hidden; disable margin collapse, but incorrectly doesn't work in servo --pcwalton */
margin: 0;
border: 0;
padding: .5em;
}
dt {
background-color: rgb(204,0,0);
margin: 0;
padding: 1em;
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
height: 28em;
border: .5em solid black;
float: left;
}
dd {
float: right;
margin: 0 0 0 1em;
border: 1em solid black;
padding: 1em;
width: 34em;
height: 27em;
}
ul {
margin: 0;
border: 0;
padding: 0;
}
li {
display: block; /* i.e., suppress marker */
color: black;
height: 9em;
width: 5em;
margin: 0;
border: .5em solid black;
padding: 1em;
float: left;
background-color: #FC0;
}
#bar {
background-color: black;
color: white;
width: 41.17%; /* = 14em */
border: 0;
margin: 0 1em;
}
#baz {
margin: 1em 0;
border: 0;
padding: 1em;
width: 10em;
height: 10em;
background-color: black;
color: white;
}
form {
margin: 0;
display: inline;
}
p {
margin: 0;
}
form p {
line-height: 1.9;
}
blockquote {
margin: 1em 1em 1em 2em;
border-width: 1em 1.5em 2em .5em;
border-style: solid;
border-color: black;
padding: 1em 0;
width: 5em;
height: 9em;
float: left;
background-color: #FC0;
color: black;
}
address {
font-style: normal;
}
h1 {
background-color: black;
color: white;
float: left;
margin: 1em 0;
border: 0;
padding: 1em;
width: 10em;
height: 10em;
font-weight: normal;
font-size: 1em;
}
</style>
</head>
<body>
<dl>
<dt>
</dt>
<dd>
<ul>
<li>
</li>
<li id="bar">
<p>
</p>
<form action="./" method="get">
<p>
</p>
<p>
</p>
</form>
</li>
<li>
</li>
<li id="baz">
</li>
</ul>
<blockquote>
<address>
</address>
</blockquote>
<h1>
</h1>
</dd>
</dl>
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
</p>
</body></html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
border: none;
}
body {
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body><img src="acid1.png"></body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='border_spacing_empty_table_ref.html'>
<meta charset="UTF-8">
<style>
body {
background: yellow;
}
table {
border-spacing: 100px;
background: darkblue;
}
</style>
</head>
<body>
<table></table>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background: yellow;
}
</style>
</head>
<body>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='border_style_none_b.html'>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
border-top-width: 3px;
border-top-style: none;
}
</style>
</head>
<body><img src="png_rgba_colorspace_a.png"></body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
border-top-width: 0px;
}
</style>
</head>
<body><img src="png_rgba_colorspace_a.png"></body>
</html>

View file

@ -0,0 +1,12 @@
<link rel='match' href='box_shadow_bg_ref.html'>
<div></div>
<style>
div {
width: 100px;
height: 100px;
box-shadow: 0 20px 0 0 red;
background-color: rgba(0,0,0,0.7);
}
</style>

View file

@ -0,0 +1,16 @@
<div></div><span></span>
<style>
div {
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.7);
}
span {
background-color: red;
width: 100px;
height: 20px;
display: block;
}
</style>

View file

@ -0,0 +1,20 @@
<head>
<link rel='match' href='box_shadow_border_box_ref.html'>
<!-- Tests that the entire border-box is shadowed, not just the content box. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border-left: solid green 10px;
border-right: solid green 10px;
box-shadow: 20px 10px;
}
</style>
</head>
<body>
<section></section>
</body>

View file

@ -0,0 +1,30 @@
<head>
<!-- Tests that the entire border-box is shadowed, not just the content box. -->
<style>
section {
position: absolute;
}
#a {
width: 120px;
height: 100px;
top: 110px;
left: 120px;
background: black;
}
#b {
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border-left: solid green 10px;
border-right: solid green 10px;
background: white;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>

View file

@ -0,0 +1,12 @@
<link rel='match' href='box_shadow_inset_bg_ref.html'>
<div></div>
<style>
div {
width: 100px;
height: 100px;
box-shadow: inset 0 20px 0 0 red;
background-color: rgba(0,0,0,0.7);
}
</style>

View file

@ -0,0 +1,16 @@
<div><span></span></div>
<style>
div {
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.7);
}
span {
background-color: red;
width: 100px;
height: 20px;
display: block;
}
</style>

View file

@ -0,0 +1,17 @@
<head>
<link rel='match' href='box_shadow_paint_order_ref.html'>
<!-- Tests paint order of multiple box shadows. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
box-shadow: -25px -25px purple, -50px -50px turquoise;
}
</style>
</head>
<body>
<section></section>
</body>

View file

@ -0,0 +1,30 @@
<head>
<!-- Tests paint order of multiple box shadows. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
}
#a {
top: 50px;
left: 50px;
background: turquoise;
}
#b {
top: 75px;
left: 75px;
background: purple;
}
#c {
top: 100px;
left: 100px;
background: white;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
</body>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel='match' href='box_sizing_border_box_ref.html'>
<body>
<div style="width: 256px; height: 256px; background: purple; border: 8px solid blue; box-sizing: border-box;"></div>
<div style="width: 240px; height: 240px; background: purple; border: 8px solid blue;"></div>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<body>
<div style="width: 240px; height: 240px; background: purple; border: 8px solid blue;"></div>
<div style="width: 240px; height: 240px; background: purple; border: 8px solid blue;"></div>
</body>
</html>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<link rel='match' href='box_sizing_sanity_check_ref.html'>
<body>
<div style="box-sizing: border-box; float: left; background: yellow;">Heeheehee</div>
</body>
</html>

View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<body>
<div style="float: left; background: yellow;">Heeheehee</div>
</body>
</html>

View file

@ -0,0 +1,11 @@
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<title>br reference</title>
</head>
<body>
<div>A</div>
<div>B</div>
</body>
</html>

View file

@ -0,0 +1,11 @@
<!doctype HTML>
<html>
<head>
<link rel='match' href='br-ref.html'>
<meta charset="UTF-8">
<title>br test</title>
</head>
<body>
A<br>B
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<div id="outer">
<div id="inner">
</div>
</div>
<style>
#outer {
height: 100px;
width: 200px;
}
#inner {
height: 100%;
width: 110px;
background-color: green;
}
</style>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel='match' href='calc-basic-ref.html'>
<div id="outer">
<div id="inner">
</div>
</div>
<style>
#outer {
height: 100px;
width: 200px;
}
#inner {
height: 100%;
width: calc(50px + 30%);
background-color: green;
}
</style>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='canvas_as_block_element_ref.html'>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<title>Canvas is displayed as a block-level element</title>
<canvas id="c"></canvas>
<script>
var canvas = document.getElementById('c');
canvas.width = 100;
canvas.height = 100;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 100, 100);
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
background: #ff0000;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<body>
<link rel='match' href='canvas_linear_gradient_ref.html'>
<style>
html, body {
margin: 0;
padding: 0;
}
canvas {
background-color: green;
}
</style>
<canvas id="c" width="200" height="200">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(10, 0, 190, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "yellow");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 180, 180);
</script>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<body>
<style>
html, body {
margin: 0;
padding: 0;
}
section, div {
width: 180px;
height: 180px;
}
section {
padding: 10px;
background-color: green;
}
div {
background: linear-gradient(to right, red, yellow);
}
</style>
<section><div></div></section>
</body>
</html>

View file

@ -0,0 +1 @@
<div style="font-family: Arial">Hello, world!</div>

View file

@ -0,0 +1,2 @@
<link rel='match' href='case-insensitive-font-family-ref.html'>
<div style="font-family: arial">Hello, world!</div>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='clear_generated_content_table_ref.html'>
<style>
.clearit:after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class=clearit>
<div style="float: left;">x</div>
</div>
<div style="float: left;">y</div>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<body>
<div class=clearit>
<div style="float: left;">x</div>
</div>
<div style="display: table; clear: both;"></div>
<div style="float: left;">y</div>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='clip_ref.html'>
<!-- Tests that various `clip` values per CSS 2.1 work. -->
<style>
section {
position: absolute;
padding: 32px;
width: 64px;
height: 64px;
background: green;
border: solid 32px red;
}
section:before {
content: "";
display: block;
padding: 0;
width: 64px;
height: 64px;
background: blue;
}
#a {
top: 0;
left: 0;
clip: rect(auto, auto, auto, auto);
}
#b {
top: 192px;
left: 0;
clip: rect(32px, auto, auto, 128px);
}
#c {
top: 0;
left: 192px;
clip: rect(32px, 128px, 64px, 0);
}
#d {
top: 192px;
left: 192px;
clip: rect(64px, 0, 64px, 0);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
<section id=d></section>
</body>
</html>

View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that various `clip` values per CSS 2.1 work. -->
<style>
section {
position: absolute;
}
#a {
top: 0;
left: 0;
width: 192px;
height: 192px;
background: red;
}
#b {
top: 32px;
left: 32px;
width: 128px;
height: 128px;
background: green;
}
#c {
top: 64px;
left: 64px;
width: 64px;
height: 64px;
background: blue;
}
#d {
top: 32px;
left: 192px;
width: 32px;
height: 32px;
background: red;
}
#e {
top: 32px;
left: 224px;
width: 96px;
height: 32px;
background: green;
}
#f {
top: 224px;
left: 128px;
width: 64px;
height: 160px;
background: red;
}
#g {
top: 224px;
left: 128px;
width: 32px;
height: 128px;
background: green;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
<section id=d></section>
<section id=e></section>
<section id=f></section>
<section id=g></section>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='counters_nested_ref.html'>
<!-- Tests that `counters` works with nested counters. -->
<style>
section {
counter-reset: section 0;
}
h1, h2, h3 {
counter-increment: section 1;
font-size: 24px;
}
h1:before, h2:before, h3:before {
content: counters(section, ".") ". ";
}
</style>
</head>
<body>
<section>
<h1>Foo</h1>
<section>
<h2>Boo</h2>
<h2>Quux</h2>
<section>
<h3>Blah</h3>
</section>
</section>
<h1>Bar</h1>
<section></section>
<h2>Boo</h2>
<h2>Quux</h2>
<h1>Baz</h1>
</section>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `counters` works with nested counters. -->
<style>
h1, h2, h3 {
font-size: 24px;
}
</style>
</head>
<body>
<section>
<h1>1. Foo</h1>
<section>
<h2>1.1. Boo</h2>
<h2>1.2. Quux</h2>
<section>
<h3>1.2.1. Blah</h3>
</section>
</section>
<h1>1.3. Bar</h1>
<section></section>
<h2>1.1. Boo</h2>
<h2>1.2. Quux</h2>
<h1>1.3. Baz</h1>
</section>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='counters_simple_ref.html'>
<!-- Tests that `counter` works. -->
<style>
h1, h2, h3 {
font-size: 24px;
}
h1 {
counter-increment: section 1;
counter-reset: subsection 0;
}
h1:before {
content: counter(section) ". ";
}
h2 {
counter-increment: subsection 1;
counter-reset: subsubsection 0;
}
h2:before {
content: counter(section) "." counter(subsection) ". ";
}
h3 {
counter-increment: subsubsection;
}
h3:before {
content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
}
</style>
</head>
<body>
<h1>Foo</h1>
<h2>Boo</h2>
<h2>Quux</h2>
<h3>Blah</h3>
<h1>Bar</h1>
<h2>Boo</h2>
<h2>Quux</h2>
<h1>Baz</h1>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `counter` works. -->
<style>
h1, h2, h3 {
font-size: 24px;
}
</style>
</head>
<body>
<h1>1. Foo</h1>
<h2>1.1. Boo</h2>
<h2>1.2. Quux</h2>
<h3>1.2.1. Blah</h3>
<h1>2. Bar</h1>
<h2>2.1. Boo</h2>
<h2>2.2. Quux</h2>
<h1>3. Baz</h1>
</body>
</html>

View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='data_img_b.html'>
<meta charset="UTF-8" />
</head>
<body>
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAM4AAADOCAMAAABBwc32AAAABGdBTUEAALGPC/xhBQAAAAFzUkdC
AK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRF
////+fn58fHx4ODgGhoaAAAAAwMDpKSk9vb29PT0xcXFFhYWAQEBZmZm+/v7TExMERER6Ojop6en
Dw8PBQUFhISELi4uYGBg/v7+r6+vXFxcrq6uAgIC2NjYyMjIaGho7+/vGBgYtLS0dXV19fX15eXl
a2trgYGBc3NzJycn+Pj4DAwMGxsb/Pz88PDw6urqvr6+Pj4+39/fEhISkpKS0dHRBAQEg4OD09PT
uLi4cnJyBgYGe3t7Pz8/qampq6urfX19jo6OMjIyCQkJhYWFl5eXWFhY2dnZVFRUSEhI6+vrkJCQ
CAgI4uLiKCgo0NDQh4eH/f39Wlpaubm5LCwsFxcXHR0dPDw8ZGRkhoaGFBQUrKysTU1NSUlJzs7O
dHR0DQ0NZWVlxsbG3Nzct7e3UFBQ6enpJCQkIyMjRUVFXV1d0tLSwcHBDg4On5+fgICAgoKC+vr6
7e3tS0tLV1dXNjY2ISEh9/f3i4uLw8PDoKCgCgoKmpqaeHh4ExMTb29vGRkZHBwc1dXVTk5OioqK
PT09oaGhLy8vJSUlzMzMYWFhk5OT8/PzQEBAz8/PHh4ed3d3iIiIEBAQRkZGVlZW4+PjpqambGxs
3t7ejY2N4eHhU1NTT09Po6OjHx8f5ubmtra2SkpKWVlZ1tbWlJSUICAgQkJCY2NjOjo6bm5uCwsL
mZmZIiIiurq6enp6tbW17u7uUVFRycnJREREbW1ty8vLVVVV1NTUJiYm3d3dMzMzMDAwOTk58vLy
NDQ0sbGxnZ2dx8fH5OTkmJiYODg4BwcHnJycwsLCpaWlQUFB5+fnkZGRlpaWX19fNzc3jIyMLS0t
wMDAaWlpsrKyv7+/29vbvLy8xMTEZ2dnQ0NDKSkplZWVqqqqNTU1m5ubs7OzfHx8f39/ampqu7u7
UlJSOzs7sLCw2traj4+PFRUVfn5+dnZ2R0dHra2toqKieXl5qKiocXFxMTExXl5eKysr7Ozsvb29
zc3NiYmJW1tbKioqysrKYmJi19fXnp6ecHBw33iQwQAAAAFiS0dEAIgFHUgAAA0ySURBVHja7V1p
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
AABJRU5ErkJggg==" />
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<img src="rust_logo.png" />
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='empty_cells_ref.html'>
<!-- Tests that `empty-cells` works—in particular, that the definition of emptiness is correct. -->
<style>
table {
empty-cells: hide;
}
section {
float: right;
}
nav {
position: absolute;
}
</style>
</head>
<body>
<table border=3>
<tr><td>Yo</td><td>Howdy</td><td><section>&nbsp;</section></td><td></td></tr>
<tr><td>Later</td><td><nav></nav></td><td>See ya</td><td>Aloha</td></tr>
<tr><td></td><td>Sayonara</td><td></td><td><span></span></td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `empty-cells` works—in particular, that the definition of emptiness is correct. -->
<style>
.empty {
border: none;
}
</style>
</head>
<body>
<table border=3>
<tr><td>Yo</td><td>Howdy</td><td></td><td class=empty></td></tr>
<tr><td>Later</td><td class=empty></td><td>See ya</td><td>Aloha</td></tr>
<tr><td class=empty></td><td>Sayonara</td><td class=empty></td><td></td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,9 @@
<html>
<head>
<link rel='match' href='external_media_query_ref.html'>
<link rel="stylesheet" type="text/css" href="css/displaynone.css" media="print">
</head>
<body>
Hello
</body>
</html>

View file

@ -0,0 +1,5 @@
<html>
<body>
Hello
</body>
</html>

View file

@ -0,0 +1,13 @@
<html>
<head>
<link rel='match' href='external_media_query_ref.html'>
<style type="text/css" media="print">
body {
display: none;
}
</style>
</head>
<body>
Hello
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='filter_inline_ref.html'>
<style type="text/css">
.ex {
<!-- display: block; -->
-webkit-filter: opacity(25%);
-moz-filter: opacity(25%);
filter: opacity(25%);
}
</style>
</head>
<body>
<img class="ex" src="rust.png">
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ex {
display: block;
-webkit-filter: opacity(25%);
-moz-filter: opacity(25%);
filter: opacity(25%);
}
</style>
</head>
<body>
<img class="ex" src="rust.png">
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='filter_opacity_ref.html'>
<style>
img {
filter: opacity(0.5);
display: block;
}
</style>
</head>
<body>
<img src=test.jpeg>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
display: block;
}
</style>
</head>
<body>
<img src=test.jpeg>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='filter_sepia_ref.html'>
<style>
section {
filter: sepia(100%);
display: block;
width: 100px;
height: 100px;
background: #ff00ff;
}
</style>
</head>
<body>
<section></section>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: block;
width: 100px;
height: 100px;
background: #938567;
}
</style>
</head>
<body>
<section></section>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='first_child_pseudo_b.html'>
<title>:first-child test</title>
<style type="text/css">
html { background: red;}
html:first-child { background: yellow; }
p { width: 20px; height: 20px; background: orange; float: left; margin-left: 10px; }
div { clear: both; }
#p1, #p2, #p3 { background: red; }
#d1 > *:first-child { background: green }
#d2 > *:first-child { background: green }
#d3 > *:first-child { background: green }
#p4 { background: green; }
#d4 > *:first-child { background: red }
</style>
</head>
<body>
<div id="d1"><p id="p1"> </p><p> </p></div>
<div id="d2"> <p id="p2"> </p><p> </p></div>
<div id="d3"><!-- comment --><p id="p3"> </p><p> </p></div>
<div id="d4"><span> </span><p id="p4"> </p><p> </p></div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>:first-child test</title>
<style type="text/css">
html { background: yellow;}
p { width: 20px; height: 20px; background: orange; float: left; margin-left: 10px; }
div { clear: both; }
#p1 { background: green; }
#p2 { background: green; }
#p3 { background: green; }
#p4 { background: green; }
</style>
</head>
<body>
<div id="d1"><p id="p1"> </p><p> </p></div>
<div id="d2"> <p id="p2"> </p><p> </p></div>
<div id="d3"><!-- comment --><p id="p3"> </p><p> </p></div>
<div id="d4"><span> </span><p id="p4"> </p><p> </p></div>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='first_of_type_pseudo_b.html'>
<title>:first-of-type test</title>
<style type="text/css">
html { background: red; }
/* Should match according to Selectors Level 4 (changed from Level 3) */
html:first-of-type { background: white; }
div > p,
div > div,
div > address {
float: left;
width: 20px;
height: 20px;
margin: 0px;
margin-right: 10px;
padding: 0px;
}
div > p {
background: white;
}
div > div,
div > address {
background: black;
}
body > div { clear: both; margin-bottom: 10px; }
#d1 > .ok { background: red; }
#d1 > *:first-of-type { background: green }
</style>
</head>
<body>
<div id="d1">
<p class="ok"> </p>
<div class="ok"> </div>
<div> </div>
<p> </p>
<address class="ok"> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
<address> </address>
<address> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
</div>
</body>
</html>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>:first-of-type test</title>
<style type="text/css">
div > p,
div > div,
div > address {
float: left;
width: 20px;
height: 20px;
margin: 0px;
margin-right: 10px;
padding: 0px;
}
div > p {
background: white;
}
div > div,
div > address {
background: black;
}
body > div { clear: both; margin-bottom: 10px; }
#d1 > .ok { background: green; }
</style>
</head>
<body>
<div id="d1">
<p class="ok"> </p>
<div class="ok"> </div>
<div> </div>
<p> </p>
<address class="ok"> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
<address> </address>
<address> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_clearance_ref.html'>
</head>
<body>
<div style="width: 256px;">
<div style="width: 237px; float: left;">hello</div>
<div style="clear: both;">darkness</div>
<div style="float: left;">my old friend</div>
</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_clearance_intrinsic_width_ref.html'>
<style>
#nav-your-account {
background: lightblue;
display: inline-block;
}
.nav-button-title {
float: left;
clear: both;
}
</style>
</head>
<body>
<a id="nav-your-account">
<div class="nav-button-title">Hello.</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
</a>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style>
#nav-your-account {
background: lightblue;
display: inline-block;
}
</style>
</head>
<body>
<a id="nav-your-account">
<div class="nav-button-title">Hello.</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
<div class="nav-button-title">Account</div>
</a>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 256px;">
<div style="width: 237px; float: left;">hello</div>
<div style="clear: both;">darkness</div>
<div>my old friend</div>
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_intrinsic_height_ref.html'>
<style type="text/css">
.otherprojects {
background-color: red;
float: left;
width: 200px;
}
.otherprojects-item {
background-color: yellow;
float: left;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="otherprojects">
<div class="otherprojects-item">
</div>
</div>&nbsp;
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.otherprojects {
background-color: red;
width: 200px;
}
.otherprojects-item {
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="otherprojects">
<div class="otherprojects-item">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_intrinsic_width_ref.html'>
<style type="text/css">
body {
font-family: 'ahem';
font-size: 100px;
margin: 0;
line-height: 1;
}
.fl {
float: left;
}
.green {
color: green;
}
</style>
</head>
<body>
<div class="fl green">X X</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fl {
float: left;
}
.green {
background-color: green;
}
.fixed {
width: 100px;
height: 100px;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div class="fl green fixed"></div>
<div class="fl fixed"></div>
<div class="fl green fixed"></div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_overflow_area_ref.html'>
<style>
body, html {
margin: 0;
}
</style>
</head>
<body>
<div style="transformX(0)"><div style="float: left">Y</div></div>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
}
</style>
</head>
<body>
<div><div style="float: left">Y</div></div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel='match' href='float_positioned_pseudo_stacking_context_ref.html'>
<style>
html, body {
margin: 0; padding: 0;
}
div {
width: 100px;
height: 100px;
}
#a {
position: absolute;
top: 20px;
left: 20px;
background: red;
}
#b {
float: left;
position: relative;
background: green;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
</body>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0; padding: 0;
}
div {
width: 100px;
height: 100px;
}
#a {
position: absolute;
top: 20px;
left: 20px;
background: red;
}
#b {
position: relative;
background: green;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
</body>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_right_intrinsic_width_ref.html'>
<style type="text/css">
.fr {
float: right;
}
.green {
color: green;
}
body {
font-family: 'ahem';
font-size: 100px;
margin: 0;
}
</style>
</head>
<body>
<div class="fr green">X X</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fr {
float: right;
}
.green {
background-color: green;
}
.fixed {
width: 100px;
height: 100px;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div class="fr green fixed"></div>
<div class="fr fixed"></div>
<div class="fr green fixed"></div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_table_ref.html'>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
}
table {
font-family: 'ahem';
font-size: 100px;
color: red;
float: right;
line-height: 1;
border-spacing: 0;
}
td {
padding: 0;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>X</td>
</tr>
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
}
div {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='float_under_top_margin_ref.html'>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin-top: 64px;
}
#foo, #bar {
height: 35px;
width: 35px;
}
#foo {
background: blue;
float: right;
}
#bar {
background: gold;
}
</style>
</head>
<body>
<div id=foo></div><div id=bar></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding-top: 64px;
}
#foo, #bar {
height: 35px;
width: 35px;
}
#foo {
background: blue;
float: right;
}
#bar {
background: gold;
}
</style>
</head>
<body>
<div id=foo></div><div id=bar></div>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='floated_generated_content_b.html'>
<style>
.stand:before {
content: "";
float: left;
}
</style>
</head>
<body>
<div class="stand">Toast! Toast! Toast!</div>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="stand">Toast! Toast! Toast!</div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='floated_list_item_ref.html'>
<!-- Tests that list items can be floated. -->
<style>
ul div {
display: list-item;
float: left;
list-style: none;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</ul>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that list items can be floated. -->
<style>
ul div {
float: left;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</ul>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='floated_table_with_margin_ref.html'>
<title>Rust - Wikipedia, the free encyclopedia</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<table style="float: right; margin: 0px 0px 0em 1em; width: 100px; background: red;">
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Rust - Wikipedia, the free encyclopedia</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div style="float: right"><table style="margin: 0px 0px 0em 1em; width: 100px; background: red;">
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
</table></div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!doctype html>
<html>
<head>
<link rel='match' href='focus_selector_ref.html'>
<meta charset="UTF-8">
<style>
input:focus {
outline: 2px solid orange;
}
</style>
</head>
<body>
<input id="a">
<input id="b">
<script>
document.getElementById("a").focus();
</script>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
#a {
outline: 2px solid orange;
}
</style>
</head>
<body>
<input id="a">
<input id="b">
</body>
</html>

View file

@ -0,0 +1,3 @@
<link rel='match' href='font_advance_ref.html'>
<!-- Not a reftest, but a crashtest for #4614 -->
a<div id="test" style="font-size: 100000px">Hello world</div>

View file

@ -0,0 +1,2 @@
<!-- Not a reftest, but a crashtest for #4614 -->
a<div id="test" style="font-size: 100000px">Hello world</div>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='font_color_attribute_ref.html'>
</head>
<body>
<p><font color=blue>Servo</font></p>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><font style="color: blue">Servo</font></p>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='font_face_attribute_ref.html'>
</head>
<body>
<p><font face=monospace>Servo</font></p>
<p><font id=1>Servo</font></p>
<script>
document.getElementById("1").face = "monospace";
</script>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body style="font-family: monospace">
<p>Servo</p>
<p>Servo</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='font_style_ref.html'>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic(oblique).</p>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="oblique">This is a paragraph, italic(oblique).</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<head>
<style type="text/css">
body {margin : 0px}
.start {background-color : gray; height : 600px}
.half {background-color : red; height : 50%}
.quarter {background-color : rgb(250, 125, 0); height : 25%}
.eighth {background-color : yellow; height : 12.5%}
.sixteenth {background-color : green; height : 6.25%}
.thirtysecond {background-color : blue; height : 3.125%}
.sixtyfourth {background-color : purple; height : 1.5625%}
</style>
</head>
<body>
<div class="start">
<div class="half"></div>
<div class="quarter"></div>
<div class="eighth"></div>
<div class="sixteenth"></div>
<div class="thirtysecond"></div>
<div class="sixtyfourth"></div>
</div>
</body>

View file

@ -0,0 +1,23 @@
<head>
<link rel="stylesheet" href="reset.css" />
<link rel='match' href='height_compute.html'>
<style type="text/css">
.start {background-color : gray; height : 600px}
.half {background-color : red; height : 50%}
.quarter {background-color : rgb(250, 125, 0); height : 25%}
.eighth {background-color : yellow; height : 12.5%}
.sixteenth {background-color : green; height : 6.25%}
.thirtysecond {background-color : blue; height : 3.125%}
.sixtyfourth {background-color : purple; height : 1.5625%}
</style>
</head>
<body>
<div class="start">
<div class="half"></div>
<div class="quarter"></div>
<div class="eighth"></div>
<div class="sixteenth"></div>
<div class="thirtysecond"></div>
<div class="sixtyfourth"></div>
</div>
</body>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel='match' href='hide_after_create_ref.html'>
<style type="text/css">
.hidden {
display: none;
}
body {
background-color: green;
}
iframe {
background-color: red;
border: 0;
}
</style>
<body>
<iframe id="iframe" src="about:blank"></iframe>
</body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("iframe").classList.add("hidden");
document.documentElement.classList.remove("reftest-wait");
}
</script>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<style type="text/css">
body {
background-color: green;
}
</style>
<body>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='img_block_display_ref.html'>
<style type="text/css">
body {
margin: 0;
font-family: 'ahem';
font-size: 50px;
line-height: 1;
color: red;
}
img {
display: block;
}
</style>
</head>
<body>
<div><img src="100x100_green.png"></div>
<div>A</div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.ahem {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div><img src="100x100_green.png"></div>
<div class="ahem"></div>
</body>
</html>

View file

@ -0,0 +1,7 @@
<!doctype html>
<link rel='match' href='img_dynamic_remove_ref.html'>
Image dynamic remove
<img src=400x400_green.png>
<script>
document.getElementsByTagName("img")[0].removeAttribute("src");
</script>

View file

@ -0,0 +1,3 @@
<!doctype html>
Image dynamic remove
<img>

View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<link rel='match' href='img_padding_b.html'>
<body>
<img src="rust-0.png" style='padding-top: 100px; border: 1px solid black; position:relative; height: 206px; width: 206px; left:0px; top: 0px;'>
</body>
</html>

View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<img src="rust-0.png" style='padding-top: 100px; border: 1px solid black;'>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more