Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html><!-- Submitted from TestTWF Paris --><head>
<title>CSS Test reference</title>
<link href="mailto:info@anselm-hannemann.com" rel="author" title="Anselm Hannemann">
<link href="http://fantasai.inkedblade.net/contact" rel="reviewer" title="Elika J Etemad">
<meta content="ahem" name="flags">
<style type="text/css">
.multicol-wrapper>*{
font-family: Ahem;
}
div.multicol-wrapper{
border: thin solid black;
display: inline-block;
margin: 1em auto;
width: 360px;
}
.multicol-basic-ref{
background: yellow;
width: 360px;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
}
.multicol-basic-ref td{
padding: 0;
}
.multicol-basic-ref-item{
padding: 0;
width: 120px;
background: #000;
border-spacing: 0;
border-collapse: collapse;
display: inline;
border: none;
}
.item-1{
background: purple;
color: purple;
}
.item-2{
background: orange;
color: orange;
}
.item-3{
background: blue;
color: blue;
}
</style>
</head>
<body>
<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
<div class="multicol-wrapper">
<table class="multicol-basic-ref">
<tbody><tr>
<td><div class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td>
<td><div class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td>
<td><div class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td>
</tr>
</tbody></table>
</div>
</body></html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-24 -->
<meta name="flags" content="image">
<style type="text/css">
table
{
border-spacing: 0px;
border: gray solid 1em;
font: 1.25em/1 serif;
}
td
{
padding: 0;
width: 3em;
}
td + td {width: 8em;}
img, td {vertical-align: top;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled"><img src="support/black20x20.png" width="50" height="20" alt="Image download support must be enabled"></td><td><img src="support/swatch-orange.png" width="40" height="80" alt="Image download support must be enabled"></td>
</tr></table>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-24 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
font: 1.25em/1 serif;
border: 1em solid gray;
width: 11em;
height: 6em;
position: relative;
}
img {position: absolute;}
img#black {top: 4em;}
img#first-orange {top: 5em;}
img#second-orange {left: 4em;}
img#first-pink
{
left: 4em;
top: 3em;
}
img#second-pink {left: 8em;}
img#yellow
{
left: 8em;
top: 1em;
}
</style>
</head>
<body>
<div>
<img id="blue" src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled">
<img id="black" src="support/black20x20.png" width="70" height="20" alt="Image download support must be enabled">
<img id="first-orange" src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled">
<img id="second-orange" src="support/swatch-orange.png" width="40" height="60" alt="Image download support must be enabled">
<img id="first-pink" src="support/swatch-pink.png" width="40" height="60" alt="Image download support must be enabled">
<img id="second-pink" src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled">
<img id="yellow" src="support/swatch-yellow.png" width="40" height="80" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicol | break-inside: avoid-column</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
html {
width: 800px;
background: white;
}
h1 {
color: white;
margin-top: 0;
padding-top: 0.66em;
}
div {
height: 450px;
background: black;
height: 300px;
}
</style>
</head>
<body>
<div>
<h1>You should not see the word FAIL</h1>
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-25 -->
<meta name="flags" content="ahem image">
<style type="text/css">
div
{
background-color: yellow;
margin-bottom: 0.5em;
font: 1.25em/1 Ahem;
height: 3em;
width: 10em;
}
img {vertical-align: top;}
</style>
</head>
<body>
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
<div><img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"></div>
<div><img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-09-14 -->
<meta name="flags" content="ahem image">
<style type="text/css">
div
{
background-color: yellow;
margin-bottom: 0.5em;
font: 1.25em/1 Ahem;
height: 3em;
width: 10em;
}
img {vertical-align: top;}
</style>
</head>
<body>
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
<div>&nbsp; <img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"></div>
<div>&nbsp; <img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"> <img src="support/black20x20.png" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-24 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
border: gray solid 1em;
font: 1.25em/1 serif;
width: 11em;
}
img
{
position: relative;
vertical-align: top;
}
img + img {left: 3em;}
img + img + img {left: 6em;}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-25 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
border: gray solid 1em;
font: 1.25em/1 serif;
width: 11em;
}
img
{
position: relative;
vertical-align: top;
}
img + img {left: 3em;}
img + img + img {left: 6em;}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-25 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: black;
border: black solid 1px;
font: 1.25em/1 serif;
padding: 1em;
width: 8em;
}
img
{
position: relative;
vertical-align: top;
}
img + img + img {left: 2em;}
</style>
</head>
<body>
<div><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-25 -->
<meta name="flags" content="ahem">
<style type="text/css">
body {width: 600px;}
div
{
background-color: yellow;
color: black;
font: 1.25em/1 Ahem;
orphans: 1;
widows: 1;
}
</style>
</head>
<body>
<div>d da d da d da d da d da d da dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dame dame dame dame dame dame damerdamerdamerdamerdamerdamer<br>d da d da d da d da d da&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dame dame dame dame dame &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; damerdamerdamerdamerdamer &nbsp;&nbsp;&nbsp;&nbsp;</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-26 -->
<meta name="flags" content="image">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0px;
border: gray solid 1em;
font: 1.25em/1 serif;
}
td {padding: 0 1em 0 0;}
img, td {vertical-align: top;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-27 -->
<meta name="flags" content="image">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0px;
border: gray solid 1em;
font: 1.25em/1 serif;
}
td {padding: 0 2em 0 0;}
img, td {vertical-align: top;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<meta name="flags" content="ahem">
<style type="text/css">
div#inline-block
{
color: green;
display: inline-block;
font: 1.25em/1 Ahem;
}
</style>
</head>
<body>
<div id="inline-block">
<div>4444 4444 4444 4444</div>
<div>1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp;</div>
<div>1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp;</div>
<div>4444 4444 4444 4444</div>
<div>1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1</div>
<div>1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1</div>
<div>1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 4444 4444</div>
</div>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-27 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: yellow;
font: 1.25em/1 Ahem;
width: 21em;
}
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-29 -->
<meta name="flags" content="image">
<style type="text/css">
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="70" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="15" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled"><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-orange.png" width="70" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="15" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-29 -->
<meta name="flags" content="image">
<style type="text/css">
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-orange.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
margin: 0;
}
div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: black;
background: yellow;
margin: 1em;
border: 1em solid gray;
width: 12em;
height: 2em;
position: relative;
widows: 1;
orphans: 1;
}
#pink {color: pink;}
#orange {color: orange;}
#purple {color: purple;}
#grey {color: grey;}
span {
display: block;
position: absolute;
}
#orange {
left: 5em;
top: 0;
}
#purple {
left: 0;
top: 1em;
}
#grey {
left: 5em;
top: 1em;
}
</style>
</head>
<body>
<div>
<span id="purple">xxxx</span>
<span id="orange">xxxx</span>
<span id="grey">xxxx</span>
<span id="pink">xxxx</span>
</div>
</body>
</html>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
margin: 0;
}
div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: black;
background: yellow;
margin: 1em;
border: 1em solid gray;
width: 12em;
height: 2em;
position: relative;
widows: 1;
orphans: 1;
}
span {
display: block;
position: absolute;
}
#pink {
color: pink;
}
#orange {
color: orange;
left: 0;
top: 1em;
}
#purple {
color: purple;
left: 9em;
top: 0;
}
#grey {
color: grey;
left: 9em;
top: 1em;
}
#blue {
left: 5.25em;
top: 0;
width: 1.5em;
height: 2em;
background: blue;
}
</style>
</head>
<body>
<div>
<span id="pink">xxxx</span>
<span id="orange">xxxx</span>
<span id="purple">xxxx</span>
<span id="grey">xxxx</span>
<span id="blue"></span>
</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-count</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body>div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: black;
background: yellow;
margin: 1em;
border: 1em solid gray;
width: 12em;
height: 1em;
position: relative;
orphans: 1;
widows: 1;
}
span {
color: blue;
background: blue;
width: 2em;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
<span>x</span>
</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-count</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body>div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: black;
background: yellow;
margin: 1em;
border: 1em solid gray;
width: 12em;
height: 1em;
orphans: 1;
widows: 1;
}
</style>
</head>
<body>
<div>xx</div>
</body>
</html>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-25 -->
<meta name="flags" content="ahem">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0em;
color: lime;
margin: 1em 0em;
font: 1.25em/1 Ahem;
table-layout: fixed;
width: 18em;
}
td {padding: 0em;}
</style>
</head>
<body>
<p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p>
<table>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
<table>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
<table>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-25 -->
<meta name="flags" content="ahem">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0em;
color: lime;
font: 1.25em/1 Ahem;
height: 5em;
margin: 1em 0em;
table-layout: fixed;
width: 20em;
}
td
{
padding: 0em;
vertical-align: top;
}
</style>
</head>
<body>
<p>Test passes if the 2 rectangles are <strong>identical</strong>.</p>
<table>
<tr>
<td>G<br>H<br>I</td>
<td>J<br>K<br>L</td>
</tr>
</table>
<table>
<tr>
<td>G<br>H<br>I</td>
<td>J<br>K<br>L</td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-30 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
color: black;
font: 1.25em/1 Ahem;
float: left;
width: 10em;
margin-right: 1em;
}
</style>
</head>
<body>
<div>1 22 333
4444 55555
666666
7777777
999999999
1 22 333
4444 55555
666666
7777777
999999999</div>
<div>1 22 333
4444 55555
666666
7777777
999999999</div>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-fill-auto</title>
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/">
<meta name="flags" content="ahem">
<style type="text/css">
body>div {
font-family: ahem;
font-size: 1.25em;
line-height: 1em;
color: green;
height: 3em;
width: 2em;
orphans: 1;
widows: 1;
position: relative;
margin: 1em;
}
div.col {
column-count: 2;
column-fill: auto;
column-gap: 0;
}
div.red {
background: red; position: absolute; z-index: -1;
}
</style>
</head>
<body>
<div class="ref">
oo<br>t<br>o
</div>
<div class="ref">
oo<br>t<br>o
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-01 -->
<meta name="flags" content="ahem image">
<style type="text/css">
div {font: 1.25em/1 Ahem;}
img {vertical-align: top;}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-green.png" width="220" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled"> <img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled"> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,79 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-16 -->
<meta name="flags" content="">
<style type="text/css">
body {margin: 8px;}
div
{
background-color: blue;
height: 200px;
width: 680px;
}
h1
{
color: white;
font-size: 2em;
line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
margin-top: 8px; /* The margin-top of body and h1 will collapse into an 8px gap */
margin-bottom: 21px;
padding-top: 21px;
}
span#pass
{
color: blue;
font-size: 1.5em;
font-weight: bolder;
left: 698px;
/*
Expected result:
8px 688px
v v
************************************************
* *
* <h1>Test passes if the word "PASS!" is<br />* 1st line box
* on the right &#8600;</h1> * 2nd line box
* *
************************************************
* *
* <h2>nbsp;<h2> <h2>nbsp;<h2> <h2>nbsp;<h2> * <h2>PASS!</h2>
* *
************************************************
^ ^
228px 458px
*/
line-height: 1;
position: absolute;
top: 130px;
/*
8px : margin-top of body element
21px : margin-top of h1 element which must not collapse with body's margin-top
80px : content height: 2 line boxes required to render the "Test passes if ..." sentence
21px : margin-bottom of h1 element
====================================
130px : top position of span#pass in document box
*/
}
</style>
</head>
<body>
<div>
<h1>Test passes if "PASS!" is<br>on the right ↘</h1>
<span id="pass">PASS!</span>
</div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicol | column-span: all | column-fill: auto</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
html {
background: white;
}
body {
background: blue;
width: 1200px;
height: 492px;
}
h1 {
font-size: 2em;
margin: 0;
padding-top: 0.66em;
}
</style>
</head>
<body>
<h1>you should not see the word fail</h1>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-fill</title>
<link rel="author" title="howcome@opera.com" href="http://www.opera.com/">
<meta name="flags" content="ahem">
<style type="text/css">
body>div {
font-family: ahem;
font-size: 1.25em;
line-height: 1em;
color: green;
height: 3em;
width: 2em;
orphans: 1;
widows: 1;
position: relative;
margin: 1em;
}
div.col {
column-count: 2;
column-fill: balance;
column-gap: 0;
}
div.red {
background: red; position: absolute; z-index: -1;
}
</style>
</head>
<body>
<div class="ref">
oo<br>tt
</div>
<div class="ref">
oo<br>tt
</div>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-gap</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
div {
background: yellow;
height: 5em;
width: 30em;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-25 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
font: 1.25em/1 Ahem;
margin: 1em 0;
width: 30em;
}
span {color: yellow;}
</style>
</head>
<body>
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
<div>1234567890<span>1234567890</span>1234567890</div>
<div>1234567890<span>1234567890</span>1234567890</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-05 -->
<meta name="flags" content="image">
<style type="text/css">
div {margin: 1.25em;}
img {vertical-align: top;}
</style>
</head>
<body>
<p>Test passes if the 2 stripes are <strong>identical</strong>.</p>
<div><img src="support/black20x20.png" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" alt="Image download support must be enabled"></div>
<div><img src="support/black20x20.png" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-05 -->
<meta name="flags" content="image">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0px;
border: gray solid 1em;
font: 1.25em/1 serif;
}
td {padding: 0 1em 0 0;}
img, td {vertical-align: top;}
td#last-cell {padding-right: 0;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td><td id="last-cell"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,67 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-05 -->
<meta name="flags" content="ahem">
<style type="text/css">
body > div
{
background-color: gray;
font: 1.25em/1 Ahem;
height: 4em;
position: relative;
width: 14.5em;
}
p, div > div
{
background-color: blue;
height: 1em;
left: 0;
margin: 0;
position: absolute;
top: 0;
width: 4em;
}
div > div
{
background-color: black;
height: 4em;
}
p {left: 7.5em;}
p + p
{
left: 8.5em;
top: 1em;
}
p + p + p
{
left: 9.5em;
top: 2em;
}
p + p + p + p
{
left: 10.5em;
top: 3em;
}
</style>
</head>
<body>
<div>
<div></div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-06 -->
<meta name="flags" content="image">
<style type="text/css">
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-06 -->
<meta name="flags" content="image">
<style type="text/css">
div {font: 1.25em/1 serif;}
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-06 -->
<meta name="flags" content="image">
<style type="text/css">
img
{
left: 135px;
/* 6em + (2em/2) - (10px/2) == 135px */
position: relative;
vertical-align: top;
}
img + img {left: 285px;}
/* 6em + 2em + 6em + (2em/2) - (10px/2) - 10px == 285px */
</style>
</head>
<body>
<p>Test passes if there are 2 blue vertical stripes of equal height.</p>
<div><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head class="reftest-print">
<title>CSS Reftest Reference</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<style type="text/css">
html, body { height: 100%; }
* { margin: 0; }
div {
border: double blue 12px;
height: 150%;
padding: 0 12px;
}
div > p {
border-right: solid orange 12px;
border-left: solid orange 12px;
width: 50%;
margin: 0 auto;
height: 100%;
}
blockquote {
border: solid thick yellow;
} </style>
</head>
<body>
<p>Test passes if even when printed:</p>
<ul>
<li>Two vertical orange stripes stretch exactly
from the inner top edge to the inner bottom edge of the blue box below.</li>
<li>There is a yellow stripe immediately below the blue box.</li>
</ul>
<div>
<p></p>
</div>
<blockquote></blockquote>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-08 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: blue;
font: 1.25em/1 serif;
}
div#top
{
height: 5em;
width: 22em;
}
div#bottom
{
height: 3em;
width: 14em;
}
img {vertical-align: top;}
</style>
</head>
<body>
<div id="top"><img src="support/black20x20.png" width="60" height="100" alt="Image download support must be enabled"></div>
<div id="bottom"><img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled"></div>
<!--
Expected results:
0em 14em 22em
v v v
0 *********************************************
* bla | *
* bla | *
* bla | *
* bla | *
5 * bla | *
6 * orn |****************
7 * orn |
8 * orn |
*****************************
-->
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-08 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: yellow;
font: 1.25em/1 serif;
margin: 0em 1em;
padding: 0em 1em 1em;
width: 30em;
}
img
{
padding-right: 1em;
vertical-align: top;
}
img.column-gap {margin-right: 2em;}
img#last {padding-right: 0em;}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-08 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: blue;
font: 1.25em/1 serif;
margin: 1em;
padding: 0em 1em 1em;
width: 30em;
}
img {vertical-align: top;}
img.column-gap
{
margin-left: -2em;
margin-right: 3em;
vertical-align: bottom;
}
img#last
{
margin-left: -2em;
vertical-align: bottom;
}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,65 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | inheritance</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
width: 75em;
}
body>div {
color: black;
background: yellow;
height: 2em;
position: relative;
}
div div {
position: absolute;
top: 0;
left: 0;
}
#two {left: 19em;}
#three {left: 38em;}
div div div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
width: 2em;
height: 2em;
color: black;
position: absolute;
left: 1em;
}
.a2 {left: 4em;}
.a3 {left: 10.5em;}
.a4 {left: 13.5em;}
#two div {color: blue;}
#three div {color: pink;}
</style>
</head>
<body>
<div>
<div>
<div>xx xx</div>
<div class="a2">xx xx</div>
<div class="a3">xx xx</div>
<div class="a4">xx xx</div>
</div>
<div id="two">
<div>xx xx</div>
<div class="a2">xx xx</div>
<div class="a3">xx xx</div>
<div class="a4">xx xx</div>
</div>
<div id="three">
<div>xx xx</div>
<div class="a2">xx xx</div>
<div class="a3">xx xx</div>
<div class="a4">xx xx</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | inheritance</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body>div {
margin: 1em;
background: white;
width: 74em;
height: 5em;
position: relative;
}
div div {
background: blue;
height: 5em;
width: 1em;
position: absolute;
top: 0;
left: 23em;
}
div>div+div {
left: 50em;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-10 -->
<meta name="flags" content="">
<style type="text/css">
div
{
background-color: black;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-10 -->
<meta name="flags" content="">
<style type="text/css">
body > div
{
background-color: blue;
border: gray solid 1em;
font-size: 1.25em;
height: 8em;
position: relative;
width: 10em;
}
div > div
{
background-color: yellow;
height: 1em;
left: 0;
position: absolute;
top: 3em;
width: 5em;
}
#second-stripe {top: 5em;}
#third-stripe {top: 7em;}
</style>
</head>
<body>
<div>
<div></div>
<div id="second-stripe"></div>
<div id="third-stripe"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,106 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-11 -->
<meta name="flags" content="">
<style type="text/css">
body {margin: 0em;}
div#rel-pos-wrapper
{
background-color: yellow;
font: 1.25em/1 serif;
height: 4em;
position: relative;
width: 32em;
}
div > div
{
font-size: 1em;
height: 3em;
position: absolute;
top: 0;
width: 2em;
}
div#black1
{
background-color: black;
left: 1em;
}
div#black2
{
background-color: black;
left: 4em;
}
div#black3
{
background-color: black;
height: 2em;
left: 7em;
}
div#blue1
{
background-color: blue;
left: 12em;
}
div#blue2
{
background-color: blue;
left: 15em;
}
div#blue3
{
background-color: blue;
height: 2em;
left: 18em;
}
div#pink1
{
background-color: pink;
left: 23em;
}
div#pink2
{
background-color: pink;
left: 26em;
}
div#pink3
{
background-color: pink;
height: 2em;
left: 29em;
}
</style>
</head>
<body>
<div id="rel-pos-wrapper">
<div id="black1"></div>
<div id="black2"></div>
<div id="black3"></div>
<div id="blue1"></div>
<div id="blue2"></div>
<div id="blue3"></div>
<div id="pink1"></div>
<div id="pink2"></div>
<div id="pink3"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-10 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: yellow;
font: 1.25em/1 serif;
margin: 1em;
padding: 0em 1em 1em;
width: 39em;
}
img
{
padding-right: 2em;
vertical-align: top;
}
img.column-gap {margin-right: 2em;}
img#last {padding-right: 0em;}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled"><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-09 -->
<meta name="flags" content="">
<style type="text/css">
div#rel-pos-wrapper
{
font: 1.25em/1 serif;
position: relative;
}
div#rel-pos-wrapper > div
{
background-color: blue;
font-size: 1em;
height: 3em;
position: absolute;
width: 1em;
}
div#first-column-rule
{
left: 14em;
top: auto;
}
div#second-column-rule
{
left: 29em;
top: auto;
}
</style>
</head>
<body>
<div id="rel-pos-wrapper">
<div id="first-column-rule"></div>
<div id="second-column-rule"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,107 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-11 -->
<meta name="flags" content="">
<style type="text/css">
body {margin: 0em;}
div#rel-pos-wrapper
{
background-color: yellow;
font: 1.25em/1 serif;
height: 3em;
margin: 1em;
position: relative;
width: 32em;
}
div > div
{
font-size: 1em;
height: 3em;
position: absolute;
top: 0em;
width: 2em;
}
div#black1
{
background-color: black;
left: 1em;
}
div#black2
{
background-color: black;
left: 4em;
}
div#black3
{
background-color: black;
height: 2em;
left: 7em;
}
div#pink1
{
background-color: pink;
left: 12em;
}
div#pink2
{
background-color: pink;
left: 15em;
}
div#pink3
{
background-color: pink;
height: 2em;
left: 18em;
}
div#blue1
{
background-color: blue;
left: 23em;
}
div#blue2
{
background-color: blue;
left: 26em;
}
div#blue3
{
background-color: blue;
height: 2em;
left: 29em;
}
</style>
</head>
<body>
<div id="rel-pos-wrapper">
<div id="black1"></div>
<div id="black2"></div>
<div id="black3"></div>
<div id="pink1"></div>
<div id="pink2"></div>
<div id="pink3"></div>
<div id="blue1"></div>
<div id="blue2"></div>
<div id="blue3"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-14 -->
<meta name="flags" content="">
<style type="text/css">
body {margin: 0em;}
div
{
background-color: yellow;
font: 1.25em/1 serif;
height: 5em;
position: relative;
width: 41em;
}
div > div
{
background-color: blue;
font: inherit;
height: 3em;
position: absolute;
top: 0em;
width: 2em
}
div#first-blue
{
background-color: blue;
left: 29em;
}
div#second-blue
{
background-color: blue;
left: 33em;
}
div#third-blue
{
background-color: blue;
height: 2em;
left: 37em;
}
</style>
</head>
<body>
<div>
<div id="first-blue"></div>
<div id="second-blue"></div>
<div id="third-blue"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,108 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-14 -->
<meta name="flags" content="">
<style type="text/css">
div#rel-pos-wrapper
{
background-color: yellow;
font: 1.25em/1 serif;
height: 4em;
margin: 1em;
position: relative;
width: 41em;
}
div > div
{
font-size: 1em;
height: 3em;
position: absolute;
top: 0em;
width: 2em;
}
div#black1
{
background-color: black;
left: 1em;
top: 1em;
}
div#black2
{
background-color: black;
left: 5em;
top: 1em;
}
div#black3
{
background-color: black;
height: 2em;
left: 9em;
top: 1em;
}
div#pink1
{
background-color: pink;
left: 15em;
}
div#pink2
{
background-color: pink;
left: 19em;
}
div#pink3
{
background-color: pink;
height: 2em;
left: 23em;
}
div#blue1
{
background-color: blue;
left: 29em;
}
div#blue2
{
background-color: blue;
left: 33em;
}
div#blue3
{
background-color: blue;
height: 2em;
left: 37em;
}
</style>
</head>
<body>
<div id="rel-pos-wrapper">
<div id="black1"></div>
<div id="black2"></div>
<div id="black3"></div>
<div id="pink1"></div>
<div id="pink2"></div>
<div id="pink3"></div>
<div id="blue1"></div>
<div id="blue2"></div>
<div id="blue3"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,137 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-14 -->
<meta name="flags" content="">
<style type="text/css">
div#rel-pos-wrapper
{
background-color: yellow;
font: 1.25em/1 serif;
height: 4em;
margin: 1em;
position: relative;
width: 41em;
}
div > div
{
font-size: 1em;
height: 3em;
position: absolute;
top: 0em;
width: 2em;
}
div#black1
{
background-color: black;
left: 1em;
top: 1em;
}
div#black2
{
background-color: black;
left: 5em;
top: 1em;
}
div#black3
{
background-color: black;
height: 2em;
left: 9em;
top: 1em;
}
div#pink1
{
background-color: pink;
left: 15em;
}
div#blue-bottom1
{
background-color: blue;
height: 1em;
left: 15em;
top: 3em;
}
div#pink2
{
background-color: pink;
left: 19em;
}
div#blue-bottom2
{
background-color: blue;
height: 1em;
left: 19em;
top: 3em;
}
div#pink3
{
background-color: pink;
height: 2em;
left: 23em;
}
div#blue-bottom3
{
background-color: blue;
height: 1em;
left: 23em;
top: 3em;
}
div#blue1
{
background-color: blue;
height: 2em;
left: 29em;
}
div#blue2
{
background-color: blue;
height: 2em;
left: 33em;
}
div#blue3
{
background-color: blue;
height: 1em;
left: 37em;
}
</style>
</head>
<body>
<div id="rel-pos-wrapper">
<div id="black1"></div>
<div id="black2"></div>
<div id="black3"></div>
<div id="pink1"></div>
<div id="blue-bottom1"></div>
<div id="pink2"></div>
<div id="blue-bottom2"></div>
<div id="pink3"></div>
<div id="blue-bottom3"></div>
<div id="blue1"></div>
<div id="blue2"></div>
<div id="blue3"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-25 -->
<meta name="flags" content="ahem">
<style type="text/css">
table
{
background-color: yellow;
border-right: lime solid 1em;
border-spacing: 0px;
color: lime;
font: 1.25em/1 Ahem;
margin: 1em 0;
table-layout: fixed;
width: 21em;
}
td {padding: 0em;}
</style>
</head>
<body>
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
<table><tr><td>G<br>H</td><td>I<br>J</td></tr></table>
<table><tr><td>G<br>H</td><td>I<br>J</td></tr></table>
</body>
</html>

View file

@ -0,0 +1,209 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-09 -->
<meta name="flags" content="">
<style type="text/css">
div#rel-pos-wrapper
{
background-color: yellow;
font: 1.25em/1 serif;
height: 2em;
position: relative;
width: 32em;
}
div > div
{
font-size: 1em;
height: 2em;
position: absolute;
top: 0;
width: 2em;
}
div#black1
{
background-color: black;
left: 1em;
}
div#black2
{
background-color: black;
left: 4em;
}
div#black3
{
background-color: black;
left: 7em;
}
div#black4
{
background-color: black;
height: 1em;
left: 12em;
}
div#black5
{
background-color: black;
height: 1em;
left: 15em;
}
div#blue1
{
background-color: blue;
left: 23em;
}
div#blue2
{
background-color: blue;
left: 26em;
}
div#blue3
{
background-color: blue;
left: 29em;
}
div#blue4
{
background-color: blue;
height: 1em;
left: 34em;
}
div#yellow1
{
background-color: yellow;
height: 1em;
left: 36em;
width: 1em;
}
div#blue5
{
background-color: blue;
height: 1em;
left: 37em;
}
div#yellow2
{
background-color: yellow;
height: 1em;
left: 39em;
width: 3em;
}
div#pink1
{
background-color: pink;
left: 45em;
}
div#yellow3
{
background-color: yellow;
left: 47em;
width: 1em;
}
div#pink2
{
background-color: pink;
left: 48em;
}
div#yellow4
{
background-color: yellow;
left: 50em;
width: 1em;
}
div#pink3
{
background-color: pink;
left: 51em;
}
div#pink4
{
background-color: pink;
height: 1em;
left: 56em;
}
div#yellow5
{
background-color: yellow;
height: 1em;
left: 58em;
width: 1em;
}
div#pink5
{
background-color: pink;
height: 1em;
left: 59em;
}
div#yellow6
{
background-color: yellow;
height: 1em;
left: 61em;
width: 3em;
}
div#margin-right
{
background-color: transparent;
height: 1em;
left: 64em;
width: 1em;
}
</style>
</head>
<body>
<div id="rel-pos-wrapper">
<div id="black1"></div>
<div id="black2"></div>
<div id="black3"></div>
<div id="black4"></div>
<div id="black5"></div>
<div id="blue1"></div>
<div id="blue2"></div>
<div id="blue3"></div>
<div id="blue4"></div>
<div id="yellow1"></div>
<div id="blue5"></div>
<div id="yellow2"></div>
<div id="pink1"></div>
<div id="yellow3"></div>
<div id="pink2"></div>
<div id="yellow4"></div>
<div id="pink3"></div>
<div id="pink4"></div>
<div id="yellow5"></div>
<div id="pink5"></div>
<div id="yellow6"></div>
<div id="margin-right"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-25 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: yellow;
border: black solid thin;
color: orange;
font: 1.25em/1 Ahem;
margin-bottom: 0.5em;
width: 30em;
}
span {color: blue;}
</style>
</head>
<body>
<p>Test passes if the 2 rectangles with orange and blue vertical stripes are <strong>identical</strong>.</p>
<div>
1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br>
9 0 1 2 3 4 5 6<span>I J K L M N O P </span>
</div>
<div>
1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br>
9 0 1 2 3 4 5 6<span>I J K L M N O P </span>
</div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
color: black;
font: 1.25em/1 Ahem;
margin-bottom: 0.5em;
width: 602px;
}
span
{
border-left: lime solid 1px;
border-right: lime solid 1px;
}
</style>
</head>
<body>
<p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
<div>
1234567890<span>ABCDEFGHIJ</span>1234567890
</div>
<div>
1234567890<span>ABCDEFGHIJ</span>1234567890
</div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
color: green;
font: 1.25em/1 Ahem;
margin-bottom: 0.5em;
width: 20em;
}
</style>
</head>
<body>
<p>Test passes if there are 2 green bars and <strong>no red</strong>.</p>
<div>12345678901234567890</div>
<div>12345678901234567890</div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-14 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: black;
border: gray solid 1em;
font: 1.25em/1 serif;
width: 15em;
}
img {vertical-align: top;}
img.yellow {padding-left: 2em;}
</style>
</head>
<body>
<div><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled"><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled"><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled"><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-02 -->
<meta name="flags" content="image">
<style type="text/css">
body {margin: 8px;}
p
{
line-height: 1.25em;
margin: 1em 0em;
}
strong {line-height: 1;}
div
{
background-color: green;
height: 100px;
left: 8px;
position: absolute;
top: 52px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-14 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: black;
border: gray solid 1em;
font: 1.25em/1 serif;
width: 14em;
}
img {vertical-align: top;}
img.white {padding-left: 2em;}
</style>
</head>
<body>
<div><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled"><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled"><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled"><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-09-03 -->
<meta name="flags" content="image">
<style type="text/css">
div {font-size: 1.25em;}
img {padding-left: 1em;}
</style>
</head>
<body>
<p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
<div>
<img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled"><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: black;
color: black;
font: 3.125em/1 Ahem;
margin-bottom: 0.2em;
width: 8.2em;
}
span {border-left: lime dashed 0.2em;}
</style>
</head>
<body>
<p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
<div>1234<span>5678</span></div>
<div>1234<span>5678</span></div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: black;
color: black;
font: 3.125em/1 Ahem;
margin-bottom: 0.2em;
width: 8.2em;
}
span {border-left: lime dotted 0.2em;}
</style>
</head>
<body>
<p>Test passes if the 2 black stripes with green dots in their center are <strong>identical</strong>.</p>
<div>1234<span>5678</span></div>
<div>1234<span>5678</span></div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: black;
color: black;
font: 3.125em/1 Ahem;
margin-bottom: 0.2em;
width: 8.2em;
}
span {border-left: lime double 0.2em;}
</style>
</head>
<body>
<p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
<div>1234<span>5678</span></div>
<div>1234<span>5678</span></div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-14 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: black;
border: gray solid 1em;
font: 1.25em/1 serif;
width: 14em;
}
img {vertical-align: top;}
img.yellow {padding-left: 2em;}
</style>
</head>
<body>
<div><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled"><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled"><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled"><img class="yellow" src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-14 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
border: gray solid 1em;
font: 1.25em/1 serif;
width: 14em;
}
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
margin: 0;
}
body>div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: black;
background: yellow;
margin: 1em;
border: 1em solid gray;
width: 14em;
height: 2em;
position: relative;
}
div div {
width: 2em;
height: 2em;
background: black;
position: absolute;
left: 0;
top: 0;
}
.a {
background: blue;
width: 1em;
}
#a1 {left: 2.43em;}
#a2 {left: 3.75em;}
#a3 {left: 6.13em;}
#a4 {left: 7.5em;}
#a5 {left: 9.9em;}
#a6 {left: 11.25em;}
</style>
</head>
<body>
<div>
<div></div>
<div id="a1" class="a"></div>
<div id="a2"></div>
<div id="a3" class="a"></div>
<div id="a4"></div>
<div id="a5" class="a"></div>
<div id="a6"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: black;
color: black;
font: 3.125em/1 Ahem;
margin-bottom: 0.2em;
width: 8.2em;
}
span {border-left: lime groove 0.2em;}
</style>
</head>
<body>
<p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
<div>1234<span>5678</span></div>
<div>1234<span>5678</span></div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: black;
font: 3.125em/1 serif;
height: 1em;
margin-bottom: 0.2em;
width: 8.2em;
}
</style>
</head>
<body>
<p>Test passes if the 2 black stripes are <strong>identical</strong>.</p>
<div></div>
<div></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-09-03 -->
<meta name="flags" content="image">
<style type="text/css">
body
{
font: 1.25em/1 serif;
margin-left: 0em;
}
div:first-child, div + div + div {margin-left: 1em;}
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="120" height="40" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
margin: 0;
}
body>div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: black;
background: yellow;
margin: 1em;
border: 1em solid gray;
width: 15em;
height: 2em;
}
div div {
width: 2em;
height: 2em;
float: left;
}
.a {
color: blue;
width: 1em;
margin-left: 1em;
}
div+div+div {
left: 11em;
}
</style>
</head>
<body>
<div>
<div>xx xx</div>
<div class="a">x x</div>
<div>xx xx</div>
<div class="a">x x</div>
<div>xx xx</div>
<div class="a">x x</div>
<div>xx xx</div>
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: black;
color: black;
font: 3.125em/1 Ahem;
margin-bottom: 0.2em;
width: 8.2em;
}
span {border-left: lime ridge 0.2em;}
</style>
</head>
<body>
<p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
<div>1234<span>5678</span></div>
<div>1234<span>5678</span></div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-15 -->
<meta name="flags" content="">
<style type="text/css">
body {margin: 8px;}
p
{
line-height: 1.25em;
margin: 1em 0em;
}
strong {line-height: 1;}
div
{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="ahem">
<style type="text/css">
div
{
background-color: black;
color: black;
font: 3.125em/1 Ahem;
margin-bottom: 0.2em;
width: 8.2em;
}
span {border-left: lime solid 0.2em;}
</style>
</head>
<body>
<p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
<div>1234<span>5678</span></div>
<div>1234<span>5678</span></div>
</body>
</html>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-rule</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
margin: 0;
}
body>div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: black;
background: blue;
margin: 1em;
border: 1em solid gray;
width: 14em;
height: 2em;
position: relative;
}
span {
margin-left: 7.5em;
width: 2em;
height: 2em;
display: inline-block;
}
div div {
background: blue;
position: absolute;
height: 2em;
width: 2em;
top: 0;
left: -2em;
}
div div+div {
left: 13em;
width: 11.75em;
}
</style>
</head>
<body>
<div>
<span>xx xx</span>
<div></div>
<div></div>
</div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-15 -->
<meta name="flags" content="ahem">
<style type="text/css">
body {margin: 8px;}
p
{
line-height: 1.25em;
margin: 1em 0em;
}
strong {line-height: 1;}
div
{
border-collapse: collapse;
border-left: orange groove 100px;
color: transparent;
display: table;
font: 6.25em/1 Ahem;
}
div + div
{
position: relative;
top: 10px;
}
</style>
</head>
<body>
<p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
<div>T</div>
<div>T</div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-15 -->
<meta name="flags" content="ahem">
<style type="text/css">
body {margin: 8px;}
p
{
line-height: 1.25em;
margin: 1em 0em;
}
strong {line-height: 1;}
div
{
border-collapse: collapse;
border-left: orange ridge 100px;
color: transparent;
display: table;
font: 6.25em/1 Ahem;
}
div + div
{
position: relative;
top: 10px;
}
</style>
</head>
<body>
<p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
<div>T</div>
<div>T</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: yellow;
font-size: 1.25em;
line-height: 1;
margin-bottom: 0.5em;
width: 10em;
}
img
{
padding-right: 4em;
vertical-align: top;
}
</style>
</head>
<body>
<p>Test passes if the 3 rectangles are <strong>identical</strong>.</p>
<div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><br><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled"><br><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><br><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled"><br><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><br><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled"><br><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-16 -->
<meta name="flags" content="image">
<style type="text/css">
div#inline-block
{
background-color: yellow;
border: gray solid 1em;
display: inline-block;
font-size: 1.25em;
}
div + div {line-height: 1;}
img {vertical-align: top;}
img.padding-left {padding-left: 1em;}
img.padding-left-right {padding: 0em 1em;}
</style>
</head>
<body>
<div id="inline-block">
<div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img class="padding-left" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"><img class="padding-left-right" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled"></div>
<div><img src="support/black20x20.png" width="220" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled"><img class="padding-left" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled"><img class="padding-left-right" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled"><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-16 -->
<meta name="flags" content="image">
<style type="text/css">
div#inline-block
{
background-color: yellow;
border: gray solid 1em;
display: inline-block;
font-size: 1.25em;
}
div + div {line-height: 1;}
img {vertical-align: top;}
</style>
</head>
<body>
<div id="inline-block">
<div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-yellow.png" width="160" height="60" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicol | column-span: all | block-level child</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body>div {
font-family: ahem;
font-size: 1em;
line-height: 1;
color: black;
background: black;
}
h1 {
margin-top: 0;
padding-top: 0.66em;
}
</style>
</head>
<body>
<div>
<div>
<h1>FAIL</h1>
FAIL<br>
FAIL<br>
FAIL<br>
FAIL<br>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,109 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-19 -->
<meta name="flags" content="">
<style type="text/css">
div#rel-pos-wrapper
{
background-color: blue;
font-size: 1.25em;
height: 10em;
position: relative;
width: 12em;
}
div > div {position: absolute;}
div#first-black
{
background-color: black;
left: 7em;
height: 1em;
top: 0em;
width: 5em;
}
div#first-yellow
{
background-color: yellow;
left: 7em;
height: 3em;
top: 1em;
width: 1em;
}
div#first-white
{
background-color: white;
left: 10em;
height: 9em;
top: 1em;
width: 2em;
}
div#second-black
{
background-color: black;
left: 2em;
height: 1em;
top: 2em;
width: 3em;
}
div#second-yellow
{
background-color: yellow;
left: 2em;
height: 3em;
top: 3em;
width: 1em;
}
div#third-black
{
background-color: black;
left: 2em;
height: 1em;
top: 6em;
width: 3em;
}
div#third-yellow
{
background-color: yellow;
left: 2em;
height: 3em;
top: 7em;
width: 1em;
}
div#second-white
{
background-color: white;
left: 5em;
height: 4em;
top: 6em;
width: 7em;
}
</style>
</head>
<body>
<div id="rel-pos-wrapper">
<div id="first-black"></div>
<div id="first-yellow"></div>
<div id="first-white"></div>
<div id="second-black"></div>
<div id="second-yellow"></div>
<div id="third-black"></div>
<div id="third-yellow"></div>
<div id="second-white"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-19 -->
<meta name="flags" content="">
<style type="text/css">
div#multi-column
{
background-color: black;
height: 8em;
width: 10em;
}
div#overflow
{
bottom: 8em;
font: 1em/1 serif;
margin-left: 10em;
position: relative;
}
</style>
</head>
<body>
<div id="multi-column"></div>
<div id="overflow">abc deg<br>ghk mno</div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-18 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
border: gray solid 1.25em;
width: 160px;
}
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled"> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled"> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled"> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled"> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled"> <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-19 -->
<meta name="flags" content="image">
<style type="text/css">
div {width: 240px;}
img {vertical-align: top;}
</style>
</head>
<body>
<div>
<img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled"><br>
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-orange.png" width="100" height="20" alt="Image download support must be enabled">
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><br>
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><br>
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><br>
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><br>
<img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><br>
<img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled"><br>
<img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-19 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
border: gray solid 1.25em;
width: 160px;
}
img {vertical-align: top;}
</style>
</head>
<body>
<div>
<img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled">
<img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled">
<img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled">
<img src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled">
<img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled">
<img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-19 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
border: gray solid 1.25em;
width: 160px;
}
img {vertical-align: top;}
</style>
</head>
<body>
<div>
<img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled">
<img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled">
<img src="support/swatch-yellow.png" width="160" height="40" alt="Image download support must be enabled">
<img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled">
<img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled">
<img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolomn | column-span inside block</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body>div {
background: black;
width: 22em;
height: 2em;
position: absolute;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-span</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
margin: 0;
}
body>div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
color: navy;
background: yellow;
margin: 1em;
border: 1em solid gray;
width: 8em;
height: 13em;
position: relative;
float: left;
overflow: hidden;
}
div div {
position: absolute;
top: 0;
left: 0;
width: 8em;
height: 2em;
background: navy;
}
#s2 {
top: 11em;
}
#s3 {
background: black;
top: 3em;
}
#s4 {
background: pink;
top: 5em;
height: 1em;
}
#s5 {
background: black;
top: 6em;
height: 1em;
}
#s6 {
background: pink;
top: 7em;
height: 1em;
}
#s7 {
background: black;
top: 9em;
height: 1em;
}
</style>
</head>
<body>
<div>
<div></div>
<div id="s2"></div>
<div id="s3"></div>
<div id="s4"></div>
<div id="s5"></div>
<div id="s6"></div>
<div id="s7"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-22 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
font-size: 1.25em;
line-height: 1;
}
img {vertical-align: top;}
img:first-child {padding-left: 5em;}
img#no-padding {padding-left: 0em;}
</style>
</head>
<body>
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled"></div>
<div><img id="no-padding" src="support/swatch-pink.png" width="220" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="100" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled"><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled"><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled"></div>
<div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-22 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
font: 1.25em/1 serif;
border: 1em solid gray;
width: 11em;
height: 5em;
position: relative;
}
img {position: absolute;}
img#first-blue {left: 0em; top: 0em;}
img#second-blue {left: 3em; top: 0em;}
img#first-pink {left: 6em; top: 0em;}
img#second-pink {left: 9em; top: 0em;}
img#black {left: 0em; top: 2em;}
img#first-yellow {left: 6em; top: 2em;}
img#second-yellow {left: 9em; top: 2em;}
img#first-orange {left: 0em; top: 3em;}
img#second-orange {left: 3em; top: 3em;}
</style>
</head>
<body>
<div>
<img id="first-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"> <img id="second-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"> <img id="first-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled"> <img id="second-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled">
<img id="black" src="support/black20x20.png" width="110" height="20" alt="Image download support must be enabled">
<img id="first-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled">
<img id="second-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled">
<img id="first-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled">
<img id="second-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled">
</div>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-23 -->
<meta name="flags" content="image">
</head>
<body>
<div><img src="support/black20x20.png" width="120" height="20" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-23 -->
<meta name="flags" content="image">
<style type="text/css">
div
{
background-color: yellow;
height: 360px;
width: 300px;
}
img + img {padding-left: 110px;}
</style>
</head>
<body>
<div><img src="support/black20x20.png" width="60" height="360" alt="Image download support must be enabled"><img src="support/black20x20.png" width="60" height="360" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | table-cell, vertical-align</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
div {
font-family: ahem;
font-size: 1em;
line-height: 1em;
vertical-align: middle;
color: white;
background: #3366CC;
width: 6em;
height: 8em;
}
div+div {
margin-top: 10em;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-23 -->
<meta name="flags" content="ahem">
<style type="text/css">
body
{
font: 1.25em/1 Ahem;
width: 30em;
}
div
{
background-color: yellow;
color: black;
orphans: 1;
widows: 1;
}
</style>
</head>
<body>
<div>d da&nbsp; d da&nbsp; d da&nbsp; d da&nbsp; d da&nbsp;<br>
dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp;<br>
dame&nbsp; dame&nbsp; dame&nbsp; dame&nbsp; dame&nbsp;<br>
damer damer damer damer damer <br>
d da&nbsp; d da&nbsp; d da&nbsp; d da&nbsp;<br>
dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp;<br>
dame&nbsp; dame&nbsp; dame&nbsp; dame&nbsp;<br>
damer damer damer damer
</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-23 -->
<meta name="flags" content="image">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0px;
border: gray solid 1em;
font: 1.25em/1 serif;
}
td {padding: 0 1em 0 0;}
img, td {vertical-align: top;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td>
<td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled"></td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>multicolumn | column-width</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<style type="text/css">
body {
margin: 0;
width: 40em;
}
div {
font-family: monospace;
font-size: 1em;
line-height: 1em;
color: black;
background: yellow;
orphans: 1;
widows: 1;
}
span {
float: left;
width: 8em;
}
div::after {
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<div>
<span>
one two three four
five six seven eight
</span>
<span>
nineten eleven twelve
thirtn
</span>
<span>
fourtnfiftn sixtn
seventn eightn
</span>
<span>
ninetn twenty
hundred thousand
</span>
<span>
million billion
trillion
</span>
</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-23 -->
<meta name="flags" content="image">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0px;
border: gray solid 1em;
font: 1.25em/1 serif;
}
td {padding: 0 1em 0 0;}
img, td {vertical-align: top;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"></td>
<td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"></td>
<td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"></td>
<td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"></td>
</tr>
<tr>
<td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"></td>
<td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled"></td>
<td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"></td>
<td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"></td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-24 -->
<meta name="flags" content="image">
<style type="text/css">
table
{
background-color: yellow;
border-spacing: 0px;
border: gray solid 1em;
font: 1.25em/1 serif;
}
td {padding: 0 4em 0 0;}
img, td {vertical-align: top;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled"><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled"></td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-24 -->
<meta name="flags" content="image">
<style type="text/css">
img {vertical-align: top;}
</style>
</head>
<body>
<div><img src="support/swatch-lime.png" width="100" height="300" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

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