OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Test: flow-into on list items from multiple lists that have t
he "reversed" or "start" HTML attributes set</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 numbering, even when extracting items from multiple and nes
ted lists into the same named flow. The numbering should also honor the HTML 're
versed' and 'start' attribute."> | |
11 <style> | |
12 ol ol { | |
13 color: blue; | |
14 list-style-type: upper-roman; | |
15 } | |
16 li { | |
17 -webkit-flow-into: f1; | |
18 } | |
19 #r1 { | |
20 -webkit-flow-from: f1; | |
21 } | |
22 | |
23 .region { | |
24 margin: 2em; | |
25 background-color: lightgray; | |
26 width: 20em; | |
27 } | |
28 </style> | |
29 </head> | |
30 <body> | |
31 <p>This test passes if there is a gray rectangle with a numbered list, a
s described below.<br> | |
32 The numbers for the list should be outside the rectangle and all items s
hould render at the same indentation level.<br> | |
33 The second and third items in the list should be blue and numbered using
roman numerals, CI and C, respectively. All the other items in the list should
be black and numbered with decimal numbers corresponding to the item text.<br> | |
34 The final numbering of this list should be: 3, CI, C, 2, 1, 10, 11, 12,
13.</p> | |
35 | |
36 <ol reversed="true"> | |
37 <li>List item no. 3 | |
38 <ol start="101" reversed> | |
39 <li>Roman-numbered list item CI</li> | |
40 <li>Roman-numbered list item C</li> | |
41 </ol> | |
42 </li> | |
43 <li>List item no. 2</li> | |
44 <li>List item no. 1</li> | |
45 </ol> | |
46 <ol start="10"> | |
47 <li>List item no. 10</li> | |
48 <li>List item no. 11</li> | |
49 <li>List item no. 12</li> | |
50 <li>List item no. 13</li> | |
51 </ol> | |
52 <div class="region" id="r1"></div> | |
53 </body> | |
54 </html> | |
OLD | NEW |