OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Test: flow-into on unordered list items, when items contain o
ther unordered 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, even when extracting items from multiple and
nested lists into the same named flow."> | |
11 <style> | |
12 #outer-unordered-1 ul, | |
13 #outer-unordered-2 ul { | |
14 color: blue; | |
15 } | |
16 #outer-unordered-2 ul ul { | |
17 color: green; | |
18 } | |
19 | |
20 | |
21 #outer-unordered-1 > li { | |
22 -webkit-flow-into: f1; | |
23 } | |
24 #r1 { | |
25 -webkit-flow-from: f1; | |
26 } | |
27 | |
28 #outer-unordered-2 li { | |
29 -webkit-flow-into: f2; | |
30 } | |
31 #r2 { | |
32 -webkit-flow-from: f2; | |
33 } | |
34 | |
35 .region { | |
36 margin: 2em; | |
37 background-color: lightgray; | |
38 width: 20em; | |
39 } | |
40 </style> | |
41 </head> | |
42 <body> | |
43 <p>This test passes if there are two gray rectangles: each with a list
with another lists nested in it. The list markers for the black list in the firs
t rectangle, and for all the lists in the second rectangle should be rendered ou
tside of the gray boxes</p> | |
44 <p>The list in the first rectangle should be black, with two blue nested
lists in it. The nested lists should appear after the first and the second item
s, they should be indented and use a different kind of bullet.</p> | |
45 <p>The list in the second rectangle should be black, with a blue nested
list in it that has in turn a nested green list in it. Each of the black, blue a
nd green list should use different kinds of bullets and list items of the same c
olor should have the same kind of bullet.</p> | |
46 <ul id="outer-unordered-1"> | |
47 <li>First unordered list, item 1 | |
48 <ul> | |
49 <li>First inner unordered list, item 1</li> | |
50 <li>First inner unordered list, item 2</li> | |
51 <li>First inner unordered list, item 3</li> | |
52 </ul> | |
53 </li> | |
54 <li>First unordered list, item 2 | |
55 <ul> | |
56 <li>Second inner unordered list, item 1</li> | |
57 <li>Second inner unordered list, item 2</li> | |
58 </ul> | |
59 </li> | |
60 <li>First unordered list, item 3</li> | |
61 </ul> | |
62 <div class="region" id="r1"></div> | |
63 | |
64 <ul id="outer-unordered-2"> | |
65 <li>Second unordered list, item 1</li> | |
66 <li>Second unordered list, item 2 | |
67 <ul> | |
68 <li>Last inner unordered list, item 1</li> | |
69 <li>Last inner unordered list, item 2 | |
70 <ul> | |
71 <li>Innermost unordered list, item 1</li> | |
72 <li>Innermost unordered list, item 2</li> | |
73 </ul> | |
74 </li> | |
75 <li>Last inner unordered list, item 3</li> | |
76 <li>Last inner unordered list, item 4</li> | |
77 </ul> | |
78 </li> | |
79 <li>Second unordered list, item 3</li> | |
80 </ul> | |
81 <div class="region" id="r2"></div> | |
82 </body> | |
83 </html> | |
OLD | NEW |