OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Test: flow-into on list items from multiple lists, when items
contain other 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 or numbering (type, value), even when extracti
ng items from multiple and nested lists into the same named flow."> | |
11 <style> | |
12 .outer-mixed-1 ul, | |
13 .outer-mixed-1 ol { | |
14 color: blue; | |
15 } | |
16 | |
17 .outer-mixed-1 > li { | |
18 -webkit-flow-into: f1; | |
19 | |
20 } | |
21 #r1 { | |
22 -webkit-flow-from: f1; | |
23 } | |
24 | |
25 .region { | |
26 margin: 2em; | |
27 background-color: lightgray; | |
28 width: 20em; | |
29 } | |
30 </style> | |
31 </head> | |
32 <body> | |
33 <p>This test passes if there is a gray rectangle with two black lists in
it, as described below.<br> | |
34 The first black list is a bulleted list that has a blue numbered list in
it.<br> | |
35 The second black list is a numbered list that has two blue nested lists
in it: the first nested list is a bulleted list with three items, and the second
list is a numbered list with two items.</p> | |
36 <p>The numbers and bullets for the black lists should be rendered outsid
e the gray rectangle, while the blue list items should be indented. Also, the bl
ue bulleted list should have a different type of bullets than the black bulleted
list.</p> | |
37 <ul class="outer-mixed-1"> | |
38 <li>Unordered list, item 1 | |
39 <ol> | |
40 <li>Inner ordered list, item 1</li> | |
41 <li>Inner ordered list, item 2</li> | |
42 <li>Inner ordered list, item 3</li> | |
43 </ol> | |
44 </li> | |
45 <li>Unordered list, item 2</li> | |
46 </ul> | |
47 <ol class="outer-mixed-1"> | |
48 <li>Ordered list, item 1 | |
49 <ul> | |
50 <li>Unordered inner list, item 1</li> | |
51 <li>Unordered inner list, item 2</li> | |
52 <li>Unordered inner list, item 3</li> | |
53 </ul> | |
54 </li> | |
55 <li>Ordered list, item 2 | |
56 <ol> | |
57 <li>Second inner ordered list, item 1</li> | |
58 <li>Second inner ordered list, item 2</li> | |
59 </ol> | |
60 </li> | |
61 </ol> | |
62 <div class="region" id="r1"></div> | |
63 </body> | |
64 </html> | |
OLD | NEW |