mirror of
https://github.com/servo/servo.git
synced 2025-08-26 15:48:22 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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:
|
||||
<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>
|
||||
|
||||
<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,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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:
|
||||
<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>
|
||||
|
||||
<div class="bordered region" style="height: 125px;">
|
||||
<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,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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:
|
||||
<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>
|
||||
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue