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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Reftest Reference</title>
   5         <link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
   6         <link rel="stylesheet" type="text/css" href="../resources/font-smoothing-disabler.css">
   7         <style>
   8         /*Lists setup*/
   9         ol {
  10             padding-left: 1em;
  11         }
  12         ol>li {
  13             list-style-type: none;
  14         }
  15         ol.part {
  16             counter-reset: part 0;
  17         }
  18         ol.part>li {
  19             counter-increment: part;
  20         }
  21         ol.part>li::before {
  22             content: counter(part, upper-roman) " ";
  23             font-weight: bold;
  24         }
  25         ol.chapter {
  26             counter-reset: chapter 0;
  27         }
  28         ol.chapter>li {
  29             counter-increment: chapter;
  30         }
  31         ol.chapter>li::before {
  32             content: counter(chapter, decimal) ". ";
  33         }
  34         ol.section {
  35             counter-reset: section 0;
  36         }
  37         ol.section>li {
  38             counter-increment: section;
  39         }
  40         ol.section>li::before {
  41             content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
  42             color: blue;
  43         }
  44         /*Extracted content setup*/
  45         ol.part1-chap3-section {
  46             counter-reset: part 1 chapter 3;
  47         }
  48         ol.part3-chap {
  49             counter-reset: part 3;
  50         }
  51         .slim {
  52             margin-top: 0;
  53             margin-bottom: 0;
  54         }
  55         /*Regions setup*/
  56         .region {
  57             background-color: lightgray;
  58             margin: 1em;
  59             float: left;
  60             width: 20em;
  61             height: 20em;
  62         }
  63         </style>
  64     </head>
  65     <body>
  66         <p>This test passes if you see two gray rectangles, as described below.</p>
  67         <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>
  68         <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>
  69         <div class="region" id="r1">
  70             <ol class="part">
  71                 <li>Part I
  72                     <ol class="chapter">
  73                         <li>Chapter 1</li>
  74                         <li>Chapter 2</li>
  75                         <li>Chapter 3
  76                         </li>
  77                         <li>Chapter 4
  78                             <ol class="section">
  79                                 <li>Section I.4-a</li>
  80                             </ol>
  81                         </li>
  82                     </ol>
  83                 </li>
  84                 <li>Part II</li>
  85                 <li>Part III
  86                 </li>
  87             </ol>
  88             <ol class="section part1-chap3-section">
  89                 <li>Section I.3-a</li>
  90                 <li>Section I.3-b</li>
  91             </ol>
  92         </div>
  93         <div class="region" id="r2">
  94             <ol class="chapter part3-chap slim">
  95                 <li>Chapter 1
  96                     <ol class="section">
  97                         <li>Section III.1-a</li>
  98                         <li>Section III.1-b</li>
  99                         <li>Section III.1-c</li>
 100                         <li>Section III.1-d</li>
 101                     </ol>
 102                 </li>
 103                 <li>Chapter 2</li>
 104             </ol>
 105         </div>
 106     </body>
 107 </html>