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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on ordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow</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 extracted in a named flow should render in regions just as without regions.">
  11         <style>
  12         ol {
  13             margin-top: 0;
  14             margin-bottom: 0;
  15         }
  16         ol ol {
  17             color: blue;
  18             list-style-type: lower-roman;
  19         }
  20         #list1 {
  21             -webkit-flow-into: flow1;
  22         }
  23         #list21, #list22 {
  24             -webkit-flow-into: flow2;
  25         }
  26         #list31, #list32 {
  27             -webkit-flow-into: flow3;
  28         }
  29         #list21, #list31 {
  30             margin-bottom: 1em;
  31         }
  32
  33         .region {
  34             background-color: lightgray;
  35             margin: 1em;
  36             float: left;
  37             width: 17em;
  38             height: 15em;
  39         }
  40         #region1 {
  41             -webkit-flow-from: flow1;
  42         }
  43         #region2 {
  44             -webkit-flow-from: flow2;
  45         }
  46         #region3 {
  47             -webkit-flow-from: flow3;
  48         }
  49         </style>
  50     </head>
  51     <body>
  52         <p>The test passes if there are three gray rectangles: the left one with a 4 items list, the middle one with two 2 items lists, the right one with two 5 items lists. <br> The blue items in the right rectangle should be indented and numbered using roman numerals.</p>
  53         <ol id="list1">
  54             <li>First list, item 1</li>
  55             <li>First list, item 2</li>
  56             <li>First list, item 3</li>
  57             <li>First list, item 4</li>
  58         </ol>
  59         <ol id="list21">
  60             <li>List 2-1, item 1</li>
  61             <li>List 2-1, item 2</li>
  62         </ol>
  63         <ol id="list22">
  64             <li>List 2-2, item 1</li>
  65             <li>List 2-2, item 2</li>
  66         </ol>
  67         <ol id="list31">
  68             <li>List 3-1, item 1</li>
  69             <li>List 3-1, item 2
  70                 <ol>
  71                     <li>First inner list, item i</li>
  72                     <li>First inner list, item ii</li>
  73                 </ol>
  74             </li>
  75             <li>List 3-1, item 3</li>
  76         </ol>
  77         <ol id="list32">
  78             <li>List 3-2, item 1</li>
  79             <li>List 3-2, item 2</li>
  80             <li>List 3-2, item 3
  81                 <ol>
  82                     <li>Second inner list, item i</li>
  83                     <li>Second inner list, item ii</li>
  84                 </ol>
  85             </li>
  86         </ol>
  87         <div class="region" id="region1"></div>
  88         <div class="region" id="region2"></div>
  89         <div class="region" id="region3"></div>
  90     </body>
  91 </html>