OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Test: flow-into on all list items from a nested list</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 or numbering (type, value), even when extracti
ng items from multiple and nested lists into the same named flow."> | |
11 <style> | |
12 .outer-mixed-2 ul, | |
13 .outer-mixed-2 ol { | |
14 color: blue; | |
15 } | |
16 .outer-mixed-2 ol ul { | |
17 color: green; | |
18 } | |
19 .outer-mixed-2 ol ul ol { | |
20 color: red; | |
21 } | |
22 | |
23 .outer-mixed-2 li{ | |
24 -webkit-flow-into: f2; | |
25 } | |
26 #r2 { | |
27 -webkit-flow-from: f2; | |
28 } | |
29 | |
30 .region { | |
31 margin: 2em; | |
32 background-color: lightgray; | |
33 width: 20em; | |
34 } | |
35 </style> | |
36 </head> | |
37 <body> | |
38 <p>This test passes if there is a gray rectangle with a list in it, as d
escribed below. The list markers and numbers for the lists should be rendered ou
tside of the gray rectangle.</p> | |
39 <p>The rectangle should contain a black, bulleted list. This list should
contain a blue numbered list after the second item. The numbering on the blue l
ist should start at 1. The blue list should contain a green, bulleted list after
its second item. The green bulleted list should contain a red, numbered list af
ter its second item. The numbering on the red list should start at 1, too.<br> | |
40 The green list should use different bullets than the black list.<br> | |
41 None of the list items should be indented – as such, they should r
ender as a plain list, with varying types of bullets and numberings. The sequenc
e of the colors should be, from top to bottom: black, blue, green, red, blue, bl
ack.</p> | |
42 | |
43 <ul class="outer-mixed-2"> | |
44 <li>Outer unordered list, item 1</li> | |
45 <li>Outer unordered list, item 2 | |
46 <ol> | |
47 <li>Inner ordered list, item 1</li> | |
48 <li>Inner ordered list, item 2 | |
49 <ul> | |
50 <li>Inner unordered list, item 1</li> | |
51 <li>Inner unordered list, item 2 | |
52 <ol> | |
53 <li>Innermost ordered list, item 1</li> | |
54 <li>Innermost ordered list, item 2</li> | |
55 <li>Innermost ordered list, item 3</li> | |
56 </ol> | |
57 </li> | |
58 </ul> | |
59 </li> | |
60 <li>Inner ordered list, item 3</li> | |
61 <li>Inner ordered list, item 4</li> | |
62 </ol> | |
63 </li> | |
64 <li>Outer unordered list, item 3</li> | |
65 </ul> | |
66 <div class="region" id="r2"></div> | |
67 </body> | |
68 </html> | |
OLD | NEW |