src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-003-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         ol, ul {
   9             counter-reset: items 0;
  10             padding-left: 2em;
  11         }
  12         li {
  13             counter-increment: items 1;
  14             list-style-type: none;
  15         }
  16         .twice>li {
  17             counter-increment: items 2;
  18         }
  19         li::before {
  20             content: counters(items, ".") ". ";
  21             display: inline-block;
  22             margin-right: .3em;
  23             text-align: right;
  24         }
  25         .roman>li::before {
  26             content: counters(items, ".", upper-roman) ". ";
  27         }
  28         .latin>li::before {
  29             content: counters(items, ".", upper-latin) ". ";
  30         }
  31         .disc>li::before {
  32             content: counter(items, disc) " ";
  33         }
  34
  35         .slim-wrap {
  36             counter-reset: items 2;
  37             padding-left: 0;
  38             margin-top: 0;
  39             margin-bottom: 0;
  40         }
  41
  42         .region {
  43             background-color: lightgray;
  44             margin: 1em;
  45             float: left;
  46             width: 17em;
  47             height: 20em;
  48         }
  49
  50         #r1 {
  51             color: #006400;
  52             background-color: lightgreen;
  53         }
  54         #r2 {
  55             color: blue;
  56             background-color: lightblue;
  57         }
  58         </style>
  59     </head>
  60     <body>
  61         <p>This test passes if you see two rectangles, one green and one blue, as described below.</p>
  62         <p>The green rectangle should contain two lists, <em>one numbered</em> and <em>one bulleted</em>. The <strong>numbered list</strong> should be numbered with roman numerals. Inside it, after the second item there should be a two items bulleted list that's indented. After the first bullet there should a three items numbered list. The numbering for this list should use three levels of period separated decimal numbers (<em>e.g.</em> 2.1.1). The <strong>bulleted list</strong> should have 4 items and the same indentation as the roman-numbered list above it.</p>
  63         <p>The blue rectangle should contain a four items numbered list. The numbering for this list should use three levels of period separated decimal numbers, starting at 2.2.1.</p>
  64
  65         <div class="region" id="r1">
  66             <ol class="roman extract1">
  67                 <li>Roman list, item I</li>
  68                 <li>Roman list, item II
  69                     <ul class="disc">
  70                         <li>Bullet 1
  71                             <ol>
  72                                 <li>Sub-point 2.1.1</li>
  73                                 <li>Sub-point 2.1.2</li>
  74                             </ol>
  75                         </li>
  76                         <li>Bullet 2
  77                         </li>
  78                     </ul>
  79                 </li>
  80                 <li>Roman list, item III</li>
  81                 <li>Roman list, item IV</li>
  82             </ol>
  83             <ul class="disc extract1">
  84                 <li>Another bullet 1</li>
  85                 <li>Another bullet 2</li>
  86                 <li>Another bullet 3</li>
  87                 <li>Another bullet 4</li>
  88             </ul>
  89         </div>
  90         <div class="region" id="r2">
  91             <ol class="slim-wrap">
  92                 <ol class="slim-wrap">
  93                     <ol>
  94                         <li>Sub-point 2.2.1</li>
  95                         <li>Sub-point 2.2.2</li>
  96                         <li>Sub-point 2.2.3</li>
  97                         <li>Sub-point 2.2.4</li>
  98                     </ol>
  99                 </ol>
 100             </ol>
 101         </div>
 102     </body>
 103 </html>