src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-list-items-002.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on ordered and unordered list items from multiple lists</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 individual list items. List items extracted in named flows and flowed into regions must preserve their list markers and numbering, even when extracting items from multiple lists in the same named flow.">
  11         <style>
  12         ul:first-of-type, ol:first-of-type {
  13             color: blue;
  14         }
  15         ul:nth-of-type(3) {
  16             color: green;
  17         }
  18         ol > li {
  19             -webkit-flow-into: f1;
  20         }
  21         #r1 {
  22             -webkit-flow-from: f1;
  23         }
  24         ul > li {
  25             -webkit-flow-into: f2;
  26         }
  27         #r2 {
  28             -webkit-flow-from: f2;
  29         }
  30         .region {
  31             margin: 2em;
  32             background-color: lightgray;
  33             width: 200px;
  34         }
  35         </style>
  36     </head>
  37     <body>
  38         <p>This test passes if there are two gray rectangles:  the first with two numbered lists (3 items each), the second with three un-numbered lists (2 items each).<br>
  39         First list of each type should be blue, second list of each type should be black and the third un-ordered list should be green.
  40         </p>
  41         <p>Each numbered list should start at 1.<br>
  42         Both the numbers and the list markers should be outside of the gray rectangles.</p>
  43         <ol>
  44             <li>Ordered list 1, item 1</li>
  45             <li>Ordered list 1, item 2</li>
  46             <li>Ordered list 1, item 3</li>
  47         </ol>
  48         <ol>
  49             <li>Ordered list 2, item 1</li>
  50             <li>Ordered list 2, item 2</li>
  51             <li>Ordered list 2, item 3</li>
  52         </ol>
  53         <div class="region" id="r1"></div>
  54
  55         <ul>
  56             <li>Unordered list 1, item 1</li>
  57             <li>Unordered list 1, item 2</li>
  58         </ul>
  59         <ul>
  60             <li>Unordered list 2, item 1</li>
  61             <li>Unordered list 2, item 2</li>
  62         </ul>
  63         <ul>
  64             <li>Unordered list 3, item 1</li>
  65             <li>Unordered list 3, item 2</li>
  66         </ul>
  67         <div class="region" id="r2"></div>
  68     </body>
  69 </html>