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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on ordered and unordered list items</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.">
  11         <style>
  12         ul > li {
  13             -webkit-flow-into: uflow;
  14         }
  15         #r1 {
  16             -webkit-flow-from: uflow;
  17         }
  18         ol > li {
  19             -webkit-flow-into: oflow;
  20         }
  21         #r2 {
  22             -webkit-flow-from: oflow;
  23         }
  24         .region {
  25             width: 200px;
  26             background-color: lightgray;
  27             margin: 1em 2em;
  28         }
  29         </style>
  30     </head>
  31     <body>
  32         <p>This test passes if there are two gray rectangles, each with a 4 items list in it.<br>
  33         The first list should not be numbered and the second should be numbered, starting at 1.<br>
  34         Both the list markers for the first list and the numbers for the second list should be outside of the gray rectangles.
  35         </p>
  36         <ul>
  37             <li>Unordered list, item 1</li>
  38             <li>Unordered list, item 2</li>
  39             <li>Unordered list, item 3</li>
  40             <li>Unordered list, item 4</li>
  41         </ul>
  42         <ol>
  43             <li>Ordered list, item 1</li>
  44             <li>Ordered list, item 2</li>
  45             <li>Ordered list, item 3</li>
  46             <li>Ordered list, item 4</li>
  47         </ol>
  48         <div id="r1" class="region"></div>
  49         <div id="r2" class="region"></div>
  50     </body>
  51 </html>