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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>CSS Reftest Reference</title>
   5         <link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
   6         <link rel="stylesheet" type="text/css" href="../resources/font-smoothing-disabler.css">
   7         <style>
   8         ol {
   9             margin: 0;
  10         }
  11         ol ol,
  12         .inner {
  13             color: blue;
  14         }
  15
  16         .region {
  17             background-color: lightgray;
  18             margin: 1em;
  19             float: left;
  20             width: 15em;
  21             height: 15em;
  22         }
  23         </style>
  24     </head>
  25     <body>
  26         <p>This test passes if you see three gray rectangles with a number of lists inside each, as follows.</p>
  27         <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>
  28         <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>
  29         <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>
  30         <div class="region" id="r1">
  31             <ol id="ordered-1" reversed="reversed">
  32                 <li>First reversed list, item 3
  33                     <ol>
  34                         <li>First inner list, item 1</li>
  35                         <li>First inner list, item 2</li>
  36                     </ol>
  37                 </li>
  38                 <li>First reversed list, item 2</li>
  39                 <li>First reversed list, item 1</li>
  40             </ol>
  41         </div>
  42
  43         <div class="region" id="r2">
  44             <ol id="ordered-2" reversed>
  45                 <li>Second reversed list, item 3</li>
  46                 <li>Second reversed list, item 2</li>
  47                 <li>Second reversed list, item 1</li>
  48             </ol>
  49             <ol class="inner">
  50                 <li>Second inner list, item 1</li>
  51                 <li>Second inner list, item 2</li>
  52                 <li>Second inner list, item 3</li>
  53             </ol>
  54         </div>
  55
  56         <div class="region" id="r3">
  57             <ol class="ordered-3" reversed="true">
  58                 <li>Third reversed list, item 3</li>
  59                 <li>Third reversed list, item 2</li>
  60                 <li>Third reversed list, item 1</li>
  61             </ol>
  62             <ol class="ordered-3" reversed="true">
  63                 <li>Final reversed list, item 2</li>
  64                 <li>Final reversed list, item 1</li>
  65             </ol>
  66         </div>
  67     </body>
  68 </html>