OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Test: flow-into on ordered and unordered list items from mult
iple lists</title> | |
5 <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> | |
6 <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and
-rules" /> | |
7 <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-
property" /> | |
8 <link rel="stylesheet" type="text/css" href="../resources/font-smoothing
-disabler.css"> | |
9 <meta name="flags" content=""> | |
10 <meta name="assert" content="The flow-into property can be applied to in
dividual list items. List items extracted in named flows and flowed into regions
must preserve their list markers and numbering, even when extracting items from
multiple lists in the same named flow."> | |
11 <style> | |
12 ul:first-of-type, ol:first-of-type { | |
13 color: blue; | |
14 } | |
15 ul:nth-of-type(3) { | |
16 color: green; | |
17 } | |
18 ol > li { | |
19 -webkit-flow-into: f1; | |
20 } | |
21 #r1 { | |
22 -webkit-flow-from: f1; | |
23 } | |
24 ul > li { | |
25 -webkit-flow-into: f2; | |
26 } | |
27 #r2 { | |
28 -webkit-flow-from: f2; | |
29 } | |
30 .region { | |
31 margin: 2em; | |
32 background-color: lightgray; | |
33 width: 200px; | |
34 } | |
35 </style> | |
36 </head> | |
37 <body> | |
38 <p>This test passes if there are two gray rectangles: the first with tw
o numbered lists (3 items each), the second with three un-numbered lists (2 item
s each).<br> | |
39 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. | |
40 </p> | |
41 <p>Each numbered list should start at 1.<br> | |
42 Both the numbers and the list markers should be outside of the gray rect
angles.</p> | |
43 <ol> | |
44 <li>Ordered list 1, item 1</li> | |
45 <li>Ordered list 1, item 2</li> | |
46 <li>Ordered list 1, item 3</li> | |
47 </ol> | |
48 <ol> | |
49 <li>Ordered list 2, item 1</li> | |
50 <li>Ordered list 2, item 2</li> | |
51 <li>Ordered list 2, item 3</li> | |
52 </ol> | |
53 <div class="region" id="r1"></div> | |
54 | |
55 <ul> | |
56 <li>Unordered list 1, item 1</li> | |
57 <li>Unordered list 1, item 2</li> | |
58 </ul> | |
59 <ul> | |
60 <li>Unordered list 2, item 1</li> | |
61 <li>Unordered list 2, item 2</li> | |
62 </ul> | |
63 <ul> | |
64 <li>Unordered list 3, item 1</li> | |
65 <li>Unordered list 3, item 2</li> | |
66 </ul> | |
67 <div class="region" id="r2"></div> | |
68 </body> | |
69 </html> | |
OLD | NEW |