mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/animations.css" rel="stylesheet" />
|
||||
<style>
|
||||
.transformed {
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
.flow {
|
||||
color: green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
||||
|
||||
<div class="region">
|
||||
<div class="transformed flow rotate once">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.flex {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.region {
|
||||
width: 100px;
|
||||
background-color: gray;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a green square inside a gray square.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="region">
|
||||
<div class="flex">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a green square.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
XXXXX<br />
|
||||
XXXXX<br />
|
||||
XXXXX<br />
|
||||
XXXXX<br />
|
||||
XXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.blue {
|
||||
height: 60px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
position: relative;
|
||||
bottom: 40px;
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a blue rectangle and a green rectangle, from left to right in this order.</li>
|
||||
<li>The blue rectangle one the left should be taller than the green rectangle on the right.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="blue"> </div>
|
||||
<div class="green"> </div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
line-height: 1em;
|
||||
font-size: 20px;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a horizontal green stripe.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">
|
||||
XXXXX<br />
|
||||
XXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see three horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="content">XXXX</div>
|
||||
<div class="content">XXXX</div>
|
||||
<div class="content">XXXX</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.c1, .c2 {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: blue;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a column of three horizontal stripes with colors in the following order:
|
||||
green, blue, green.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="c2">XXX</div>
|
||||
<div class="c1">XXX</div>
|
||||
<div class="c2">XXX</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.white {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you can see two squares placed on the same horizontal line. Each square consists of two
|
||||
vertical halves. The left square has the left half colored green and the right half colored blue.
|
||||
The right square has left half colored blue and the right half colored green.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="block green"></div><div class="block blue"></div><div class="block white"></div><div class="block blue"></div><div class="block green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.block {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you can see two squares: a green square at the top and a blue square at the bottom.</li>
|
||||
<li>The two squares should be of the same size.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="block green"></div>
|
||||
<div class="block blue"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.column {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>The green and blue rectangles are regions placed inside a flexbox with column wrap flow.</li>
|
||||
<li>Test passes if you see two columns with a total of 6 alternating horizontal green and blue stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="column">
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
</div><div class="column">
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.fixed {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
margin-bottom: 20px;
|
||||
background-color: green;
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see two green stripes.</li>
|
||||
<li>You should not see any red.</li>
|
||||
</ul>
|
||||
<div class="fixed"></div>
|
||||
<div class="fixed"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.stripe {
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
margin-right: 26px;
|
||||
margin-top: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see three horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see a rectangle having the left half colored green and the right half colored
|
||||
blue.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="block green"></div><div class="block blue"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.stripe {
|
||||
background-color: green;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
margin-top: 39px;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see you three identical green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.stripe {
|
||||
background-color: green;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see three horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
<div class="stripe"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<script src="../support/Three.js" type="text/javascript"></script>
|
||||
<script src="../support/static-cube.js" type="text/javascript"></script>
|
||||
<style>
|
||||
.flow,
|
||||
.region {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.region {
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a cube (with blue, teal and purple sides) inside a black-bordered rectangle and no red.</p>
|
||||
|
||||
<div class="region">
|
||||
<div class="flow" id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<script src="../support/Three.js" type="text/javascript"></script>
|
||||
<script src="../support/static-cube.js" type="text/javascript"></script>
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.region {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
margin: -250px 100px 0px 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a continuous run of text over a cube (with blue, teal and purple sides) and no red.</p>
|
||||
|
||||
<div id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
</div>
|
||||
<div class="region">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, veniam, dolorum earum molestias iusto corrupti quaerat unde. Nihil, ex, architecto enim doloremque amet ipsa distinctio quibusdam iste eveniet minima quisquam.
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" />
|
||||
<style>
|
||||
.first, .second {
|
||||
width: 80px;
|
||||
background-color: green;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.second {
|
||||
height: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Test passes if you see two horizontal green stripes.</li>
|
||||
<li>You shouldn't see any red.</li>
|
||||
</ul>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: #5555FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a purple square below.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a green square below with a vertical scrollbar.</li>
|
||||
<li>You should be able to drag the scrollbars</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: lime;
|
||||
}
|
||||
.region {
|
||||
margin: .5em;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see two green squares below.</li>
|
||||
</ol>
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.translucent {
|
||||
color: #5555FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.opaque {
|
||||
color: blue;
|
||||
/*a light-ish blue, to give us a nice purple when alpha-blended with red*/
|
||||
opacity: 1;
|
||||
}
|
||||
#region {
|
||||
width: 100px;
|
||||
height: 180px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see four alternating purple and blue rectangles below.</li>
|
||||
</ol>
|
||||
<div id="region">
|
||||
<div id="content">
|
||||
<div class="translucent">
|
||||
xxxxx<br />xxxxx<br />xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br />xxxxx<br />xxxxx
|
||||
</div>
|
||||
<div class="translucent">
|
||||
xxxxx<br />xxxxx<br />xxxxx
|
||||
</div>
|
||||
<div class="opaque">
|
||||
xxxxx<br />xxxxx<br />xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#content {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
#content-child {
|
||||
position: absolute;
|
||||
color: green;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>You should see no red.</li>
|
||||
<li>Test passes if you see a dark green square in the middle of a light green square.</li>
|
||||
</ol>
|
||||
<div id="content">
|
||||
<div id="content-child">
|
||||
xxxx
|
||||
xxxx
|
||||
xxxx
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a square with a black border with some text inside it. No red
|
||||
should be visible at any time during this test.</li>
|
||||
<li>Click between the two colored markers (green and blue) and type “<strong>foobar
|
||||
bazquux</strong>”</li>
|
||||
<li>Test passes if the text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border.</li>
|
||||
</ol>
|
||||
|
||||
<div class="region">
|
||||
<p contenteditable="true" class="content">This is some text content. It contains two colored
|
||||
markers: <span class="inline-marker green"></span> <span id="marked">foobar bazquux</span> <span class="inline-marker blue"></span>.<br />
|
||||
Follow the instructions above to test CSS Regions and <code>contentEditable</code></p>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a square with a black border with some text inside it. No red
|
||||
should be visible at any time during this test.</li>
|
||||
<li>Click between the two gray markers and type “<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>No (new) text should appear between the gray markers</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click between the two colored markers (green and blue) and type “<strong>foobar
|
||||
bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
This is some text that must not be editable. Not even the text between
|
||||
<em><span class="inline-marker gray"></span> <span id="marked-inactive">these two markers</span>
|
||||
<span class="inline-marker gray"></span>.</em>
|
||||
<div contenteditable="true">
|
||||
However, this text <em><span class="inline-marker green"></span> <span id="marked-active">
|
||||
foobar bazquux</span> <span class="inline-marker blue"></span></em>
|
||||
should be editable.
|
||||
</div>
|
||||
And another non-editable text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 2px solid blue;
|
||||
}
|
||||
.region {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
.region > p {
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a rectangle with a blue border with some text inside it and below
|
||||
it a rectangle with a black border with some text inside it. No red should be visible
|
||||
at any time during this test.</li>
|
||||
<li>Click between the two colored markers (green and blue) inside the blue rectangle and
|
||||
type “<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the blue border</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click between the two colored markers (green and blue) inside the black rectangle and
|
||||
type “<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="container">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> foobar bazquux <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
Likewise, this text <em><span class="inline-marker green"></span> foobar bazquux <span class="inline-marker blue"></span></em> should be editable.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a rectangle with a black border with some text inside it. No
|
||||
red should be visible at any time during this test.</li>
|
||||
<li>Click between the first pair of green and blue colored markers and type
|
||||
“<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click between the second pair of green and blue colored markers and type
|
||||
“<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
First line of editable content.<br />
|
||||
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-parent">foobar bazquux</span> <span class="inline-marker blue"></span></em>.
|
||||
<div>
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-child">foobar bazquux</span> <span class="inline-marker blue"></span></em> should be editable.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 300px;
|
||||
height: 75px;
|
||||
border: 2px solid black;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a rectangle with a black border with some text inside it. No
|
||||
red should be visible at any time during this test.</li>
|
||||
<li>Click between the first pair of green and blue colored markers and type
|
||||
“<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click between the second pair of green and blue colored markers and type
|
||||
“<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-one">foobar bazquux</span> <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-two">foobar bazquux</span> <span class="inline-marker blue"></span></em> should be editable.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
max-height: 150px;
|
||||
border: 2px solid black;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a rectangle with a black border with some text inside it. No
|
||||
red should be visible at any time during this test.</li>
|
||||
<li>Click between the first pair of green and blue colored markers and type
|
||||
“<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click between the second pair of green and blue colored markers and type
|
||||
“<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-one">foobar bazquux</span> <span class="inline-marker blue"></span>.</em>
|
||||
|
||||
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-two">foobar bazquux</span> <span class="inline-marker blue"></span></em> should be editable.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.editable-container {
|
||||
width: 300px;
|
||||
border: 2px solid blue;
|
||||
}
|
||||
.editable {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
margin: .5em 0 .5em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a rectangle with a blue border and a rectangle with a black border.
|
||||
The blue rectangle should have one block of text inside it and the black rectangle
|
||||
should have two blocks of text inside it. No red should be visible at any time during
|
||||
this test.</li>
|
||||
<li>Double click on the word “editable” in the blue rectangle and type
|
||||
“foobar bazquux”.
|
||||
<ul>
|
||||
<li>The word “editable” should be replaced with “foobar bazquux”.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Repeat the steps above, but for the two occurrences of the word “editable”
|
||||
in the black rectangle. The expected results are the same as for the previous step.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div contenteditable="true" class="editable-container">
|
||||
<p class="editable">
|
||||
This text should be displayed outside of the black border and <span id="marked-outside">foobar bazquux</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true">
|
||||
<p class="editable">
|
||||
This text should be displayed inside the black border and it should also be <span id="marked-inside">foobar bazquux</span>.
|
||||
</p>
|
||||
<p class="editable">
|
||||
This text should also be displayed inside the black border and <span id="marked-inside-new">foobar bazquux</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a square with a black border with some text inside it. No
|
||||
red should be visible at any time during this test.</li>
|
||||
<li>Click between the green and blue colored markers and type “<strong>foobar
|
||||
bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text should not be editable.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div contenteditable="true" class="region">
|
||||
<div class="content flowed">
|
||||
This is some text that should not be editable. Not even the text between
|
||||
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
border: 2px solid black;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a rectangle with a black border with some text inside it. No
|
||||
red should be visible at any time during this test.</li>
|
||||
<li>Click between the green and blue colored markers and type “<strong>foobar
|
||||
bazquux</strong>”
|
||||
<ul>
|
||||
<li>The text should not be editable.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
This is some text that should not be editable.<br />
|
||||
Not even the text between <em><span class="inline-marker green"></span>
|
||||
<span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<link href="../support/common.css" rel="stylesheet" />
|
||||
<style>
|
||||
.content {
|
||||
font-family: Times, serif;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.region {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 2px solid black;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Below you should see a square with a black border with some text inside it. No
|
||||
red should be visible at any time during this test.</li>
|
||||
<li>Double click the “<strong>editable</strong>” word between the green and
|
||||
blue colored markers and type “<strong>foobar bazquux</strong>”
|
||||
<ul>
|
||||
<li>The word “editable” should be replaced with “foobar bazquux”.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content flowed">
|
||||
This is some text that should be editable. Just like the <em><span class="inline-marker green"></span> <span id="marked-one">foobar bazquux</span> <span class="inline-marker blue"></span></em> text between these markers.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ol, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.region {
|
||||
width: 200px;
|
||||
background-color: lightgray;
|
||||
margin: 1em 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if there are two gray rectangles, each with a 4 items list in it.<br />
|
||||
The first list should not be numbered and the second should be numbered, starting at 1.<br />
|
||||
Both the list markers for the first list and the numbers for the second list should be outside of the gray rectangles.
|
||||
</p>
|
||||
<div class="region">
|
||||
<ul>
|
||||
<li>Unordered list, item 1</li>
|
||||
<li>Unordered list, item 2</li>
|
||||
<li>Unordered list, item 3</li>
|
||||
<li>Unordered list, item 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="region">
|
||||
<ol>
|
||||
<li>Ordered list, item 1</li>
|
||||
<li>Ordered list, item 2</li>
|
||||
<li>Ordered list, item 3</li>
|
||||
<li>Ordered list, item 4</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ul:first-of-type, ol:first-of-type {
|
||||
color: blue;
|
||||
}
|
||||
ul:nth-of-type(3) {
|
||||
color: green;
|
||||
}
|
||||
ol, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if there are two gray rectangles: the first with two numbered lists (3 items each), the second with three un-numbered lists (2 items each).<br />
|
||||
First list of each type should be blue, second list of each type should be black and the third un-ordered list should be green.
|
||||
</p>
|
||||
<p>Each numbered list should start at 1.<br />
|
||||
Both the numbers and the list markers should be outside of the gray rectangles.</p>
|
||||
<div id="r1" class="region">
|
||||
<ol>
|
||||
<li>Ordered list 1, item 1</li>
|
||||
<li>Ordered list 1, item 2</li>
|
||||
<li>Ordered list 1, item 3</li>
|
||||
</ol>
|
||||
<ol>
|
||||
<li>Ordered list 2, item 1</li>
|
||||
<li>Ordered list 2, item 2</li>
|
||||
<li>Ordered list 2, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="r2" class="region">
|
||||
<ul>
|
||||
<li>Unordered list 1, item 1</li>
|
||||
<li>Unordered list 1, item 2</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Unordered list 2, item 1</li>
|
||||
<li>Unordered list 2, item 2</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Unordered list 3, item 1</li>
|
||||
<li>Unordered list 3, item 2</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#outer-ordered-1 {
|
||||
padding: 0;
|
||||
}
|
||||
#r2 ol, #r2 ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#outer-ordered-1 ol,
|
||||
#outer-ordered-2 ol {
|
||||
color: blue;
|
||||
}
|
||||
#outer-ordered-2 ol ol {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if there are two gray rectangles: each with a list with another lists nested in it. The numbers for the black list in the first rectangle, and the numbers for all the lists in the second rectangle should be rendered outside of the gray boxes</p>
|
||||
<p>The list in the first rectangle should be black, with two blue nested lists in it. The nested lists should appear after the first and the second items, they should be indented and numbered starting at 1.</p>
|
||||
<p>The list in the second rectangle should be black, with a blue nested list in it that has in turn a nested green list in it. The numbers in the list items text should coincide with the list item numbers.</p>
|
||||
<div id="r1" class="region">
|
||||
<ol id="outer-ordered-1">
|
||||
<li>First ordered list, item 1
|
||||
<ol>
|
||||
<li>First inner ordered list, item 1</li>
|
||||
<li>First inner ordered list, item 2</li>
|
||||
<li>First inner ordered list, item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>First ordered list, item 2
|
||||
<ol>
|
||||
<li>Second inner ordered list, item 1</li>
|
||||
<li>Second inner ordered list, item 2</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>First ordered list, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="r2" class="region">
|
||||
<ol id="outer-ordered-2">
|
||||
<li>Second ordered list, item 1</li>
|
||||
<li>Second ordered list, item 2
|
||||
<ol>
|
||||
<li>Last inner ordered list, item 1</li>
|
||||
<li>Last inner ordered list, item 2
|
||||
<ol>
|
||||
<li>Innermost ordered list, item 1</li>
|
||||
<li>Innermost ordered list, item 2</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Last inner ordered list, item 3</li>
|
||||
<li>Last inner ordered list, item 4</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Second ordered list, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#outer-unordered-1 {
|
||||
padding: 0;
|
||||
}
|
||||
#r2 ol, #r2 ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#outer-unordered-1 ul,
|
||||
#outer-unordered-2 ul {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
#outer-unordered-2 ul ul {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if there are two gray rectangles: each with a list with another lists nested in it. The list markers for the black list in the first rectangle, and for all the lists in the second rectangle should be rendered outside of the gray boxes</p>
|
||||
<p>The list in the first rectangle should be black, with two blue nested lists in it. The nested lists should appear after the first and the second items, they should be indented and use a different kind of bullet.</p>
|
||||
<p>The list in the second rectangle should be black, with a blue nested list in it that has in turn a nested green list in it. Each of the black, blue and green list should use different kinds of bullets and list items of the same color should have the same kind of bullet.</p>
|
||||
<div id="r1" class="region">
|
||||
<ul id="outer-unordered-1">
|
||||
<li>First unordered list, item 1
|
||||
<ul>
|
||||
<li>First inner unordered list, item 1</li>
|
||||
<li>First inner unordered list, item 2</li>
|
||||
<li>First inner unordered list, item 3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>First unordered list, item 2
|
||||
<ul>
|
||||
<li>Second inner unordered list, item 1</li>
|
||||
<li>Second inner unordered list, item 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>First unordered list, item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="r2" class="region">
|
||||
<ul id="outer-unordered-2">
|
||||
<li>Second unordered list, item 1</li>
|
||||
<li>Second unordered list, item 2
|
||||
<ul>
|
||||
<li>Last inner unordered list, item 1</li>
|
||||
<li>Last inner unordered list, item 2
|
||||
<ul>
|
||||
<li>Innermost unordered list, item 1</li>
|
||||
<li>Innermost unordered list, item 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Last inner unordered list, item 3</li>
|
||||
<li>Last inner unordered list, item 4</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Second unordered list, item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.outer-mixed-1 ul,
|
||||
.outer-mixed-1 ol {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.outer-mixed-1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if there is a gray rectangle with two black lists in it, as described below.<br />
|
||||
The first black list is a bulleted list that has a blue numbered list in it.<br />
|
||||
The second black list is a numbered list that has two blue nested lists in it: the first nested list is a bulleted list with three items, and the second list is a numbered list with two items.</p>
|
||||
<p>The numbers and bullets for the black lists should be rendered outside the gray rectangle, while the blue list items should be indented. Also, the blue bulleted list should have a different type of bullets than the black bulleted list.</p>
|
||||
<div id="r1" class="region">
|
||||
<ul class="outer-mixed-1">
|
||||
<li>Unordered list, item 1
|
||||
<ol>
|
||||
<li>Inner ordered list, item 1</li>
|
||||
<li>Inner ordered list, item 2</li>
|
||||
<li>Inner ordered list, item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Unordered list, item 2</li>
|
||||
</ul>
|
||||
<ol class="outer-mixed-1">
|
||||
<li>Ordered list, item 1
|
||||
<ul>
|
||||
<li>Unordered inner list, item 1</li>
|
||||
<li>Unordered inner list, item 2</li>
|
||||
<li>Unordered inner list, item 3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Ordered list, item 2
|
||||
<ol>
|
||||
<li>Second inner ordered list, item 1</li>
|
||||
<li>Second inner ordered list, item 2</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.outer-mixed-2 ul,
|
||||
.outer-mixed-2 ol {
|
||||
color: blue;
|
||||
}
|
||||
.outer-mixed-2 ol ul {
|
||||
color: green;
|
||||
}
|
||||
.outer-mixed-2 ol ul ol {
|
||||
color: red;
|
||||
}
|
||||
#r2 ol, #r2 ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if there is a gray rectangle with a list in it, as described below. The list markers and numbers for the lists should be rendered outside of the gray rectangle.</p>
|
||||
<p>The rectangle should contain a black, bulleted list. This list should contain a blue numbered list after the second item. The numbering on the blue list should start at 1. The blue list should contain a green, bulleted list after its second item. The green bulleted list should contain a red, numbered list after its second item. The numbering on the red list should start at 1, too.<br />
|
||||
The green list should use different bullets than the black list.<br />
|
||||
None of the list items should be indented – as such, they should render as a plain list, with varying types of bullets and numberings. The sequence of the colors should be, from top to bottom: black, blue, green, red, blue, black.</p>
|
||||
<div id="r2" class="region">
|
||||
<ul class="outer-mixed-2">
|
||||
<li>Outer unordered list, item 1</li>
|
||||
<li>Outer unordered list, item 2
|
||||
<ol>
|
||||
<li>Inner ordered list, item 1</li>
|
||||
<li>Inner ordered list, item 2
|
||||
<ul>
|
||||
<li>Inner unordered list, item 1</li>
|
||||
<li>Inner unordered list, item 2
|
||||
<ol>
|
||||
<li>Innermost ordered list, item 1</li>
|
||||
<li>Innermost ordered list, item 2</li>
|
||||
<li>Innermost ordered list, item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Inner ordered list, item 3</li>
|
||||
<li>Inner ordered list, item 4</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Outer unordered list, item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ol ol {
|
||||
color: blue;
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightgray;
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if there is a gray rectangle with a numbered list, as described below.<br />
|
||||
The numbers for the list should be outside the rectangle and all items should render at the same indentation level.<br />
|
||||
The second and third items in the list should be blue and numbered using roman numerals, CI and C, respectively. All the other items in the list should be black and numbered with decimal numbers corresponding to the item text.<br />
|
||||
The final numbering of this list should be: 3, CI, C, 2, 1, 10, 11, 12, 13.</p>
|
||||
<div id="r1" class="region">
|
||||
<ol reversed="true">
|
||||
<li>List item no. 3
|
||||
<ol start="101" reversed="">
|
||||
<li>Roman-numbered list item CI</li>
|
||||
<li>Roman-numbered list item C</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>List item no. 2</li>
|
||||
<li>List item no. 1</li>
|
||||
</ol>
|
||||
<ol start="10">
|
||||
<li>List item no. 10</li>
|
||||
<li>List item no. 11</li>
|
||||
<li>List item no. 12</li>
|
||||
<li>List item no. 13</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.container {
|
||||
color: #006400;
|
||||
background-color: lightgreen;
|
||||
margin: 2em;
|
||||
|
||||
}
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightblue;
|
||||
color: blue;
|
||||
}
|
||||
.region > ul,
|
||||
.region > ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.circle {
|
||||
list-style-type: circle;
|
||||
}
|
||||
.disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.roman {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two rectangles, one green and one blue, as described below:<br />
|
||||
The green rectangle should contain two lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting with 2 that has 2 items; the <strong>second list</strong> should be a bullet list with 3 items, the last one being indented and with a different type of bullet.<br />
|
||||
The blue rectangle should contain a list with items numbered/marked in different ways, as follows. Except where noted, the numbers/markers should be <em>outside</em> the the blue rectangle. The <strong>first item</strong> should be numbered with the number 1, in decimal. The <strong>second item</strong> should be bulleted. The <strong>third and fourth items</strong> should be numbered with 2 and 1 respectively, with roman numerals. Also, the <strong>third item</strong> should be indented (with the number inside the blue rectangle). The <strong>fourth and fifth items</strong> should be bulleted, with the <strong>fourth item</strong> having a different kind of bullet than the second and fifth item.
|
||||
</p>
|
||||
<div class="container">
|
||||
<ol start="2" class="decimal">
|
||||
<li>Numbered list, item 2</li>
|
||||
<li>Numbered list, item 3</li>
|
||||
</ol>
|
||||
<ul class="disc">
|
||||
<li>Bullet list, item 1</li>
|
||||
<li>Bullet list, item 3
|
||||
<ul class="circle">
|
||||
<li>Bullet sub-list, item 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="r1" class="region">
|
||||
<ol class="decimal">
|
||||
<li>Numbered list, item 1</li>
|
||||
</ol>
|
||||
<ul class="disc">
|
||||
<li>Bullet list, item 2
|
||||
<ol start="2" class="roman">
|
||||
<li>Numbered sub-list, item II</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
<ol class="roman">
|
||||
<li>Numbered sub-list, item I</li>
|
||||
</ol>
|
||||
<ul class="circle">
|
||||
<li>Bullet sub-list, item 1</li>
|
||||
</ul>
|
||||
<ul class="disc">
|
||||
<li>Bullet list, item 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.container {
|
||||
color: #006400;
|
||||
background-color: lightgreen;
|
||||
margin: 2em;
|
||||
|
||||
}
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightblue;
|
||||
color: blue;
|
||||
}
|
||||
.region > ul,
|
||||
.region > ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.latin {
|
||||
list-style-type: upper-latin;
|
||||
}
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two rectangles, one green and one blue, as described below:<br />
|
||||
The green rectangle should contain three lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting at 3, with only one item. The <strong>second list</strong> should be a bulleted list with three items. The <strong>third list</strong> should be a numbered list with two items, numbered A and C respectively.<br />
|
||||
The blue rectangle should contain a list with items numbered/marked in a different ways, as follows. As opposed to the green rectangle, the numbers/markings for the list items in the blue rectangle should be outside the rectangle. The <strong>first and second items</strong> should be numbered with 1 and 2 (decimal). The <strong>third and fourth items</strong> should be bulleted. The <strong>fifth and sixth items</strong> should be numbered with B and D respectively.</p>
|
||||
<div class="container">
|
||||
<ol start="3" class="decimal">
|
||||
<li>First numbered list, item 3</li>
|
||||
</ol>
|
||||
<ul class="disc">
|
||||
<li>Bullet list, item 1</li>
|
||||
<li>Bullet list, item 3</li>
|
||||
<li>Bullet list, item 5</li>
|
||||
</ul>
|
||||
<ol start="1" class="latin">
|
||||
<li>Second numbered list, item A</li>
|
||||
<li class="hide"></li>
|
||||
<li>Second numbered list, item C</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="r1" class="region">
|
||||
<ol class="decimal">
|
||||
<li id="theItem">First numbered list, item 1</li>
|
||||
<li class="extract">First numbered list, item 2</li>
|
||||
</ol>
|
||||
<ul class="disc">
|
||||
<li class="extract">Bullet list, item 2</li>
|
||||
<li class="extract">Bullet list, item 4</li>
|
||||
</ul>
|
||||
<ol start="2" class="latin">
|
||||
<li class="extract">Second numbered list, item B</li>
|
||||
<li class="hide"></li>
|
||||
<li class="extract">Second numbered list, item D</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.first {
|
||||
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGRDAzNDVGOTNCMEQxMUUyQkVGOEU1OTA4MTYyRjA0RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRDAzNDVGQTNCMEQxMUUyQkVGOEU1OTA4MTYyRjA0RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZEMDM0NUY3M0IwRDExRTJCRUY4RTU5MDgxNjJGMDRGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZEMDM0NUY4M0IwRDExRTJCRUY4RTU5MDgxNjJGMDRGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+rpZ8YAAAAGlJREFUeNpi/P//PwMlgImBQoDVAEZGxv9ATLELiDKEkBcIGkJMGOA1hNhAxGkIKbHwn37RiAM0UmIASPMB7B4DJmV0DPUvDDcAsQM2dWC1BAzAq5mQAQ34NBIyoAFKOxAygJHS7AwQYAAt068AjhXk+gAAAABJRU5ErkJggg==);
|
||||
list-style-position: inside;
|
||||
}
|
||||
.second {
|
||||
list-style-type: square;
|
||||
list-style-position: outside;
|
||||
}
|
||||
.third {
|
||||
list-style-type: upper-roman;
|
||||
list-style-position: inside;
|
||||
}
|
||||
.inner {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
.container {
|
||||
color: #006400;
|
||||
background-color: lightgreen;
|
||||
margin: 2em;
|
||||
float: left;
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
}
|
||||
.region {
|
||||
margin: 2em;
|
||||
background-color: lightblue;
|
||||
float: left;
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.region > ul,
|
||||
.region > ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.latin {
|
||||
list-style-type: upper-latin;
|
||||
}
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
.third li {
|
||||
font-weight: bold;
|
||||
}
|
||||
.third li span {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two rectangles, one green and one blue, as described below. Except where noted, all list items should be rendered on two lines.<br />
|
||||
The green rectangle should contain three lists, separated by a small vertical space, each with two items. The <strong>first list</strong> should use a triangle-shaped bullet and the text on the second line should start below the bullet. The <strong>second list</strong> should use a square-shaped bullet and the text on the second line should not come under the bullet. The <strong>third list</strong> should be numbered with roman numerals starting with 20 (XX) and the text on the second line should start below the number.<br />
|
||||
The blue rectangle should contain a list with items numbered/marked in different ways, as follows. The <strong>first item</strong> should use a triangle-shaped bullet and the text on the second line should start below the bullet. The <strong>second item</strong> should use a square-shaped bullet and the bullet should be outside of the blue rectangle. The <strong>third and fourth items</strong> should be one-line and numbered with letters A and B respectively. The third item should be indented while the fourth item should have the number outside the blue rectangle. The <strong>fifth item</strong> should be numbered with the roman numeral 22 (XXII) and the text on the second line should start below the number.</p>
|
||||
<div class="container">
|
||||
<ul class="first">
|
||||
<li>Custom bullet list, item 1<br /><em>Another line of text here</em></li>
|
||||
<li>Custom bullet list, item 2<br /><em>Another line of text here</em></li>
|
||||
</ul>
|
||||
<ul class="second">
|
||||
<li>Square bullet list, item 1<br /><em>Another line of text here</em></li>
|
||||
<li>Square bullet list, item 2<br /><em>Another line of text here</em></li>
|
||||
</ul>
|
||||
<ol start="20" class="third">
|
||||
<li><span>Roman numbered list, item XX<br /><em>Another line of text here</em></span></li>
|
||||
<li><span>Roman numbered list, item XXI<br /><em>Another line of text here</em></span></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="r1" class="region">
|
||||
<ul class="first">
|
||||
<li>Custom bullet list, item 3<br /><em>Another line of text here</em></li>
|
||||
</ul>
|
||||
<ul class="second">
|
||||
<li>Square bullet list, item 3<br /><em>Another line of text here</em>
|
||||
<ol class="inner">
|
||||
<li>Inner ordered list, item A</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
<ol start="2" class="inner">
|
||||
<li>Inner ordered list, item B</li>
|
||||
</ol>
|
||||
<ol start="22" class="third">
|
||||
<li><span>Roman numbered list, item XXII<br /><em>Another line of text here</em></span></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.region {
|
||||
margin-left: 2em;
|
||||
float: left;
|
||||
width: 15em;
|
||||
height: 10em;
|
||||
}
|
||||
#r1 {
|
||||
color: #006400;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
#r2 {
|
||||
color: blue;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.region > ul,
|
||||
.region > ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* We use visibility:hidden and height:0 to visually skip list items
|
||||
while forcing the counter to increse its value. */
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two rectangles, one green and one blue, as follows. Each rectangle should contain a numbered list; the numbers should be rendered outside the rectangle. The items in the first list should be numbered 1, 2 and 5 respectively, while the items in the second list should be numbered 3, 4 and 6 respectively.</p>
|
||||
<div id="r1" class="region">
|
||||
<ol>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2</li>
|
||||
<li class="hide"></li>
|
||||
<li class="hide"></li>
|
||||
<li>List item 5</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="r2" class="region">
|
||||
<ol start="3">
|
||||
<li>List item 3</li>
|
||||
<li>List item 4</li>
|
||||
<li class="hide"></li>
|
||||
<li>List item 6</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ol, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.box {
|
||||
float: left;
|
||||
width: 20em;
|
||||
height: 10em;
|
||||
margin: 0 2em;
|
||||
}
|
||||
#container {
|
||||
background-color: lightgray;
|
||||
}
|
||||
#region {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see two rectangles, each with a numbered list inside, as described below. The numbers for both of the lists should be rendered outside (to the left) of the respective rectangles.</p>
|
||||
<p>The first rectangle should be lightgray and contain a numbered list with 5 items. The items should be numbered with 2, 3, 8, 10 and 11 respectively.</p>
|
||||
<p>The second rectangle should be lightgreen and contain a numbered list with 4 items. The items should be numbered with 1, 6, 7 and 9 respectively.</p>
|
||||
<div id="container" class="box">
|
||||
<ol>
|
||||
<li value="2">List item 2</li>
|
||||
<li value="3">List item 3</li>
|
||||
<li value="8">List item 8</li>
|
||||
<li value="10">List item 10</li>
|
||||
<li value="11">List item 11</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="region" class="box">
|
||||
<ol>
|
||||
<li value="1">List item 1</li>
|
||||
<li value="6">List item 6</li>
|
||||
<li value="7">List item 7</li>
|
||||
<li value="9">List item 9</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#region {
|
||||
counter-reset: c 0;
|
||||
}
|
||||
#region p,
|
||||
#region div {
|
||||
counter-increment: c;
|
||||
margin: 1em 0;
|
||||
}
|
||||
#region p::before,
|
||||
#region div::before {
|
||||
content: "(" counter(c) ") ";
|
||||
background: darkblue;
|
||||
color: white;
|
||||
}
|
||||
#region {
|
||||
background-color: lightblue;
|
||||
border: 1px solid lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a light blue rectangle below, with eight lines of text in it. The text on each line should be black and preceded by the line number between parantheses. The line numbers should be white on a dark blue background.</p>
|
||||
<div id="region">
|
||||
<p>This is numbered line of text no. 1</p>
|
||||
<p>This is numbered line of text no. 2</p>
|
||||
<div>This is numbered line of text no. 3</div>
|
||||
<p>This is numbered line of text no. 4</p>
|
||||
<div>This is numbered line of text no. 5</div>
|
||||
<p>This is numbered line of text no. 6</p>
|
||||
<div>This is numbered line of text no. 7</div>
|
||||
<div>This is numbered line of text no. 8</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#region {
|
||||
counter-reset: p 0 d 0;
|
||||
}
|
||||
#region p,
|
||||
#region div {
|
||||
margin: 0;
|
||||
}
|
||||
#region p,
|
||||
#region div {
|
||||
counter-increment: p d;
|
||||
}
|
||||
|
||||
#region p::after,
|
||||
#region div::after {
|
||||
display: block;
|
||||
text-align: right;
|
||||
border-top: medium solid black;
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
#region p::after {
|
||||
color: red;
|
||||
content: counter(p);
|
||||
}
|
||||
#region div::after {
|
||||
color: green;
|
||||
content: counter(d);
|
||||
}
|
||||
|
||||
#region {
|
||||
width: 20em;
|
||||
background-color: lightblue;
|
||||
border: 1px solid lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Numbered <p>-s and <div>-s using different counters, displayed as blocks via ::after -->
|
||||
<p>Test passes if you see a light blue rectangle below, with eight lines of text in it. Each line of text should be black and with a thick underline. Below and to the right of each line of text you should see the number of that line, colored alternatingly red and green.</p>
|
||||
<div id="region">
|
||||
<p>This is numbered line of text no. 1</p>
|
||||
<div>This is numbered line of text no. 2</div>
|
||||
<p>This is numbered line of text no. 3</p>
|
||||
<div>This is numbered line of text no. 4</div>
|
||||
<p>This is numbered line of text no. 5</p>
|
||||
<div>This is numbered line of text no. 6</div>
|
||||
<p>This is numbered line of text no. 7</p>
|
||||
<div>This is numbered line of text no. 8</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#region {
|
||||
counter-reset: para 0;
|
||||
}
|
||||
#region p {
|
||||
counter-increment: para;
|
||||
margin: 1em 0;
|
||||
}
|
||||
#region p::before {
|
||||
content: "(" counter(para) ") ";
|
||||
background: darkblue;
|
||||
color: white;
|
||||
}
|
||||
#region {
|
||||
background-color: lightblue;
|
||||
border: 1px solid lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a light blue rectangle below, with five lines of text in it. Each line of text should be black and preceded by the line number between parantheses. The line numbers should be white on a dark blue background.</p>
|
||||
<div id="region">
|
||||
<p>This is numbered paragraph no. 1</p>
|
||||
<p>This is numbered paragraph no. 2</p>
|
||||
<p>This is numbered paragraph no. 3</p>
|
||||
<p>This is numbered paragraph no. 4</p>
|
||||
<p>This is numbered paragraph no. 5</p>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
span {
|
||||
counter-increment: spans 1;
|
||||
}
|
||||
#region {
|
||||
counter-reset: spans 0;
|
||||
}
|
||||
span::before {
|
||||
display: inline-block;
|
||||
content: counter(spans) ".";
|
||||
width: 2em;
|
||||
margin: 0 .5em;
|
||||
background: green;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#region {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a light blue rectangle below, with three blocks of black text on a single line. Each block of text should be numbered from 1 to 3 and contain the text “Visible text <em>n</em>” with <em>n</em> ranging from 1 to 3. The numbering should be white on a green background.</p>
|
||||
<div id="region">
|
||||
<span>Visible text 1</span><span>Visible text 2</span><span>Visible text 3</span>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.direction-rtl {
|
||||
direction: rtl;
|
||||
background-color: lightgray;
|
||||
}
|
||||
.writing-mode-vrl {
|
||||
writing-mode: vertical-rl;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.writing-mode-vlr {
|
||||
writing-mode: vertical-lr;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.region {
|
||||
border: thick solid black;
|
||||
width: 15em;
|
||||
height: 15em;
|
||||
float: left;
|
||||
margin: 0 1em;
|
||||
}
|
||||
.region>ol {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test pases if you see three rectangles with black borders containing a numbered list as described below. Each of the lists has a total of six items, three being in a nested list after the second item.</p>
|
||||
<p>The first rectangle should display the numbered list on a light gray background. The list items should be right-aligned, with the numbers on the right side of the list item text. Also, the list item numbering should have a period prepended to the actual number (<em>e.g.</em> <strong>.1</strong>) instead of appended to the actual number (<em>e.g.</em> <strong>1.</strong>).</p>
|
||||
<p>The second rectangle should display the numbered list on a light blue background. The text should be rotated 90 degrees clockwise with the list items progressing right to left (or top-to-bottom relative to the rotated list) – this means the right-most list item should have the number 1.</p>
|
||||
<p>The third rectangle should display the numbered list on a light green background. The text should be rotated 90 degrees clockwise, with the list items progressing left to right (or bottom-to-top relative to the rotated list) – this means the right-most list item should have the number 3.</p>
|
||||
<div class="region">
|
||||
<ol class="direction-rtl">
|
||||
<li>Top-level list, item 1</li>
|
||||
<li>Top-level list, item 2
|
||||
<ol>
|
||||
<li>First inner list, item 1</li>
|
||||
<li>First inner list, item 2</li>
|
||||
<li>First inner list, item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Top-level list, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="region">
|
||||
<ol class="writing-mode-vrl">
|
||||
<li>Top-level list, item 1</li>
|
||||
<li>Top-level list, item 2
|
||||
<ol>
|
||||
<li>First inner list, item 1</li>
|
||||
<li>First inner list, item 2</li>
|
||||
<li>First inner list, item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Top-level list, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="region">
|
||||
<ol class="writing-mode-vlr">
|
||||
<li>Top-level list, item 1</li>
|
||||
<li>Top-level list, item 2
|
||||
<ol>
|
||||
<li>First inner list, item 1</li>
|
||||
<li>First inner list, item 2</li>
|
||||
<li>First inner list, item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Top-level list, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ol ol {
|
||||
color: blue;
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
#list21, #list31 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 17em;
|
||||
height: 15em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three gray rectangles: the left one with a 4 items list, the middle one with two 2 items lists, the right one with two 5 items lists. <br /> The blue items in the right rectangle should be indented and numbered using roman numerals.</p>
|
||||
<div id="region1" class="region">
|
||||
<ol id="list1">
|
||||
<li>First list, item 1</li>
|
||||
<li>First list, item 2</li>
|
||||
<li>First list, item 3</li>
|
||||
<li>First list, item 4</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="region2" class="region">
|
||||
<ol id="list21">
|
||||
<li>List 2-1, item 1</li>
|
||||
<li>List 2-1, item 2</li>
|
||||
</ol>
|
||||
<ol id="list22">
|
||||
<li>List 2-2, item 1</li>
|
||||
<li>List 2-2, item 2</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="region3" class="region">
|
||||
<ol id="list31">
|
||||
<li>List 3-1, item 1</li>
|
||||
<li>List 3-1, item 2
|
||||
<ol>
|
||||
<li>First inner list, item i</li>
|
||||
<li>First inner list, item ii</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>List 3-1, item 3</li>
|
||||
</ol>
|
||||
<ol id="list32">
|
||||
<li>List 3-2, item 1</li>
|
||||
<li>List 3-2, item 2</li>
|
||||
<li>List 3-2, item 3
|
||||
<ol>
|
||||
<li>Second inner list, item i</li>
|
||||
<li>Second inner list, item ii</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ol {
|
||||
margin: 0;
|
||||
}
|
||||
ol ol,
|
||||
.inner {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 15em;
|
||||
height: 15em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see three gray rectangles with a number of lists inside each, as follows.</p>
|
||||
<p>The first rectangle should contain a black numbered list, with the numbers in reverse order. After the first item there should a be a blue numbered list, indented and numbered in normal order.</p>
|
||||
<p>The second rectangle should contain two numbered list. The first one should be black and numbered in reverse order while the second should be blue and numbered in normal order. They should both have the same indentation level.</p>
|
||||
<p>The third rectangle should contain two black, numbered lists, the first with three items, the second with two items. Both lists should be numbered in reverse.</p>
|
||||
<div id="r1" class="region">
|
||||
<ol reversed="reversed" id="ordered-1">
|
||||
<li>First reversed list, item 3
|
||||
<ol>
|
||||
<li>First inner list, item 1</li>
|
||||
<li>First inner list, item 2</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>First reversed list, item 2</li>
|
||||
<li>First reversed list, item 1</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div id="r2" class="region">
|
||||
<ol reversed="" id="ordered-2">
|
||||
<li>Second reversed list, item 3</li>
|
||||
<li>Second reversed list, item 2</li>
|
||||
<li>Second reversed list, item 1</li>
|
||||
</ol>
|
||||
<ol class="inner">
|
||||
<li>Second inner list, item 1</li>
|
||||
<li>Second inner list, item 2</li>
|
||||
<li>Second inner list, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div id="r3" class="region">
|
||||
<ol reversed="true" class="ordered-3">
|
||||
<li>Third reversed list, item 3</li>
|
||||
<li>Third reversed list, item 2</li>
|
||||
<li>Third reversed list, item 1</li>
|
||||
</ol>
|
||||
<ol reversed="true" class="ordered-3">
|
||||
<li>Final reversed list, item 2</li>
|
||||
<li>Final reversed list, item 1</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: items 0;
|
||||
}
|
||||
ol>li {
|
||||
counter-increment: items;
|
||||
}
|
||||
li::before {
|
||||
content: counter(items) ". ";
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
margin-right: .3em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ol.double>li {
|
||||
counter-increment: items 2;
|
||||
}
|
||||
ol.double>li::before {
|
||||
content: counter(items, upper-latin) ". ";
|
||||
}
|
||||
|
||||
ol.down-ten {
|
||||
counter-reset: items 11;
|
||||
}
|
||||
ol.down-ten>li {
|
||||
counter-increment: items -1;
|
||||
}
|
||||
ol.down-ten>li::before {
|
||||
content: counter(items, upper-roman) ". ";
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 18em;
|
||||
height: 15em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three gray rectangles as follows:<br />
|
||||
1. the first one contains a numbered, 4 items list<br />
|
||||
2. the second contains two numbered, 3 items lists – each list uses letters for numbering, starting with 'B.' and skipping every other letter (<em>e.g.</em> B, D, F)<br />
|
||||
3. the last rectangle contains a descending numbered list: it's numbered using roman numerals, starting at X (10), in decreasing order; after the second item there's an inner numbered list with 2 items, again descendingly numbered with roman numerals, starting at 10; finally, before the last item there's another inner numbered list with 2 items, labeled with letters, more precisely, the letters B and D</p>
|
||||
<div id="region1" class="region">
|
||||
<ol id="list1">
|
||||
<li>First list, item 1</li>
|
||||
<li>First list, item 2</li>
|
||||
<li>First list, item 3</li>
|
||||
<li>First list, item 4</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="region2" class="region">
|
||||
<ol class="double" id="list21">
|
||||
<li>List 2-1, item B</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item F</li>
|
||||
</ol>
|
||||
<ol start="4" class="double" id="list22">
|
||||
<li>List 2-2, item B</li>
|
||||
<li>List 2-2, item D</li>
|
||||
<li>List 2-2, item F</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="region3" class="region">
|
||||
<ol class="down-ten" id="list31">
|
||||
<li>Outer list, item X</li>
|
||||
<li>Outer list, item IX
|
||||
<ol class="down-ten">
|
||||
<li>Inner list 1, item X</li>
|
||||
<li>Inner list 1, item IX</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Outer list, item VIII</li>
|
||||
<li>Outer list, item VII</li>
|
||||
<li>Outer list, item VI
|
||||
<ol class="double">
|
||||
<li>Inner list 2, item B</li>
|
||||
<li>Inner list 2, item D</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Outer list, item V</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
#list1 ol, ul {
|
||||
counter-reset: items 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
li {
|
||||
counter-increment: items 1;
|
||||
list-style-type: none;
|
||||
}
|
||||
.twice>li {
|
||||
counter-increment: items 2;
|
||||
}
|
||||
li::before {
|
||||
content: counters(items, ".") ". ";
|
||||
display: inline-block;
|
||||
margin-right: .3em;
|
||||
text-align: right;
|
||||
}
|
||||
.roman>li::before {
|
||||
content: counters(items, ".", upper-roman) ". ";
|
||||
}
|
||||
.disc>li::before {
|
||||
content: counter(items, disc) " ";
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 17em;
|
||||
height: 15em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see a gray rectangle with a list containing sublists as follows: the outermost list items should be numbered using roman numerals; the second-level list should be a bullet list with two items; the innermost list should be numbered using three levels of decimal numbers (<em>e.g.</em> 2.1.1).</p>
|
||||
<div id="r1" class="region">
|
||||
<ol id="list1" class="roman">
|
||||
<li>Roman list, item I</li>
|
||||
<li>Roman list, item II
|
||||
<ul class="disc">
|
||||
<li>Bullet 1
|
||||
<ol>
|
||||
<li>Sub-point 2.1.1</li>
|
||||
<li>Sub-point 2.1.2</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Bullet 2
|
||||
<ol>
|
||||
<li>Sub-point 2.2.1</li>
|
||||
<li>Sub-point 2.2.2</li>
|
||||
<li>Sub-point 2.2.3</li>
|
||||
<li>Sub-point 2.2.4</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Roman list, item III</li>
|
||||
<li>Roman list, item IV</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ol, ul {
|
||||
counter-reset: items 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
li {
|
||||
counter-increment: items 1;
|
||||
list-style-type: none;
|
||||
}
|
||||
.twice>li {
|
||||
counter-increment: items 2;
|
||||
}
|
||||
li::before {
|
||||
content: counters(items, ".") ". ";
|
||||
display: inline-block;
|
||||
margin-right: .3em;
|
||||
text-align: right;
|
||||
}
|
||||
.roman>li::before {
|
||||
content: counters(items, ".", upper-roman) ". ";
|
||||
}
|
||||
.latin>li::before {
|
||||
content: counters(items, ".", upper-latin) ". ";
|
||||
}
|
||||
.disc>li::before {
|
||||
content: counter(items, disc) " ";
|
||||
}
|
||||
|
||||
.slim-wrap {
|
||||
counter-reset: items 2;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 17em;
|
||||
height: 20em;
|
||||
}
|
||||
|
||||
#r1 {
|
||||
color: #006400;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
#r2 {
|
||||
color: blue;
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see two rectangles, one green and one blue, as described below.</p>
|
||||
<p>The green rectangle should contain two lists, <em>one numbered</em> and <em>one bulleted</em>. The <strong>numbered list</strong> should be numbered with roman numerals. Inside it, after the second item there should be a two items bulleted list that's indented. After the first bullet there should a three items numbered list. The numbering for this list should use three levels of period separated decimal numbers (<em>e.g.</em> 2.1.1). The <strong>bulleted list</strong> should have 4 items and the same indentation as the roman-numbered list above it.</p>
|
||||
<p>The blue rectangle should contain a four items numbered list. The numbering for this list should use three levels of period separated decimal numbers, starting at 2.2.1.</p>
|
||||
|
||||
<div id="r1" class="region">
|
||||
<ol class="roman extract1">
|
||||
<li>Roman list, item I</li>
|
||||
<li>Roman list, item II
|
||||
<ul class="disc">
|
||||
<li>Bullet 1
|
||||
<ol>
|
||||
<li>Sub-point 2.1.1</li>
|
||||
<li>Sub-point 2.1.2</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Bullet 2
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Roman list, item III</li>
|
||||
<li>Roman list, item IV</li>
|
||||
</ol>
|
||||
<ul class="disc extract1">
|
||||
<li>Another bullet 1</li>
|
||||
<li>Another bullet 2</li>
|
||||
<li>Another bullet 3</li>
|
||||
<li>Another bullet 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="r2" class="region">
|
||||
<ol class="slim-wrap">
|
||||
<ol class="slim-wrap">
|
||||
<ol>
|
||||
<li>Sub-point 2.2.1</li>
|
||||
<li>Sub-point 2.2.2</li>
|
||||
<li>Sub-point 2.2.3</li>
|
||||
<li>Sub-point 2.2.4</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
/*Lists setup*/
|
||||
ol {
|
||||
padding-left: 1em;
|
||||
}
|
||||
ol>li {
|
||||
list-style-type: none;
|
||||
}
|
||||
ol.part {
|
||||
counter-reset: part 0;
|
||||
}
|
||||
ol.part>li {
|
||||
counter-increment: part;
|
||||
}
|
||||
ol.part>li::before {
|
||||
content: counter(part, upper-roman) " ";
|
||||
font-weight: bold;
|
||||
}
|
||||
ol.chapter {
|
||||
counter-reset: chapter 0;
|
||||
}
|
||||
ol.chapter>li {
|
||||
counter-increment: chapter;
|
||||
}
|
||||
ol.chapter>li::before {
|
||||
content: counter(chapter, decimal) ". ";
|
||||
}
|
||||
ol.section {
|
||||
counter-reset: section 0;
|
||||
}
|
||||
ol.section>li {
|
||||
counter-increment: section;
|
||||
}
|
||||
ol.section>li::before {
|
||||
content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
|
||||
color: blue;
|
||||
}
|
||||
/*Extracted content setup*/
|
||||
ol.part1-chap3-section {
|
||||
counter-reset: part 1 chapter 3;
|
||||
}
|
||||
ol.part3-chap {
|
||||
counter-reset: part 3;
|
||||
}
|
||||
.slim {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/*Regions setup*/
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see two gray rectangles, as described below.</p>
|
||||
<p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers, starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
|
||||
<p>The second rectangle contains a two-items numbered list, numbered using decimal numbers. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
|
||||
<div id="r1" class="region">
|
||||
<ol class="part">
|
||||
<li>Part I
|
||||
<ol class="chapter">
|
||||
<li>Chapter 1</li>
|
||||
<li>Chapter 2</li>
|
||||
<li>Chapter 3
|
||||
</li>
|
||||
<li>Chapter 4
|
||||
<ol class="section">
|
||||
<li>Section I.4-a</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Part II</li>
|
||||
<li>Part III
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="section part1-chap3-section">
|
||||
<li>Section I.3-a</li>
|
||||
<li>Section I.3-b</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="r2" class="region">
|
||||
<ol class="chapter part3-chap slim">
|
||||
<li>Chapter 1
|
||||
<ol class="section">
|
||||
<li>Section III.1-a</li>
|
||||
<li>Section III.1-b</li>
|
||||
<li>Section III.1-c</li>
|
||||
<li>Section III.1-d</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Chapter 2</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
/*Lists setup*/
|
||||
ol {
|
||||
padding-left: 1em;
|
||||
}
|
||||
ol>li {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
li::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
ol.part {
|
||||
counter-reset: part 0;
|
||||
}
|
||||
ol.part>li {
|
||||
counter-increment: part;
|
||||
}
|
||||
ol.part>li::after {
|
||||
content: counter(part, upper-roman) " ";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ol.chapter {
|
||||
counter-reset: chapter 0;
|
||||
}
|
||||
ol.chapter>li {
|
||||
counter-increment: chapter;
|
||||
}
|
||||
ol.chapter>li::after {
|
||||
content: "\2026\ " counter(chapter, decimal);
|
||||
}
|
||||
|
||||
ol.section {
|
||||
counter-reset: section 0;
|
||||
}
|
||||
ol.section>li {
|
||||
counter-increment: section;
|
||||
}
|
||||
ol.section>li::after {
|
||||
content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
|
||||
color: blue;
|
||||
}
|
||||
/*Extracted content setup*/
|
||||
ol.part1-chap3-section {
|
||||
counter-reset: part 1 chapter 3;
|
||||
}
|
||||
ol.part3-chap {
|
||||
counter-reset: part 3;
|
||||
}
|
||||
.slim {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/*Regions setup*/
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see two gray rectangles, as described below. All numbering should be aligned to the right margin of the rectangles.</p>
|
||||
<p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers preceded by an ellipsis (…), starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
|
||||
<p>The second rectangle contains a two-items numbered list, numbered using decimal numbers preceded by an ellipsis. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
|
||||
<div id="r1" class="region">
|
||||
<ol class="part">
|
||||
<li>Part I
|
||||
<ol class="chapter">
|
||||
<li>Chapter 1</li>
|
||||
<li>Chapter 2</li>
|
||||
<li>Chapter 3
|
||||
</li>
|
||||
<li>Chapter 4
|
||||
<ol class="section">
|
||||
<li>Section I.4-a</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Part II</li>
|
||||
<li>Part III
|
||||
</li>
|
||||
</ol>
|
||||
<ol class="section part1-chap3-section">
|
||||
<li>Section I.3-a</li>
|
||||
<li>Section I.3-b</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="r2" class="region">
|
||||
<ol class="chapter part3-chap slim">
|
||||
<li>Chapter 1
|
||||
<ol class="section">
|
||||
<li>Section III.1-a</li>
|
||||
<li>Section III.1-b</li>
|
||||
<li>Section III.1-c</li>
|
||||
<li>Section III.1-d</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Chapter 2</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul ul {
|
||||
color: blue;
|
||||
}
|
||||
#list21, #list31 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 20em;
|
||||
height: 15em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are three gray rectangles: the left one with a 4 items list, the middle one with two 2 items lists, the right one with two 5 items lists. <br /> The blue items in the right rectangle should be indented and have a different marker.</p>
|
||||
<div id="region1" class="region">
|
||||
<ul id="list1">
|
||||
<li>Unordered list, item 1</li>
|
||||
<li>Unordered list, item 2</li>
|
||||
<li>Unordered list, item 3</li>
|
||||
<li>Unordered list, item 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="region2" class="region">
|
||||
<ul id="list21">
|
||||
<li>Unordered list 2-1, item 1</li>
|
||||
<li>Unordered list 2-1, item 2</li>
|
||||
</ul>
|
||||
<ul id="list22">
|
||||
<li>Unordered list 2-2, item 1</li>
|
||||
<li>Unordered list 2-2, item 2</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="region3" class="region">
|
||||
<ul id="list31">
|
||||
<li>Unordered list 3-1, item 1</li>
|
||||
<li>Unordered list 3-1, item 2
|
||||
<ul>
|
||||
<li>First unordered inner list, item 1</li>
|
||||
<li>First unordered inner list, item 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Unordered list 3-1, item 3</li>
|
||||
</ul>
|
||||
<ul id="list32">
|
||||
<li>Unordered list 3-2, item 1</li>
|
||||
<li>Unordered list 3-2, item 2</li>
|
||||
<li>Unordered list 3-2, item 3
|
||||
<ul>
|
||||
<li>Second unordered inner list, item 1</li>
|
||||
<li>Second unordered inner list, item 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
}
|
||||
.blue {
|
||||
color: blue;
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
#region-container {
|
||||
/* Inherited properties from test (old `article` selector) */
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
/* Own properties from test */
|
||||
border: 10px solid black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right {
|
||||
border-left-width: 20px;
|
||||
border-left-style: solid;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
border-right-width: 20px;
|
||||
border-right-style: solid;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a horizontal, black-bordered rectangle with a green square at its
|
||||
left end and a blue square at its right end. The rectangle should be approximately as
|
||||
wide as the page.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
<div id="region-container">
|
||||
<div class="region right blue">
|
||||
<div class="blue">
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="region left green">
|
||||
<div class="green break">
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see four green squares separated by a small horizontal space.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<article>
|
||||
<div class="float green"></div>
|
||||
<div class="float green"></div>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="float green">div>
|
||||
</div></article>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
border: 10px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a green square with a thick black outline.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.flow {
|
||||
color: green;
|
||||
}
|
||||
.inner-flow {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.region {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a horizontal, black-bordered rectangle with a green square at its
|
||||
left end and a blue square at its right end. The rectangle should be approximately as
|
||||
wide as the page.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article class="flow">
|
||||
<div class="inner-flow float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.blue {
|
||||
color: blue;
|
||||
}
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.sized {
|
||||
max-height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you two squares side by side. The left one should be green, the right one
|
||||
should be blue and they should be flush to one another.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="sized left region">
|
||||
<article>
|
||||
<div class="green">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="blue">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
margin: 2px 4px 6px 8px;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin-bottom: 10px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares separated by a small vertical space. The squares should
|
||||
have a black outline, the top square should be blue and the bottom one should be green.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div class="green">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="flow">
|
||||
</article>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
overflow: hidden;
|
||||
max-width: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares separated by a small vertical space. The squares should
|
||||
have a black outline, the top square should be blue and the bottom one should be green.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div>
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.flow {
|
||||
text-align: right;
|
||||
color: gray;
|
||||
}
|
||||
.float {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
float: left;
|
||||
}
|
||||
.region {
|
||||
max-width: 150px;
|
||||
margin: 5px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see some filler gray text and a light blue square in the top left
|
||||
corner of black-bordered rectangle.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
<div class="region">
|
||||
<div class="flow">
|
||||
<div class="float"></div>
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.flow {
|
||||
color: gray;
|
||||
}
|
||||
.float {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
background: lightgreen;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
background: lightblue;
|
||||
}
|
||||
.region {
|
||||
width: 200px;
|
||||
border: 2px solid black;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a black-bordered rectangle with the following contents: a light blue
|
||||
square in the top left corner, a light green square in the top right with some filler gray
|
||||
text in between the squares and under them.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
<div class="region">
|
||||
<div class="flow">
|
||||
<div class="float right"></div>
|
||||
<div class="float left"></div>
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.float {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
background: lightgreen;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
background: lightblue;
|
||||
}
|
||||
.region {
|
||||
width: 150px;
|
||||
margin: 5px;
|
||||
background: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see three squares, side by side, as follows: from left
|
||||
to right, a light blue square, a yellow square and a light green square,
|
||||
all flush to each other.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
<div class="region">
|
||||
<div class="flow float right"></div>
|
||||
<div class="flow float left"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.green {
|
||||
background: lime;
|
||||
height: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
.blue {
|
||||
background: lightblue;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.purple {
|
||||
background: purple;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.region {
|
||||
float: left;
|
||||
border-right: 25px solid black;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see four colored rectangles, as follows: a horizontal purple rectangle,
|
||||
a vertical green rectangle, a blue square and a narrow vertical black rectangle. The
|
||||
rectangles should be all flush to each other and have their top edges aligned.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
|
||||
<!-- The region is auto-sized but since it has float: left it will shrink to fit -->
|
||||
<div class="region">
|
||||
<div class="flow right blue"></div>
|
||||
<div class="flow right green"></div>
|
||||
<div class="flow left purple"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.flow {
|
||||
color: gray;
|
||||
}
|
||||
.floater {
|
||||
width: 20%;
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.region {
|
||||
width: 250px;
|
||||
margin: 5px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dummy-bfc">
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Test passes if you see some filler gray text and three blue squares inside a black-bordered
|
||||
rectangle. One blue square should be in the top left corner, another in the top right
|
||||
corner and the third one should be somewhere along the left border, below the top-left
|
||||
one.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<div class="flow floater left"></div>
|
||||
<div class="flow">
|
||||
<div class="floater right"></div>
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This
|
||||
is filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
<div class="floater left"></div>
|
||||
filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.flow {
|
||||
color: gray;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.floater {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.region {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two gray rectangles, each with a blue square inside it. The first
|
||||
rectangle should have a blue square in the top right corner, while the second rectangle
|
||||
should have a blue square in the top left corner.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="flow floater right"></div>
|
||||
<div class="flow">
|
||||
xxxxxxx
|
||||
xxxxxxx
|
||||
xxxxxxx
|
||||
xxxxxxxxxx
|
||||
xxxxxxxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="region">
|
||||
<div class="flow floater left"></div>
|
||||
<div class="flow">
|
||||
xxxxxxx
|
||||
xxxxxxx
|
||||
xxxxxxx
|
||||
xxxxxxxxxx
|
||||
xxxxxxxxxx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
color: gray;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.left-floater {
|
||||
float: left;
|
||||
color: lightblue;
|
||||
}
|
||||
.right-floater {
|
||||
float: right;
|
||||
color: lightgreen;
|
||||
}
|
||||
.region {
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two identical rows of colored squares. Each row should have three
|
||||
squares, from left to right as follows: blue, gray, green. The squares in a row should
|
||||
be flush to each other, but the two rows should have some space between them.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow right-floater">xxx<br />xxx<br />xxx</div>
|
||||
<div class="flow left-floater">xxx<br />xxx<br />xxx</div>
|
||||
<div class="flow">
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow right-floater">xxx<br />xxx<br />xxx</div>
|
||||
<div class="flow left-floater">xxx<br />xxx<br />xxx</div>
|
||||
<div class="flow">
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
color: blue;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.float {
|
||||
color: green;
|
||||
float: left;
|
||||
}
|
||||
.region {
|
||||
margin: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares, horizontally side by side. The left square should be
|
||||
green and the right square should be blue.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
<article>
|
||||
</article>
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow">
|
||||
xxxxx xxxxx xxxxx xxxxx xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
color: blue;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.float {
|
||||
color: green;
|
||||
float: left;
|
||||
}
|
||||
.region {
|
||||
margin: 10px;
|
||||
width: 200px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two identical rows of colored squares. Each row should have three
|
||||
squares, from left to right as follows: blue, gray, green. The squares in a row should
|
||||
be flush to each other, but the two rows should have some space between them.<br />
|
||||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow">
|
||||
<div class="float">
|
||||
<div>
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
xxxxx xxxxx xxxxx xxxxx xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow">
|
||||
<div class="float">
|
||||
<div>
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
xxxxx xxxxx xxxxx xxxxx xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
color: gray;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.float {
|
||||
color: lightblue;
|
||||
float: left;
|
||||
}
|
||||
.region-parent {
|
||||
width: 100px;
|
||||
}
|
||||
.region {
|
||||
border-right: 20px solid lightblue;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a blue square and no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="region-parent">
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow float">
|
||||
<div>
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.flow {
|
||||
color: blue;
|
||||
overflow: hidden;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a green square and a horizontal blue rectangle side by side;
|
||||
they should have the top edges aligned and be flush to one another.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow">
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
.region {
|
||||
margin: 20px;
|
||||
}
|
||||
#spacer {
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- TODO: Must reconfirm this behavior based on the latest version of the fragmentation spec. -->
|
||||
<p>
|
||||
Test passes if you see two rows, each with two equally sized blue and green squares (blue
|
||||
on the left, green on the right); the squares should be flush to one another but there
|
||||
should be a small vertical space between the two rows.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article class="flow">
|
||||
<div>
|
||||
<div class="float">
|
||||
<span>xxxx<br /></span>
|
||||
<span>xxxx<br /></span>
|
||||
<span>xxxx<br /></span>
|
||||
<span>xxxx</span>
|
||||
</div>
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx
|
||||
<div id="spacer"> </div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="region">
|
||||
<article class="flow">
|
||||
<div>
|
||||
<div class="float">
|
||||
<span>xxxx<br /></span>
|
||||
<span>xxxx<br /></span>
|
||||
<span>xxxx<br /></span>
|
||||
<span>xxxx</span>
|
||||
</div>
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx<br />
|
||||
xxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
#region-container {
|
||||
float: left;
|
||||
}
|
||||
.region {
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
border: 10px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares separated by a small vertical space. The squares should
|
||||
have a black outline, the top square should be blue and the bottom one should be green.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div id="region-container">
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="region">
|
||||
<article>
|
||||
<div>
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
}
|
||||
#float-container {
|
||||
width: 100px;
|
||||
border: 20px solid blue;
|
||||
border-left-width: 0;
|
||||
}
|
||||
/* "clear-fixed" container */
|
||||
#float-container::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.region {
|
||||
border-left: 20px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a green square with a thick blue outline.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article class="flow">
|
||||
<div id="float-container">
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: left;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares separated by a small vertical space. The squares should
|
||||
have a black outline, the top square should be blue and the bottom one should be green.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="bordered region">
|
||||
<article class="flow">
|
||||
<div class="float">
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="bordered region">
|
||||
<article class="flow">
|
||||
<div class="clear">
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
.region {
|
||||
border: 10px solid black;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares inside a black rectangular border. The left square
|
||||
should be blue, the right square should be green, and the squares should be flush to one
|
||||
another.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<span class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</span>
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
.float {
|
||||
width: 50%;
|
||||
float: right;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.region {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border: 10px solid black;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wide {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two black bordered rectangles separated by a small vertical space.
|
||||
The bottom rectangle should be twice as wide as the top one and both rectangles should
|
||||
have the left half green and the right half blue.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="float">xxxxx​xxxxx​xxxxx​xxxxx​xxxxx</div>
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx
|
||||
</article>
|
||||
</div>
|
||||
<div class="wide region">
|
||||
<article>
|
||||
<div class="float">xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​</div>
|
||||
xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​xxxxx​
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see a green square.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="content">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: green;
|
||||
}
|
||||
.content {
|
||||
color: blue;
|
||||
}
|
||||
.region {
|
||||
/* The region is 115px tall to catch bugs where the floats would be
|
||||
sliced rather than properly fragmented */
|
||||
height: 115px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares, side by side horizontally. The left square should
|
||||
be green, the right one should be blue and they should be flush to one another.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="region">
|
||||
<article class="flow">
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="content">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
width: 240px;
|
||||
background: red;
|
||||
}
|
||||
.flow {
|
||||
color: blue;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: green;
|
||||
border: 10px solid lightgreen;
|
||||
}
|
||||
|
||||
.region {
|
||||
overflow: hidden;
|
||||
border: 10px solid lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares flush side by side.<br />
|
||||
The left square should be green with a light green border and the right one should be
|
||||
blue with a light blue border.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="region">
|
||||
<div class="flow">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.spaced {
|
||||
margin: 1em 2em 3em 5em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
<li>The black-bordered rectangles should be separated by a small horizontal space</li>
|
||||
<li>The colored squares should be positioned roughly in the top-left area of their
|
||||
rectangles, but without being flush to any of its sides</li>
|
||||
</ul><br />
|
||||
You should see no red.
|
||||
<p></p>
|
||||
|
||||
<div class="bordered region">
|
||||
<article>
|
||||
<div class="spaced float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div><div class="bordered region">
|
||||
<article>
|
||||
<div class="break spaced">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.spaced {
|
||||
margin: 0 2em 3em 5em;
|
||||
color: green;
|
||||
}
|
||||
.float {
|
||||
margin-top: 1em;
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.region {
|
||||
/* float: left; is used to trigger shrink-to-fit sizing */
|
||||
float: left;;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
<li>The black-bordered rectangles should be separated by a small vertical space</li>
|
||||
<li>The green square should have its top edge flush with the top border of its
|
||||
containing rectangle</li>
|
||||
</ul>
|
||||
You should see no red.
|
||||
<p></p>
|
||||
|
||||
<div style="height: 125px;" class="bordered region">
|
||||
<article>
|
||||
<div class="spaced float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div><div class="bordered region">
|
||||
<article>
|
||||
<div class="spaced">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
margin: 1em 2em 3em 4em;
|
||||
}
|
||||
.outer-container {
|
||||
display: inline-block;
|
||||
border: 10px solid black;
|
||||
}
|
||||
.regions-container {
|
||||
margin: 20px 15px 10px 5px;
|
||||
}
|
||||
.content {
|
||||
margin: 2px 4px 8px 16px;
|
||||
color: green;
|
||||
}
|
||||
.region {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares inside a black-bordered rectangle.<br />
|
||||
The first (top to bottom) square should be blue, while the second should be green.<br />
|
||||
The blue square should be roughly horizontally centered and the green square should be
|
||||
near the bottom left corner of the rectangle. Neither square should touch the black border.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="outer-container">
|
||||
<div class="regions-container">
|
||||
<div class="region">
|
||||
<article class="flow">
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="content">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
padding: 1em 2em 3em 4em;
|
||||
}
|
||||
|
||||
.outer-container {
|
||||
display: inline-block;
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
.regions-container {
|
||||
padding: 20px 15px 10px 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2px 4px 8px 16px;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares inside a black-bordered rectangle.<br />
|
||||
The first (top to bottom) square should be blue, while the second should be green.<br />
|
||||
The blue square should be roughly horizontally centered and the green square should be
|
||||
near the bottom left corner of the rectangle. Neither square should touch the black border.<br />
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
<div class="outer-container">
|
||||
<div class="regions-container">
|
||||
<div>
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="content">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
article {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
border: solid purple;
|
||||
border-width: 4px 24px 12px 16px ;
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.regions-container {
|
||||
padding: 20px 15px 10px 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: green;
|
||||
border: solid lime;
|
||||
border-width: 12px 16px 4px 12px;
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
.region {
|
||||
border: 12px solid black;
|
||||
/* float: left; to make it a block formatting context */
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if you see two squares with differently colored borders:
|
||||
</p><ul>
|
||||
<li>Both squares should be inside a vertical black-bordered rectangle that lacks the
|
||||
bottom border</li>
|
||||
<li>The first (blue) square should have an irregular width purple border that overlaps
|
||||
the whole width of the left black border of the containing rectangle</li>
|
||||
<li>The second (green) square should have an irregular light green border: the top
|
||||
edge of the border should be invisible (zero width) while the bottom border should
|
||||
be thin and overlap the whole width of the bottom black border of the containing
|
||||
rectangle</li>
|
||||
</ul>
|
||||
You should see no red.
|
||||
<p></p>
|
||||
|
||||
<div class="regions-container">
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="float">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
<div class="content">
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx<br />
|
||||
xxxxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: Redirect content to a region</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
#source{
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The words "flow content" in green should be in a single line below.
|
||||
</p>
|
||||
<div id="source">
|
||||
flow content
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: Redirect content through two regions</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
.source{
|
||||
color: green;
|
||||
height: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="source">line one</div>
|
||||
<p>
|
||||
The words "line one" should appear on a single line above, and the words "line two" should appear on a single line below.
|
||||
</p>
|
||||
<div class="source">line two</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: Region chain ordering</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
div{
|
||||
height: 20px;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if this is followed by three lines of text containing "1 2 3" in order.</p>
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: Regions apply only to block container boxes</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
div{
|
||||
height: 20px;
|
||||
}
|
||||
.result{
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>This test passes if this is followed by three lines of text containing "1 2 3" in order.</p>
|
||||
<div class="result">
|
||||
<div>1</div>
|
||||
<span>2</span>
|
||||
<div>3</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: flow-into behavior</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.result{
|
||||
color: green;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
No text should appear above this line. Below should be lines with three green numbers each counting up to 18.
|
||||
</div>
|
||||
<div> </div>
|
||||
<div class="result">
|
||||
<div>1 2 3</div>
|
||||
<div>4 5 6</div>
|
||||
<div>7 8 9</div>
|
||||
<div>10 11 12</div>
|
||||
<div>13 14 15</div>
|
||||
<div>16 17 18</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: Regions establish a new block formatting context</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
.blueBox{
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
}
|
||||
.floatLeft{
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.error{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a blue square to the right of a green square.</p>
|
||||
<div class="floatLeft"></div>
|
||||
<div class="blueBox"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: invalid flow-into idents</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.sourceWrapper{
|
||||
background-color: lightgreen;
|
||||
width: 10em;
|
||||
}
|
||||
.success{
|
||||
color: green;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see four words in a light green rectangle followed by four 'content not replaced…' lines.</p>
|
||||
<div class="sourceWrapper">
|
||||
<div>none</div>
|
||||
<div>inherit</div>
|
||||
<div>default</div>
|
||||
<div>initial</div>
|
||||
</div>
|
||||
<div class="success">content not replaced by none ident</div>
|
||||
<div class="success">content not replaced by inherit ident</div>
|
||||
<div class="success">content not replaced by default ident</div>
|
||||
<div class="success">content not replaced by initial ident</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: Region children are formatted if directed to a flow</title>
|
||||
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com" />
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
div{
|
||||
height: 20px;
|
||||
}
|
||||
.success{
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if this is followed by two lines of text containing "1 2" in order.</p>
|
||||
<div class="success">1</div>
|
||||
<div class="success">2</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.region {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see horizontal green rectangle and no red.</p>
|
||||
|
||||
<div class="region">
|
||||
<iframe width="400" height="300" class="flow" frameborder="0" src="../support/3d-filler.html"></iframe>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
||||
<style>
|
||||
.flow {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
color: green;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.region {
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
.big {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.small {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two green squares (one bigger and one smaller) and no red.</p>
|
||||
<div class="container">
|
||||
<div class="big region">
|
||||
<div class="flow">
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
xxxxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="small region">
|
||||
<div class="flow">
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue