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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on list items from lists that use a single CSS counter 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. Extracting parts of a list numbered using a single counter in nested scopes should render in regions just as without regions.">
  13         <style>
  14         ol, ul {
  15             counter-reset: items 0;
  16             padding-left: 2em;
  17         }
  18         li {
  19             counter-increment: items 1;
  20             list-style-type: none;
  21         }
  22         .twice>li {
  23             counter-increment: items 2;
  24         }
  25         li::before {
  26             content: counters(items, ".") ". ";
  27             display: inline-block;
  28             margin-right: .3em;
  29             text-align: right;
  30         }
  31         .roman>li::before {
  32             content: counters(items, ".", upper-roman) ". ";
  33         }
  34         .latin>li::before {
  35             content: counters(items, ".", upper-latin) ". ";
  36         }
  37         .disc>li::before {
  38             content: counter(items, disc) " ";
  39         }
  40         .extract1 {
  41             -webkit-flow-into: f1;
  42             color: #006400;
  43         }
  44         .extract2 {
  45             -webkit-flow-into: f2;
  46             color: blue;
  47         }
  48
  49         .region {
  50             background-color: lightgray;
  51             margin: 1em;
  52             float: left;
  53             width: 17em;
  54             height: 20em;
  55         }
  56         #r1 {
  57             -webkit-flow-from: f1;
  58             background-color: lightgreen;
  59         }
  60         #r2 {
  61             -webkit-flow-from: f2;
  62             background-color: lightblue;
  63         }
  64         </style>
  65     </head>
  66     <body>
  67         <p>This test passes if you see two rectangles, one green and one blue, as described below.</p>
  68         <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>
  69         <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>
  70
  71         <ol class="roman extract1">
  72             <li>Roman list, item I</li>
  73             <li>Roman list, item II
  74                 <ul class="disc">
  75                     <li>Bullet 1
  76                         <ol>
  77                             <li>Sub-point 2.1.1</li>
  78                             <li>Sub-point 2.1.2</li>
  79                         </ol>
  80                     </li>
  81                     <li>Bullet 2
  82                         <ol class="extract2">
  83                             <li>Sub-point 2.2.1</li>
  84                             <li>Sub-point 2.2.2</li>
  85                             <li>Sub-point 2.2.3</li>
  86                             <li>Sub-point 2.2.4</li>
  87                         </ol>
  88                     </li>
  89                 </ul>
  90             </li>
  91             <li>Roman list, item III</li>
  92             <li>Roman list, item IV
  93                 <ul class="disc extract1">
  94                     <li>Another bullet 1</li>
  95                     <li>Another bullet 2</li>
  96                     <li>Another bullet 3</li>
  97                     <li>Another bullet 4</li>
  98                 </ul>
  99             </li>
 100         </ol>
 101         <div class="region" id="r1"></div>
 102         <div class="region" id="r2"></div>
 103     </body>
 104 </html>