src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-005.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on list items from lists that use multiple CSS counters with nested scopes and ::after 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 displayed in the ::after pseudo-element and extracted in a named flow should render in regions just as without regions.">
  13         <style>
  14         /*Lists setup*/
  15         ol {
  16             padding-left: 1em;
  17         }
  18         ol>li {
  19             display: block;
  20             position: relative;
  21         }
  22         li::after {
  23             position: absolute;
  24             top: 0;
  25             right: 0;
  26             margin-right: .5em;
  27         }
  28         ol.part {
  29             counter-reset: part 0;
  30         }
  31         ol.part>li {
  32             counter-increment: part;
  33         }
  34         ol.part>li::after {
  35             content: counter(part, upper-roman) " ";
  36             font-weight: bold;
  37         }
  38
  39         ol.chapter {
  40             counter-reset: chapter 0;
  41         }
  42         ol.chapter>li {
  43             counter-increment: chapter;
  44         }
  45         ol.chapter>li::after {
  46             content:  "\2026\ " counter(chapter, decimal);
  47         }
  48
  49         ol.section {
  50             counter-reset: section 0;
  51         }
  52         ol.section>li {
  53             counter-increment: section;
  54         }
  55         ol.section>li::after {
  56             content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
  57             color: blue;
  58         }
  59         /*Regions setup*/
  60         .extract1 {
  61             -webkit-flow-into: f1;
  62         }
  63         .extract2 {
  64             -webkit-flow-into: f2;
  65         }
  66         .region {
  67             background-color: lightgray;
  68             margin: 1em;
  69             float: left;
  70             width: 20em;
  71             height: 20em;
  72         }
  73         #r1 {
  74             -webkit-flow-from: f1;
  75         }
  76         #r2 {
  77             -webkit-flow-from: f2;
  78         }
  79         </style>
  80     </head>
  81     <body>
  82         <p>This test passes if you see two gray rectangles, as described below. All numbering should be aligned to the right margin of the rectangles.</p>
  83         <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 preceded by an ellipsis (&hellip;), 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>
  84         <p>The second rectangle contains a two-items numbered list, numbered using decimal numbers preceded by an ellipsis. 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>
  85         <ol class="part extract1">
  86             <li>Part I
  87                 <ol class="chapter">
  88                     <li>Chapter 1</li>
  89                     <li>Chapter 2</li>
  90                     <li>Chapter 3
  91                         <ol class="section extract1">
  92                             <li>Section I.3-a</li>
  93                             <li>Section I.3-b</li>
  94                         </ol>
  95                     </li>
  96                     <li>Chapter 4
  97                         <ol class="section">
  98                             <li>Section I.4-a</li>
  99                         </ol>
 100                     </li>
 101                 </ol>
 102             </li>
 103             <li>Part II</li>
 104             <li>Part III
 105                 <ol class="chapter extract2">
 106                     <li>Chapter 1
 107                         <ol class="section">
 108                             <li>Section III.1-a</li>
 109                             <li>Section III.1-b</li>
 110                             <li>Section III.1-c</li>
 111                             <li>Section III.1-d</li>
 112                         </ol>
 113                     </li>
 114                     <li>Chapter 2</li>
 115                 </ol>
 116             </li>
 117         </ol>
 118         <div class="region" id="r1"></div>
 119         <div class="region" id="r2"></div>
 120     </body>
 121 </html>