1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: flow-into on list items from lists that use multiple CSS counters with nested scopes and ::before for list numbering</title>
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#properties" />
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" />
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" />
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" />
<meta name="flags" content="">
<meta name="assert" content="The flow-into property can be applied to ordered lists. List items numbered using multiple counters and extracted in a named flow should render in regions just as without regions.">
<link rel="match" href="reference/extract-ordered-lists-in-regions-explicit-counters-004-ref.html">
<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;
}
/*Regions setup*/
.extract1 {
flow-into: f1;
}
.extract2 {
flow-into: f2;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 20em;
height: 20em;
}
#r1 {
flow-from: f1;
}
#r2 {
flow-from: f2;
}
</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>
<ol class="part extract1">
<li>Part I
<ol class="chapter">
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3
<ol class="section extract1">
<li>Section I.3-a</li>
<li>Section I.3-b</li>
</ol>
</li>
<li>Chapter 4
<ol class="section">
<li>Section I.4-a</li>
</ol>
</li>
</ol>
</li>
<li>Part II</li>
<li>Part III
<ol class="chapter extract2">
<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>
</li>
</ol>
<div class="region" id="r1"></div>
<div class="region" id="r2"></div>
</body>
</html>
|
