src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-004.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 ::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.">
  13         <style>
  14         /*Lists setup*/
  15         ol {
  16             padding-left: 1em;
  17         }
  18         ol>li {
  19             list-style-type: none;
  20         }
  21         ol.part {
  22             counter-reset: part 0;
  23         }
  24         ol.part>li {
  25             counter-increment: part;
  26         }
  27         ol.part>li::before {
  28             content: counter(part, upper-roman) " ";
  29             font-weight: bold;
  30         }
  31         ol.chapter {
  32             counter-reset: chapter 0;
  33         }
  34         ol.chapter>li {
  35             counter-increment: chapter;
  36         }
  37         ol.chapter>li::before {
  38             content: counter(chapter, decimal) ". ";
  39         }
  40         ol.section {
  41             counter-reset: section 0;
  42         }
  43         ol.section>li {
  44             counter-increment: section;
  45         }
  46         ol.section>li::before {
  47             content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
  48             color: blue;
  49         }
  50         /*Regions setup*/
  51         .extract1 {
  52             -webkit-flow-into: f1;
  53         }
  54         .extract2 {
  55             -webkit-flow-into: f2;
  56         }
  57         .region {
  58             background-color: lightgray;
  59             margin: 1em;
  60             float: left;
  61             width: 20em;
  62             height: 20em;
  63         }
  64         #r1 {
  65             -webkit-flow-from: f1;
  66         }
  67         #r2 {
  68             -webkit-flow-from: f2;
  69         }
  70         </style>
  71     </head>
  72     <body>
  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">
  77             <li>Part I
  78                 <ol class="chapter">
  79                     <li>Chapter 1</li>
  80                     <li>Chapter 2</li>
  81                     <li>Chapter 3
  82                         <ol class="section extract1">
  83                             <li>Section I.3-a</li>
  84                             <li>Section I.3-b</li>
  85                         </ol>
  86                     </li>
  87                     <li>Chapter 4
  88                         <ol class="section">
  89                             <li>Section I.4-a</li>
  90                         </ol>
  91                     </li>
  92                 </ol>
  93             </li>
  94             <li>Part II</li>
  95             <li>Part III
  96                 <ol class="chapter extract2">
  97                     <li>Chapter 1
  98                         <ol class="section">
  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>
 103                         </ol>
 104                     </li>
 105                     <li>Chapter 2</li>
 106                 </ol>
 107             </li>
 108         </ol>
 109         <div class="region" id="r1"></div>
 110         <div class="region" id="r2"></div>
 111     </body>
 112 </html>