mirror of
https://github.com/servo/servo.git
synced 2025-08-16 19:05:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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 class="region" id="r2">
|
||||
<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,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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 class="region" id="r2">
|
||||
<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,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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 class="region" id="r2">
|
||||
<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,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r2">
|
||||
<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,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<ol class="decimal">
|
||||
<li>Numbered list, item 1</li>
|
||||
</ol>
|
||||
<ul class="disc">
|
||||
<li>Bullet list, item 2
|
||||
<ol class="roman" start="2">
|
||||
<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,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="decimal" start="3">
|
||||
<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 class="latin" start="1">
|
||||
<li>Second numbered list, item A</li>
|
||||
<li class="hide"></li>
|
||||
<li>Second numbered list, item C</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="region" id="r1">
|
||||
<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 class="latin" start="2">
|
||||
<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,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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 class="inner" start="2">
|
||||
<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,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
}
|
||||
.ordered {
|
||||
list-style-type: lower-latin;
|
||||
}
|
||||
.unordered {
|
||||
list-style-type: circle;
|
||||
}
|
||||
.container {
|
||||
color: #006400;
|
||||
background-color: lightgreen;
|
||||
margin: 2em;
|
||||
float: left;
|
||||
width: 15em;
|
||||
}
|
||||
.region {
|
||||
color: blue;
|
||||
margin: 2em;
|
||||
background-color: lightblue;
|
||||
float: left;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.region > ul,
|
||||
.region > ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see two rectangles, one green and one blue, as described below.</p>
|
||||
<p>The green rectangle should contain a list with items numbered/marked as such: the <strong>first two items</strong> should be numbered with small latin letters, starting with d. The <strong>next three items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>inside</em> the green rectangle.</p>
|
||||
<p>The blue rectangle should contain a list with items numbered/marked as such: the <strong>first three items</strong> should be numbered with small latin letters, starting with a. The <strong>next two items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>outside</em> the blue rectangle.</p>
|
||||
|
||||
<div class="container">
|
||||
<ul class="ordered" start="4">
|
||||
<li class="hide"></li>
|
||||
<li class="hide"></li>
|
||||
<li class="hide"></li>
|
||||
<li>Ordered list, item d</li>
|
||||
<li>Ordered list, item e</li>
|
||||
</ul>
|
||||
<ol class="unordered">
|
||||
<li>Unordered list, item 1</li>
|
||||
<li>Unordered list, item 2</li>
|
||||
<li>Unordered list, item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="region" id="r1">
|
||||
<ul class="ordered">
|
||||
<li>Ordered list, item a</li>
|
||||
<li>Ordered list, item b</li>
|
||||
<li>Ordered list, item c</li>
|
||||
</ul>
|
||||
<ol class="unordered">
|
||||
<li>Unordered list, item 4</li>
|
||||
<li>Unordered list, item 5</li>
|
||||
</ol>
|
||||
</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>
|
||||
.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 class="region" id="r1">
|
||||
<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 class="region" id="r2">
|
||||
<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,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="box" id="container">
|
||||
<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 class="box" id="region">
|
||||
<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,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="region1">
|
||||
<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 class="region" id="region2">
|
||||
<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 class="region" id="region3">
|
||||
<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,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<ol id="ordered-1" reversed="reversed">
|
||||
<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 class="region" id="r2">
|
||||
<ol id="ordered-2" reversed>
|
||||
<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 class="region" id="r3">
|
||||
<ol class="ordered-3" reversed="true">
|
||||
<li>Third reversed list, item 3</li>
|
||||
<li>Third reversed list, item 2</li>
|
||||
<li>Third reversed list, item 1</li>
|
||||
</ol>
|
||||
<ol class="ordered-3" reversed="true">
|
||||
<li>Final reversed list, item 2</li>
|
||||
<li>Final reversed list, item 1</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<style>
|
||||
ol {
|
||||
margin: 0;
|
||||
}
|
||||
ol ol,
|
||||
.inner {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.region {
|
||||
background-color: lightgray;
|
||||
margin: 1em;
|
||||
float: left;
|
||||
width: 17em;
|
||||
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 numbering starting at 3. After the first item there should a be a blue numbered list, indented, with numbering starting at 10.</p>
|
||||
<p>The second rectangle should contain two numbered list. The first one should be black with numbering starting at 10, while the second should be blue and with the numbering starting at 0. They should both have the same indentation level.</p>
|
||||
<p>The third rectangle should contain a single numbered list, that's reversed, with the first item being numbered 5.</p>
|
||||
<div class="region" id="r1">
|
||||
<ol id="ordered-1" start="3">
|
||||
<li>First ordered list, item 3
|
||||
<ol start="10">
|
||||
<li>Inner ordered list, item 10</li>
|
||||
<li>Inner ordered list, item 11</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>First ordered list, item 4</li>
|
||||
<li>First ordered list, item 5</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="region" id="r2">
|
||||
<ol id="ordered-2" start="10">
|
||||
<li>Second ordered list, item 10</li>
|
||||
<li>Second ordered list, item 11</li>
|
||||
<li>Second ordered list, item 12</li>
|
||||
</ol>
|
||||
<ol class="inner" start="0">
|
||||
<li>Inner ordered list, item 0</li>
|
||||
<li>Inner ordered list, item 1</li>
|
||||
<li>Inner ordered list, item 2</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="region" id="r3">
|
||||
<ol class="ordered-3" reversed="true">
|
||||
<li>Reversed ordered list, item 5</li>
|
||||
<li>Reversed ordered list, item 4</li>
|
||||
<li>Reversed ordered list, item 3</li>
|
||||
<li>Reversed ordered list, item 2</li>
|
||||
<li>Reversed ordered list, item 1</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="region1">
|
||||
<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 class="region" id="region2">
|
||||
<ol id="list21" class="double">
|
||||
<li>List 2-1, item B</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item F</li>
|
||||
</ol>
|
||||
<ol id="list22" class="double" start="4">
|
||||
<li>List 2-2, item B</li>
|
||||
<li>List 2-2, item D</li>
|
||||
<li>List 2-2, item F</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="region" id="region3">
|
||||
<ol id="list31" class="down-ten">
|
||||
<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,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<ol class="roman" id="list1">
|
||||
<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,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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 class="region" id="r2">
|
||||
<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,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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 class="region" id="r2">
|
||||
<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,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="r1">
|
||||
<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 class="region" id="r2">
|
||||
<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,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
|
||||
<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 class="region" id="region1">
|
||||
<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 class="region" id="region2">
|
||||
<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 class="region" id="region3">
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue