4 <title>CSS Test: flow-into on ordered lists that use multiple CSS counters and ::before for list numbering</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="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" />
9 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" />
10 <link rel="stylesheet" type="text/css" href="../resources/font-smoothing-disabler.css">
11 <meta name="flags" content="">
12 <meta name="assert" content="The flow-into property can be applied to ordered lists. List items numbered using a single counter in nested scopes and extracted in a named flow should render in regions just as without regions.">
15 counter-reset: items 0;
19 counter-increment: items 1;
20 list-style-type: none;
23 counter-increment: items 2;
26 content: counters(items, ".") ". ";
27 display: inline-block;
32 content: counters(items, ".", upper-roman) ". ";
35 content: counter(items, disc) " ";
38 -webkit-flow-into: f1;
42 background-color: lightgray;
49 -webkit-flow-from: f1;
54 <p>This test passes if you see a gray rectangle with a list containing sublists as follows: the outermost list items should be numbered using roman numerals; the second-level list should be a bullet list with two items; the innermost list should be numbered using three levels of decimal numbers (<em>e.g.</em> 2.1.1).</p>
55 <ol class="roman" id="list1">
56 <li>Roman list, item I</li>
57 <li>Roman list, item II
61 <li>Sub-point 2.1.1</li>
62 <li>Sub-point 2.1.2</li>
67 <li>Sub-point 2.2.1</li>
68 <li>Sub-point 2.2.2</li>
69 <li>Sub-point 2.2.3</li>
70 <li>Sub-point 2.2.4</li>
75 <li>Roman list, item III</li>
76 <li>Roman list, item IV</li>
78 <div class="region" id="r1"></div>