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
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: flow-into on list items from lists that use a single CSS counter 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. Extracting parts of a list numbered using a single counter in nested scopes should render in regions just as without regions.">
<link rel="match" href="reference/extract-ordered-lists-in-regions-explicit-counters-003-ref.html">
<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) " ";
}
.extract1 {
flow-into: f1;
color: #006400;
}
.extract2 {
flow-into: f2;
color: blue;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 17em;
height: 20em;
}
#r1 {
flow-from: f1;
background-color: lightgreen;
}
#r2 {
flow-from: f2;
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>
<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
<ol class="extract2">
<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
<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>
</li>
</ol>
<div class="region" id="r1"></div>
<div class="region" id="r2"></div>
</body>
</html>
|
