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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Test: flow-into on ordered lists that have the "reversed" 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 'reversed' list attribute.">
  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: 15em;
  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 numbers in reverse order. After the first item there should a be a blue numbered list, indented and numbered in normal order.</p>
  51         <p>The second rectangle should contain two numbered list. The first one should be black and numbered in reverse order while the second should be blue and numbered in normal order. They should both have the same indentation level.</p>
  52         <p>The third rectangle should contain two black, numbered lists, the first with three items, the second with two items. Both lists should be numbered in reverse.</p>
  53         <ol id="ordered-1" reversed="reversed">
  54             <li>First reversed list, item 3
  55                 <ol>
  56                     <li>First inner list, item 1</li>
  57                     <li>First inner list, item 2</li>
  58                 </ol>
  59             </li>
  60             <li>First reversed list, item 2</li>
  61             <li>First reversed list, item 1</li>
  62         </ol>
  63         <div class="region" id="r1"></div>
  64
  65         <ol id="ordered-2" reversed>
  66             <li>Second reversed list, item 3</li>
  67             <li>Second reversed list, item 2
  68                 <ol>
  69                     <li>Second inner list, item 1</li>
  70                     <li>Second inner list, item 2</li>
  71                     <li>Second inner list, item 3</li>
  72                 </ol>
  73             </li>
  74             <li>Second reversed list, item 1</li>
  75         </ol>
  76         <div class="region" id="r2"></div>
  77
  78         <ol class="ordered-3" reversed="true">
  79             <li>Third reversed list, item 3</li>
  80             <li>Third reversed list, item 2</li>
  81             <li>Third reversed list, item 1</li>
  82         </ol>
  83         <ol class="ordered-3" reversed="true">
  84             <li>Final reversed list, item 2</li>
  85             <li>Final reversed list, item 1</li>
  86         </ol>
  87         <div class="region" id="r3"></div>
  88     </body>
  89 </html>