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
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: flow-into on unordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow</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" />
<meta name="flags" content="">
<meta name="assert" content="The flow-into property can be applied to unordered lists. Multiple lists extracted in a named flow should render in regions just as without regions.">
<link rel="match" href="reference/extract-unordered-lists-in-regions-ref.html">
<style>
ul {
margin-top: 0;
margin-bottom: 0;
}
ul ul {
color: blue;
}
#list1 {
flow-into: flow1;
}
#list21, #list22 {
flow-into: flow2;
}
#list31, #list32 {
flow-into: flow3;
}
#list21, #list31 {
margin-bottom: 1em;
}
.region {
background-color: lightgray;
margin: 1em;
float: left;
width: 20em;
height: 15em;
}
#region1 {
flow-from: flow1;
}
#region2 {
flow-from: flow2;
}
#region3 {
flow-from: flow3;
}
</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>
<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>
<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>
<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 class="region" id="region1"></div>
<div class="region" id="region2"></div>
<div class="region" id="region3"></div>
</body>
</html>
|
