Auto merge of #8088 - 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/8088)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-10-20 06:55:10 -06:00
commit ecee44da0e
112 changed files with 1376 additions and 55 deletions

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,19 @@
<html>
<head>
<link rel='match' href='img_size_b.html'>
<title>
The winter is too cold for me...
</title>
</head>
<body>
<div>
<img src="rust_logo.png" width="206" />
</div>
<div>
<img src="rust_logo.png" width="206" />
</div>
<div style="width:1000px">
<img src="rust_logo.png" style="width:100px" />
</div>
</body>
</html>

View file

@ -0,0 +1,18 @@
<html>
<head>
<title>
The winter is too cold for me...
</title>
</head>
<body>
<div>
<img src="rust_logo.png" height="206" />
</div>
<div>
<img src="rust_logo.png" style="height:206px"/>
</div>
<div style="width:1000px">
<img src="rust_logo.png" style="width:10%" />
</div>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='img_width_style_intrinsic_width_ref.html'>
</head>
<body>
<div style="float: left; background: red; height: 100px; overflow: hidden">
<img src=400x400_green.png style="width: 100px;">
</div>
There should be no red.
</table>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="float: left; height: 100px; overflow: hidden">
<img src=400x400_green.png style="width: 100px;">
</div>
There should be no red.
</table>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='incremental_float_ref.html'>
<style>
nav.floaty {
float: left;
}
section {
clear: both;
position: relative;
}
</style>
</head>
<body>
<section>
<nav>This floats</nav>
<div>This doesn't</div>
</section>
<section>
<nav>This floats</nav>
<div style="overflow: hidden;">This is a block formatting context</div>
</section>
<section>
<nav>This floats</nav>
<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px;">
This is abspos
</div>
</section>
<script>
var elements = document.getElementsByTagName('nav');
for (var i = 0; i < elements.length; i++)
elements[i].setAttribute('class', 'floaty');
</script>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style>
nav {
float: left;
}
section {
clear: both;
position: relative;
}
</style>
</head>
<body>
<section>
<nav>This floats</nav>
<div>This doesn't</div>
</section>
<section>
<nav>This floats</nav>
<div style="overflow: hidden;">This is a block formatting context</div>
</section>
<section>
<nav>This floats</nav>
<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px;">
This is abspos
</div>
</section>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='incremental_inline_layout_ref.html'>
<style>
h1 {
font-size: 72px;
}
</style>
</head>
<body>
<h1 id=h1>
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
</h1>
<script>
document.getElementById('h1').getBoundingClientRect(); // Trigger one layout.
document.getElementById('h1').getBoundingClientRect(); // Trigger another layout.
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 72px;
}
</style>
</head>
<body>
<h1 id=h1>
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
Incremental Inline Layout
</h1>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='incremental_letter_spacing_ref.html'>
<meta charset="UTF-8">
<title>Incremental layout letter-spacing test</title>
</head>
<body>
<p>Hello, world!</p>
<script>
window.addEventListener("load", function() {
document.querySelector("p").style.letterSpacing = "1em";
});
</script>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Incremental layout letter-spacing reference</title>
</head>
<body>
<p style="letter-spacing: 1em">Hello, world!</p>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel='match' href='inline_absolute_hypothetical_clip_ref.html'>
<style>
body {
margin: 16px;
}
#a {
position: relative;
}
#b {
clip: rect(47px, 118px, 95px, 0);
position: absolute;
}
</style>
<a href="http://bogus" id=a><img id=b width=250 src=400x400_green.png>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0;
}
section {
position: absolute;
background: lime;
top: 63px;
width: 118px;
height: 48px;
left: 16px;
}
</style>
<section></section>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel='match' href='inline_absolute_out_of_flow_ref.html'>
<style>
#a {
display: inline;
position: relative;
}
#b {
position: absolute;
display: block;
}
</style>
<div>A<span id=a><div id=b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></span>B</div>

View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<div>AB</div>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_block_direction_margins_ref.html'>
<style>
html, body {
margin: 0;
}
span {
display: inline-block;
margin-top: 100px;
margin-bottom: 100px;
}
div {
background: steelblue;
color: white;
}
</style>
</head>
<body>
<div>Four <span>score</span>&nbsp;and seven years ago</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
}
span {
display: inline-block;
}
div {
padding-top: 100px;
padding-bottom: 100px;
background: steelblue;
color: white;
}
</style>
</head>
<body>
<div>Four <span>score</span>&nbsp;and seven years ago</div>
</body>
</html>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<link rel='match' href='inline_block_border_ref.html'>
<body>
<div style="display: inline-block; border: solid black 1px; padding: 6px; height: 64px; width: 64px;"></div>
</body>
</html>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<div style="display: block; border: solid black 1px; padding: 6px; height: 64px; width: 64px;"></div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_img_ref.html'>
<style>
body {
margin: 0;
padding: 0;
background-color: white;
}
.red {
color: red;
}
.green {
color: green;
}
.ib {
display: inline-block;
}
span {
font-family: ahem;
font-size: 100px;
}
.bg {
background-color: white;
position: absolute;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div class="bg">
<span class="red">X</span><img src="400x400_green.png"><span class="green ib">X</span>
</div>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.d1 {
position: absolute;
top: 320px;
width: 100px;
height: 100px;
}
.d2 {
position: absolute;
left: 500px;
top: 320px;
width: 100px;
height: 100px;
}
img {
position: absolute;
left: 100px;
}
.bg {
background-color: white;
position: absolute;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div class="bg">
<div class="d1 red"></div>
<img src="400x400_green.png">
<div class="d2 green"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_margin_ref.html'>
<style type="text/css">
body {
font-family: 'ahem';
font-size: 100px;
margin: 32px;
}
.ib {
display: inline-block;
}
.yellow {
color: #ff0;
}
.grey {
color: #eee;
}
</style>
</head>
<body>
<div class="grey">X<span class="yellow ib">X</span></div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel='match' href='inline_block_margin_auto_zero_ref.html'>
<style>
html, body {
margin: 0;
}
section {
width: 300px;
height: 100px;
background: blue;
}
nav {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 auto;
background: gold;
}
</style>
<section><nav></nav></section>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0;
}
section {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
background: gold;
}
nav {
position: absolute;
width: 200px;
height: 100px;
top: 0;
left: 100px;
background: blue;
}
</style>
<section></section><nav></nav>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.yellow {
background-color: #ff0;
}
.grey {
background-color: #eee;
}
.d1 {
position: absolute;
left: 32px;
top: 32px;
width: 100px;
height: 100px;
}
.d2 {
position: absolute;
left: 132px;
top: 32px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="d1 grey"></div>
<div class="d2 yellow"></div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_min_width_ref.html'>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
min-width: 200px;
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div><div class="green"></div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 200px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div><div class="green"></div>
</body>
</html>

View file

@ -0,0 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<link rel='match' href='inline_block_overflow_ref.html'>
<body>
a<span style="display: inline-block; overflow: hidden">b</span>
</body>
</html>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<link rel='match' href='inline_block_overflow_hidden_ref.html'>
<body>
<div style="display: inline-block; overflow: hidden">This should be visible</div>
</body>
</html>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<div style="display: inline-block">This should be visible</div>
</body>
</html>

View file

@ -0,0 +1,6 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<body>
ab
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_parent_padding_ref.html'>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
list-style-image: none;
}
li {
display: inline-block;
padding: 0 100px;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<ul><li>X</li></ul>
</body>
</html>

View file

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

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_percentage_height_ref.html'>
<title>Hello</title>
</head>
<body>
<div style="height: 100px;">
<span style="height: 100%;">
<li style="height: 100%; background: red;"><span>Edit</span></li>
</span>
</div>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<div style="height: 100px;">
<div style="height: 100%;">
<li style="height: 100%; background: red;"><span>Edit</span></li>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_stacking_context_ref.html'>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.fa {
display: inline-block;
transform: translate(0, 0);
opacity: 0.5;
}
</style>
</head>
<body>
<div style="padding: 100px 0 0 0;">
<div class="fa">A</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.fa {
display: block;
transform: translate(0, 0);
opacity: 0.5;
}
</style>
</head>
<body>
<div style="padding: 100px 0 0 0;">
<div class="fa">A</div>
</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_block_with_margin_ref.html'>
<style type="text/css">
body {
margin: 0;
font-family: 'ahem';
font-size: 100px;
line-height: 1;
}
span {
display: inline-block;
color: yellow;
margin-left: 50px;
margin-right: 50px;
background: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div><span></span><span></span></div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.block0 {
position: absolute;
background-color: yellow;
left: 50px;
top: 0px;
width: 100px;
height: 100px;
}
.block1 {
position: absolute;
background-color: yellow;
left: 250px;
top: 0px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="block0"></div>
<div class="block1"></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_hypothetical_box_ref.html'>
<style>
.a {
position: relative;
height: 200px;
}
.b {
position: absolute;
vertical-align: top;
}
.c {
background: blue;
display: inline-block;
height: 8px;
width: 32px;
}
</style>
</head>
<body>
<div class=a><span class=c></span><span class=b style="top: 100px;">Hello</span>world!</div>
<div class=a><span class=c></span><span class=b style="left: 100px;">Hello</span>world!</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style>
.a {
position: relative;
height: 200px;
}
.b {
position: absolute;
display: block;
}
.c {
background: blue;
display: inline-block;
height: 8px;
width: 32px;
}
</style>
</head>
<body>
<div class=a><span class=c></span>world!<span class=b style="top: 100px; left: 32px;">Hello</span></div>
<div class=a><span class=c></span>world!<span class=b style="top: 0; left: 100px;">Hello</span></div>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='inline_margin_multiple_fragments_ref.html'>
<style>
span {
margin-left: 128px;
margin-right: 128px;
}
</style>
</head>
<body>
<span><img src=rust.png><img src=rust.png><img src=rust.png></span>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style>
#first {
margin-left: 128px;
}
#last {
margin-right: 128px;
}
</style>
</head>
<body>
<span id=first><img src=rust.png></span><img src=rust.png><span id=last><img src=rust.png></span>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel='match' href='inline_margins_intrinsic_size_ref.html'>
<style>
span {
margin: 0 1em;
}
div {
float: left;
}
body {
margin: 0;
padding: 0;
}
</style>
<div>foo<span>/</span>bar</div>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<style>
span {
padding: 0 1em;
}
div {
float: left;
}
body {
margin: 0;
padding: 0;
}
</style>
<div>foo<span>/</span>bar</div>

View file

@ -0,0 +1,25 @@
<html>
<head>
<link rel='match' href='inline_text_align_b.html'>
<style>
.right {
text-align: right;
}
.left {
text-align: left;
}
.inline {
display: inline;
}
</style>
</head>
<body>
<div class="right">
<span class="left"> <!-- should ignore 'text-align' of inline elements -->
<div class="inline left"> <!-- ... and those explicitly defined as inline -->
<span>hello, wide world</span>
</span>
</span>
</div>
</body>
</html>

View file

@ -0,0 +1,16 @@
<html>
<head>
<style>
.right {
text-align: right;
}
</style>
</head>
<body>
<div class="right">
<span class="right">
hello, wide world
</span>
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel='match' href='input_button_margins_ref.html'>
<style>
body, html {
margin: 0;
}
input {
margin-left: 64px;
border: none;
vertical-align: top;
}
</style>
<input type=button value=Hello>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<style>
body, html {
margin: 0;
}
input {
position: absolute;
left: 64px;
border: none;
}
</style>
<input type=button value=Hello>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='input_button_size_ref.html'>
</head>
<body>
<input type=submit size=100 value=sumbit>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type=submit value=sumbit>
</body>
</html>

View file

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

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>:last-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> </p><p id="p1"> </p></div>
<div id="d2"><p> </p><p id="p2"> </p> </div>
<div id="d3"><p> </p><p id="p3"> </p><!-- comment --></div>
<div id="d4"><p> </p><p id="p4"> </p><span> </span></div>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='last_of_type_pseudo_b.html'>
<title>:last-of-type test</title>
<style type="text/css">
html { background: red; }
/* Should match according to Selectors Level 4 (changed from Level 3) */
html:last-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 > *:last-of-type { background: green }
</style>
</head>
<body>
<div id="d1">
<p> </p>
<div> </div>
<div> </div>
<p> </p>
<address> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
<address> </address>
<address class="ok"> </address>
<p> </p>
<div class="ok"> </div>
<p> </p>
<p class="ok"> </p>
</div>
</body>
</html>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>:last-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> </p>
<div> </div>
<div> </div>
<p> </p>
<address> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
<address> </address>
<address class="ok"> </address>
<p> </p>
<div class="ok"> </div>
<p> </p>
<p class="ok"> </p>
</div>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel='match' href='li_absolute_containing_block_ref.html'>
<style>
body {
font-size: 64px;
}
li {
position: relative;
}
section {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
}
</style>
<li>X<section></section></li>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<style>
body {
font-size: 64px;
}
div {
position: relative;
}
section {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
}
</style>
<div>X<section></section></div>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='line_breaking_whitespace_collapse_ref.html'>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
p {
font-size: 10px;
font-family: Ahem, monospace;
width: 300px;
}
a {
color: blue;
}
</style>
</head>
<body>
<p>xxxxx xxxxx <a>xxxxx xxx xxxxx</a> xxxxxxxxxxx</p>
</body>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
p {
font-size: 10px;
font-family: Ahem, monospace;
width: 300px;
}
a {
color: blue;
}
</style>
</head>
<body>
<p>xxxxx xxxxx <a>xxxxx xxx xxxxx</a><br>xxxxxxxxxxx</p>
</body>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='line_height_float_placement_ref.html'>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: Ahem;
padding-top: 5px;
}
#floaty {
float: left;
height: 20px;
width: 100px;
}
#pre {
line-height: 32px;
white-space: pre;
}
</style>
</head>
<body>
<div id=floaty></div>
<div id=pre>x
x</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: Ahem, monospace;
}
#floaty {
float: left;
height: 20px;
width: 100px;
}
#pre {
white-space: pre;
}
.spacer {
color: transparent;
font-size: 32px;
}
</style>
</head>
<body>
<div id=floaty></div>
<div id=pre>x<span class=spacer>x</span>
x<span class=spacer>x</span></div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='linear_gradients_lengths_ref.html'>
<!-- Tests that linear gradient lengths work. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to right, white, white 30px, black 30px, black);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that linear gradient lengths work. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to right, white, white 30%, black 30%, black);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='linear_gradients_parsing_ref.html'>
<!-- Tests that parsing linear gradients works. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to left, red, red);
}
#b {
background: linear-gradient(#abacab, #abacab);
}
#c {
background: linear-gradient(90deg, violet, violet 1em, violet 2ex, violet 50%, blue 50%, blue, blue);
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that parsing linear gradients works. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
position: relative;
}
#a {
background: red;
}
#b {
background: #abacab;
}
nav {
display: block;
width: 50%;
height: 100%;
position: absolute;
}
#ca {
background: violet;
left: 0;
}
#cb {
background: blue;
right: 0;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c>
<nav id=ca></nav>
<nav id=cb></nav>
</section>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='linear_gradients_reverse_ref.html'>
<!-- Tests that reversed linear gradients are equivalent. -->
<style>
section {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(to bottom, red, red 50%, green 50%, green);
}
#b {
background: linear-gradient(90deg, black, white);
}
#c {
background: linear-gradient(45deg, yellow, yellow 50%, purple 50%, purple);
}
#d {
background: linear-gradient(to bottom right, lime, lime 50%, pink 50%, pink);
}
</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,33 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that reversed linear gradients are equivalent. -->
<style>
nav {
display: block;
width: 100px;
height: 100px;
border: solid black 1px;
}
#a {
background: linear-gradient(0deg, green, #008000 50%, red 50%, red);
}
#b {
background: linear-gradient(to left, #ffffff, black);
}
#c {
background: linear-gradient(225deg, purple, purple 50%, yellow 50%, yellow);
}
#d {
background: linear-gradient(315deg, pink, pink 50%, lime 50%, lime);
}
</style>
</head>
<body>
<nav id=a></nav>
<nav id=b></nav>
<nav id=c></nav>
<nav id=d></nav>
</body>
</html>

View file

@ -0,0 +1,25 @@
<html>
<head>
<link rel='match' href='linebreak_inline_span_b.html'>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<blockquote>
The <span>most terrifying</span> fact about the universe <span>is not that
it is hostile but that it is indifferent;</span> but if we can come to terms
with this indifference and accept the<span> challenges</span> of <span>life
<span>within</span></span> the boundaries of death - <span>however</span>
mutable man may be able to make them - our existence as a species can have
genuine meaning and fulfillment. However vast the darkness, we must supply
our own light.
<footer>
<cite>Stanley Kubrick</cite>
</footer>
</blockquote>
</body>
</html>

View file

@ -0,0 +1,23 @@
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<blockquote>
The most terrifying fact about the universe is not that it is hostile but
that it is indifferent; but if we can come to terms with this indifference
and accept the challenges of life within the boundaries of death - however
mutable man may be able to make them - our existence as a species can have
genuine meaning and fulfillment. However vast the darkness, we must supply
our own light.
<footer>
<cite>Stanley Kubrick</cite>
</footer>
</blockquote>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='link_style_order_ref.html'>
<meta charset="utf-8">
<title>link/style order test</title>
<link rel="stylesheet" href="data:text/css,body{background:red;}">
<style>body { background: green; }</style>
</head>
<body>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>link/style order test</title>
<style>body { background: green; }</style>
</head>
<body>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='list_style_image_sizing_ref.html'>
<!--
Tests that the list style image doesn't get stretched vertically. It should be completely
covered up by the black absolutely-positioned div.
-->
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* {
margin: 0;
padding: 0;
}
li {
margin-left: 128px;
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANAQMAAABb8jbLAAAABlBMVEX///8AUow5QSOjAAAAAXRSTlMAQObYZgAAABNJREFUCB1jYEABBQw/wLCAgQEAGpIDyT0IVcsAAAAASUVORK5CYII=);
font-size: 256px;
font-family: Ahem, monospace;
}
#coverup {
position: absolute;
background: black;
top: 176px;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li>x</li>
</ul>
<div id=coverup></div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that the list style image doesn't get stretched vertically. It should be completely
covered up by the black absolutely-positioned div.
-->
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* {
margin: 0;
padding: 0;
}
li {
margin-left: 128px;
list-style-image: none;
font-size: 256px;
font-family: Ahem, monospace;
}
#coverup {
position: absolute;
background: black;
top: 176px;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li>x</li>
</ul>
<div id=coverup></div>
</body>
</html>

View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<link rel='match' href='many_brs_ref.html'>
<body>
Cupcakes<br>are<br>supremely<br>delicious.
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<body>
<div>Cupcakes</div>
<div>are</div>
<div>supremely</div>
<div>delicious.</div>
</body>
</html>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel='match' href='margin_padding_inline_block_ref.html'>
<style>
html, body {
margin: 0;
}
</style>
<div><span style="padding-left: 100px; display: inline-block">Boo</span></div>
<div><span style="padding-left: 100px">Foo</span></div>
<div><span style="margin-left: 100px">Foo</span></div>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0;
}
div {
position: relative;
}
span {
position: relative;
left: 100px;
}
</style>
<div><span>Boo</span></div>
<div><span>Foo</span></div>
<div><span>Foo</span></div>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<link rel='match' href='margins_inside_floats_ref.html'>
<body>
<div style="float: left;">
<div style="margin-bottom: 64px;">Must be this tall</div>
<div style="margin-top: 64px;">to write multi-threaded code.</div>
</div>&nbsp;
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<div>
<div style="margin-bottom: 64px;">Must be this tall</div>
<div style="margin-top: 64px;">to write multi-threaded code.</div>
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<html>
<head>
<link rel='match' href='max_width_float_simple_b.html'>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#float {
float: left;
height: 50px;
width: 50px;
max-width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="float">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<html>
<head>
<link rel='match' href='max_width_simple_b.html'>
<style>
#first {
position: relative;
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 50%;
max-width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='min_max_height_b.html'>
<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,26 @@
<html>
<head>
<link rel='match' href='min_width_float_simple_b.html'>
<style>
#first {
position: relative;
width: 100px;
height: 100px;
border: solid 1px;
}
#float {
float: left;
height: 50px;
width: 50%;
min-width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="float">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<html>
<head>
<link rel='match' href='min_width_simple_b.html'>
<style>
#first {
position: relative;
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 50%;
min-width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<link rel='match' href='minimum_line_height_b.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,54 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='mix_blend_mode_ref.html'>
<style>
html {
background: #ffffff;
}
section {
position: absolute;
left: 0;
}
#a {
top: 0;
mix-blend-mode: difference;
}
#b {
top: 100px;
mix-blend-mode: exclusion;
}
div {
position: absolute;
top: 0;
width: 100px;
height: 100px;
}
.red {
left: 0;
background-color: #ff0000;
}
.green {
left: 100px;
background: #00ff00;
}
.blue {
left: 200px;
background: #0000ff;
}
</style>
</head>
<body>
<section id=a>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
<section id=b>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
</body>
</html>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: #ffffff;
}
section {
position: absolute;
left: 0;
}
#a {
top: 0;
}
#b {
top: 100px;
}
div {
position: absolute;
top: 0;
width: 100px;
height: 100px;
}
.red {
left: 0;
background-color: #00ffff;
}
.green {
left: 100px;
background: #ff00ff;
}
.blue {
left: 200px;
background: #ffff00;
}
</style>
</head>
<body>
<section id=a>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
<section id=b>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
</body>
</html>

View file

@ -0,0 +1,20 @@
<html>
<head>
<link rel='match' href='multiple_css_class_b.html'>
<style>
.foo {
height: 100px;
}
.bar {
width: 100px;
}
.baz {
background: green;
}
</style>
</head>
<body>
<div class="foo bar baz foobar">
</div>
</body>
</html>

View file

@ -0,0 +1,15 @@
<html>
<head>
<style>
.bar {
height: 100px;
width: 100px;
background: green;
}
</style>
</head>
<body>
<div class="foo bar baz foobar">
</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='negative_margin_uncle_b.html'>
<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>
<link rel='match' href='negative_margins_b.html'>
<style>
* {
line-height: 14px;
}
#b {
margin-top: -14px;
}
</style>
</head>
<body>
<div id=a>X</div>
<div id=b>X</div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style>
* {
line-height: 14px;
}
#a {
position: relative;
}
#b {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id=a>X
<div id=b>X</div></div>
</body>
</html>

View file

@ -0,0 +1 @@
<img width="100px" height="100px" src="rippy.jpg">

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