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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on ordered lists that use a single CSS counter 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="stylesheet" type="text/css" href="../resources/font-smoothing-disabler.css">
   9         <meta name="flags" content="">
  10         <meta name="assert" content="The flow-into property can be applied to ordered lists. Multiple lists using a single counter displayed in generated content and extracted in a named flow should render in regions just as without regions.">
  11         <style>
  12         ol {
  13             list-style-type: none;
  14             counter-reset: items 0;
  15         }
  16         ol>li {
  17             counter-increment: items;
  18         }
  19         li::before {
  20             content: counter(items) ". ";
  21             display: inline-block;
  22             width: 1.5em;
  23             margin-right: .3em;
  24             text-align: right;
  25         }
  26
  27         ol.double>li {
  28             counter-increment: items 2;
  29         }
  30         ol.double>li::before {
  31             content: counter(items, upper-latin) ". ";
  32         }
  33
  34         ol.down-ten {
  35             counter-reset: items 11;
  36         }
  37         ol.down-ten>li {
  38             counter-increment: items -1;
  39         }
  40         ol.down-ten>li::before {
  41             content: counter(items, upper-roman) ". ";
  42             width: 2em;
  43         }
  44
  45         #list1 {
  46             -webkit-flow-into: flow1;
  47         }
  48         #list21, #list22 {
  49             -webkit-flow-into: flow2;
  50         }
  51         #list31 {
  52             -webkit-flow-into: flow3;
  53         }
  54
  55         .region {
  56             background-color: lightgray;
  57             margin: 1em;
  58             float: left;
  59             width: 18em;
  60             height: 15em;
  61         }
  62         #region1 {
  63             -webkit-flow-from: flow1;
  64             width: 12em;
  65         }
  66         #region2 {
  67             -webkit-flow-from: flow2;
  68             width: 12em;
  69         }
  70         #region3 {
  71             -webkit-flow-from: flow3;
  72         }
  73         </style>
  74     </head>
  75     <body>
  76         <p>The test passes if there are three gray rectangles as follows:<br>
  77             1. the first one contains a numbered, 4 items list<br>
  78             2. the second contains two numbered, 3 items lists &ndash; each list uses letters for numbering, starting with 'B.' and skipping every other letter (<em>e.g.</em> B, D, F)<br>
  79             3. the last rectangle contains a descending numbered list: it's numbered using roman numerals, starting at X (10), in decreasing order; after the second item there's an inner numbered list with 2 items, again descendingly numbered with roman numerals, starting at 10; finally, before the last item there's another inner numbered list with 2 items, labeled with letters, more precisely, the letters B and D</p>
  80         <ol id="list1">
  81             <li>First list, item 1</li>
  82             <li>First list, item 2</li>
  83             <li>First list, item 3</li>
  84             <li>First list, item 4</li>
  85         </ol>
  86         <ol id="list21" class="double">
  87             <li>List 2-1, item B</li>
  88             <li>List 2-1, item D</li>
  89             <li>List 2-1, item F</li>
  90         </ol>
  91         <ol id="list22" class="double" start="4">
  92             <li>List 2-2, item B</li>
  93             <li>List 2-2, item D</li>
  94             <li>List 2-2, item F</li>
  95         </ol>
  96         <ol id="list31" class="down-ten">
  97             <li>Outer list, item X</li>
  98             <li>Outer list, item IX
  99                 <ol class="down-ten">
 100                     <li>Inner list 1, item X</li>
 101                     <li>Inner list 1, item IX</li>
 102                 </ol>
 103             </li>
 104             <li>Outer list, item VIII</li>
 105             <li>Outer list, item VII</li>
 106             <li>Outer list, item VI
 107                 <ol class="double">
 108                     <li>Inner list 2, item B</li>
 109                     <li>Inner list 2, item D</li>
 110                 </ol>
 111             </li>
 112             <li>Outer list, item V</li>
 113         </ol>
 114         <div class="region" id="region1"></div>
 115         <div class="region" id="region2"></div>
 116         <div class="region" id="region3"></div>
 117     </body>
 118 </html>