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
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: flow-into on list items that use different text directions or writing modes</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/css-writing-modes-3/#direction">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
<meta name="flags" content="">
<meta name="assert" content="The flow-into property can be applied to elements that have different text directions and writing modes. This tests that the rendering for lists that use different text directions/writing modes are not affected when they are extracted in a named flow and rendered in a region.">
<link rel="match" href="reference/extract-ordered-list-direction-and-writing-modes-ref.html">
<style>
/*TODO: Include unprefixed and standard properties for writing modes and region breaking. */
body>ol {
flow-into: f;
region-break-after: always;
break-after: region;
margin: 0;
}
.direction-rtl {
direction: rtl;
background-color: lightgray;
}
.writing-mode-vrl {
writing-mode: vertical-rl;
background-color: lightblue;
}
.writing-mode-vlr {
writing-mode: vertical-lr;
background-color: lightgreen;
}
.region {
flow-from: f;
border: thick solid black;
width: 15em;
height: 15em;
float: left;
margin: 0 1em;
}
</style>
</head>
<body>
<!-- Extracting lists with different directions and writing modes. -->
<p>Test pases if you see three rectangles with black borders containing a numbered list as described below. Each of the lists has a total of six items, three being in a nested list after the second item.</p>
<p>The first rectangle should display the numbered list on a light gray background. The list items should be right-aligned, with the numbers on the right side of the list item text. Also, the list item numbering should have a period prepended to the actual number (<em>e.g.</em> <strong>.1</strong>) instead of appended to the actual number (<em>e.g.</em> <strong>1.</strong>).</p>
<p>The second rectangle should display the numbered list on a light blue background. The text should be rotated 90 degrees clockwise with the list items progressing right to left (or top-to-bottom relative to the rotated list) – this means the right-most list item should have the number 1.</p>
<p>The third rectangle should display the numbered list on a light green background. The text should be rotated 90 degrees clockwise, with the list items progressing left to right (or bottom-to-top relative to the rotated list) – this means the right-most list item should have the number 3.</p>
<ol class="direction-rtl">
<li>Top-level list, item 1</li>
<li>Top-level list, item 2
<ol>
<li>First inner list, item 1</li>
<li>First inner list, item 2</li>
<li>First inner list, item 3</li>
</ol>
</li>
<li>Top-level list, item 3</li>
</ol>
<ol class="writing-mode-vrl">
<li>Top-level list, item 1</li>
<li>Top-level list, item 2
<ol>
<li>First inner list, item 1</li>
<li>First inner list, item 2</li>
<li>First inner list, item 3</li>
</ol>
</li>
<li>Top-level list, item 3</li>
</ol>
<ol class="writing-mode-vlr">
<li>Top-level list, item 1</li>
<li>Top-level list, item 2
<ol>
<li>First inner list, item 1</li>
<li>First inner list, item 2</li>
<li>First inner list, item 3</li>
</ol>
</li>
<li>Top-level list, item 3</li>
</ol>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
</body>
</html>
|
