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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on ordered lists that have the "reversed" and/or "start" HTML attribute set</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. Lists extracted in a named flow should still honor the HTML5 'start' and 'reversed' list attributes.">
  11         <style>
  12         ol {
  13             margin: 0;
  14         }
  15         ol ol {
  16             color: blue;
  17         }
  18         #ordered-1 {
  19             -webkit-flow-into: f1;
  20         }
  21         #r1 {
  22             -webkit-flow-from: f1;
  23         }
  24
  25         #ordered-2,
  26         #ordered-2 ol {
  27             -webkit-flow-into: f2;
  28         }
  29         #r2 {
  30             -webkit-flow-from: f2;
  31         }
  32
  33         .ordered-3 {
  34             -webkit-flow-into: f3;
  35         }
  36         #r3 {
  37             -webkit-flow-from: f3;
  38         }
  39         .region {
  40             background-color: lightgray;
  41             margin: 1em;
  42             float: left;
  43             width: 17em;
  44             height: 15em;
  45         }
  46         </style>
  47     </head>
  48     <body>
  49         <p>This test passes if you see three gray rectangles with a number of lists inside each, as follows.</p>
  50         <p>The first rectangle should contain a black numbered list, with the numbering starting at 3. After the first item there should a be a blue numbered list, indented, with numbering starting at 10.</p>
  51         <p>The second rectangle should contain two numbered list. The first one should be black with numbering starting at 10, while the second should be blue and with the numbering starting at 0. They should both have the same indentation level.</p>
  52         <p>The third rectangle should contain a single numbered list, that's reversed, with the first item being numbered 5.</p>
  53         <ol id="ordered-1" start="3">
  54             <li>First ordered list, item 3
  55                 <ol start="10">
  56                     <li>Inner ordered list, item 10</li>
  57                     <li>Inner ordered list, item 11</li>
  58                 </ol>
  59             </li>
  60             <li>First ordered list, item 4</li>
  61             <li>First ordered list, item 5</li>
  62         </ol>
  63         <div class="region" id="r1"></div>
  64
  65         <ol id="ordered-2" start="10">
  66             <li>Second ordered list, item 10</li>
  67             <li>Second ordered list, item 11
  68                 <ol start="0">
  69                     <li>Inner ordered list, item 0</li>
  70                     <li>Inner ordered list, item 1</li>
  71                     <li>Inner ordered list, item 2</li>
  72                 </ol>
  73             </li>
  74             <li>Second ordered list, item 12</li>
  75         </ol>
  76         <div class="region" id="r2"></div>
  77
  78         <ol class="ordered-3" reversed="true" start="5">
  79             <li>Reversed ordered list, item 5</li>
  80             <li>Reversed ordered list, item 4</li>
  81             <li>Reversed ordered list, item 3</li>
  82         </ol>
  83         <ol class="ordered-3" reversed="true">
  84             <li>Reversed ordered list, item 2</li>
  85             <li>Reversed ordered list, item 1</li>
  86         </ol>
  87         <div class="region" id="r3"></div>
  88     </body>
  89 </html>