4 <title>CSS Test: flow-into on list items from lists that use multiple CSS counters with nested scopes 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 multiple counters and extracted in a named flow should render in regions just as without regions.">
19 list-style-type: none;
22 counter-reset: part 0;
25 counter-increment: part;
28 content: counter(part, upper-roman) " ";
32 counter-reset: chapter 0;
35 counter-increment: chapter;
37 ol.chapter>li::before {
38 content: counter(chapter, decimal) ". ";
41 counter-reset: section 0;
44 counter-increment: section;
46 ol.section>li::before {
47 content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
52 -webkit-flow-into: f1;
55 -webkit-flow-into: f2;
58 background-color: lightgray;
65 -webkit-flow-from: f1;
68 -webkit-flow-from: f2;
73 <p>This test passes if you see two gray rectangles, as described below.</p>
74 <p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers, starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
75 <p>The second rectangle contains a two-items numbered list, numbered using decimal numbers. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
76 <ol class="part extract1">
82 <ol class="section extract1">
83 <li>Section I.3-a</li>
84 <li>Section I.3-b</li>
89 <li>Section I.4-a</li>
96 <ol class="chapter extract2">
99 <li>Section III.1-a</li>
100 <li>Section III.1-b</li>
101 <li>Section III.1-c</li>
102 <li>Section III.1-d</li>
109 <div class="region" id="r1"></div>
110 <div class="region" id="r2"></div>