test: Add many reftests for parts of Acid2.

This commit is contained in:
Patrick Walton 2014-03-28 13:36:29 -07:00
parent 4c53a21aa3
commit 42170c7585
24 changed files with 446 additions and 3 deletions

View file

@ -5,6 +5,6 @@
<link rel="stylesheet" href="subdirectory/background_image.css">
</head>
<body>
<div class="test" style="width:200px; height:200px;"></div>
<div class="test" style="width:206px; height:206px;"></div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled FOOBIE BLETCH.</title>
<style>
#foo {
background: url(400x400_green.png);
background-position: 128px 0px;
width: 32px;
height: 32px;
margin-left: 0;
}
</style>
</head>
<body>
<div id=foo></div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled FOOBIE BLETCH.</title>
<style>
#foo {
background: url(400x400_green.png);
width: 32px;
height: 32px;
margin-left: 128px;
}
</style>
</head>
<body>
<div id=foo></div>
</body>
</html>

View file

@ -4,6 +4,6 @@
<title></title>
</head>
<body>
<img class="test" src="rust-0.png" style="width:200px; height:200px;" />
<img class="test" src="rust-0.png" style="width:206px; height:206px;" />
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 412px;
height: 412px;
background: url(rust-0.png);
background-repeat: repeat;
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
.repeaty {
width: 412px;
height: 206px;
background: url(rust-0.png);
}
.repeatx {
width: 206px;
height: 206px;
background: url(rust-0.png);
float: left;
}
</style>
</head>
<body>
<div>
<div class=repeaty><div class=repeatx></div><div class=repeatx></div></div>
<div class=repeaty><div class=repeatx></div><div class=repeatx></div></div>
</div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 400px;
height: 400px;
background: url(rust-0.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 200px;
height: 200px;
background: url(rust-0.png);
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 412px;
height: 412px;
background: url(rust-0.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
.repeaty {
width: 206px;
height: 206px;
background: url(rust-0.png);
float: left;
}
</style>
</head>
<body>
<div>
<div class=repeaty></div>
<div class=repeaty></div>
</div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 412px;
height: 412px;
background: url(rust-0.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
.repeaty {
width: 206px;
height: 206px;
background: url(rust-0.png);
}
</style>
</head>
<body>
<div>
<div class=repeaty></div>
<div class=repeaty></div>
</div>
</body>
</html>

View file

@ -4,6 +4,6 @@
<title></title>
</head>
<body>
<div class="test" style="background: url(rust-0.png); width:200px; height:200px;"></div>
<div class="test" style="background: url(rust-0.png); width:206px; height:206px;"></div>
</body>
</html>

View file

@ -54,3 +54,13 @@
== position_relative_a.html position_relative_b.html
== position_relative_top_percentage_a.html position_relative_top_percentage_b.html
== background_none_a.html background_none_b.html
== negative_margins_a.html negative_margins_b.html
== negative_margin_uncle_a.html negative_margin_uncle_b.html
== inline_padding_a.html inline_padding_b.html
== min_max_height_a.html min_max_height_b.html
== minimum_line_height_a.html minimum_line_height_b.html
== background_position_a.html background_position_b.html
== background_repeat_x_a.html background_repeat_x_b.html
== background_repeat_y_a.html background_repeat_y_b.html
== background_repeat_none_a.html background_repeat_none_b.html
== background_repeat_both_a.html background_repeat_both_b.html

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled READ ME.</title>
<style>
#a {
padding: 0 0 0 64px;
color: blue;
}
</style>
</head>
<body>
<div><span id=a>blah blah blah</span></div>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled READ ME.</title>
<style>
#a {
padding: 0 0 0 64px;
color: blue;
margin: 0;
}
</style>
</head>
<body>
<div id=a>blah blah blah</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled VE FORBRYDERNE.</title>
<style>
div {
width: 50px;
}
#a {
background: red;
height: 50px;
min-height: 100px;
}
#b {
background: green;
height: 100px;
max-height: 50px;
}
#c {
background: blue;
height: 50px;
min-height: 100px; /* <-- this one overrides per the spec */
max-height: 25px;
}
</style>
</head>
<body>
<div id=a></div>
<div id=b></div>
<div id=c></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled VE FORBRYDERNE.</title>
<style>
div {
width: 50px;
}
#a {
background: red;
height: 100px;
}
#b {
background: green;
height: 50px;
}
#c {
background: blue;
height: 100px;
}
</style>
</head>
<body>
<div id=a></div>
<div id=b></div>
<div id=c></div>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<style>
#a {
line-height: 100px;
}
#b {
line-height: 6px;
}
</style>
<body>
<div id=a><span id=b>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</span></div>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<style>
#a {
line-height: 100px;
}
#b {
line-height: 100px;
}
</style>
<body>
<div id=a><span id=b>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</span></div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled KERNOD WEL.</title>
<style>
body {
font-size: 40px;
}
#d {
float: right;
background: green;
color: white;
}
#b {
margin: 0 0 -100px 0;
}
#c {
margin: 100px 0 0 0;
clear: both;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id=d>Beetlejuice</div>
<div id=a><div id=b>Beetlejuice</div></div>
<div id=c>Beetlejuice</div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled KERNOD WEL.</title>
<style>
body {
font-size: 40px;
}
#d {
float: right;
background: green;
color: white;
}
#c {
clear: both;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id=d>Beetlejuice</div>
<div id=a>Beetlejuice</div>
<div id=c>Beetlejuice</div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled JUYED AWK YACC.</title>
<style>
* {
line-height: 14px;
}
#b {
margin-top: -14px;
}
</style>
</head>
<body>
<div id=a>Here lies the body of Jonathan Blake.</div>
<div id=b>Stepped on the gas instead of the brake.</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled JUYED AWK YACC.</title>
<style>
* {
line-height: 14px;
}
#a {
position: relative;
}
#b {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id=a>Here lies the body of Jonathan Blake.
<div id=b>Stepped on the gas instead of the brake.</div></div>
</body>
</html>