src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-ordered-lists-in-regions-003-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: 17em;
  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 numbering starting at 3. After the first item there should a be a blue numbered list, indented, with numbering starting at 10.</p>
  28         <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>
  29         <p>The third rectangle should contain a single numbered list, that's reversed, with the first item being numbered 5.</p>
  30         <div class="region" id="r1">
  31             <ol id="ordered-1" start="3">
  32                 <li>First ordered list, item 3
  33                     <ol start="10">
  34                         <li>Inner ordered list, item 10</li>
  35                         <li>Inner ordered list, item 11</li>
  36                     </ol>
  37                 </li>
  38                 <li>First ordered list, item 4</li>
  39                 <li>First ordered list, item 5</li>
  40             </ol>
  41         </div>
  42
  43         <div class="region" id="r2">
  44             <ol id="ordered-2" start="10">
  45                 <li>Second ordered list, item 10</li>
  46                 <li>Second ordered list, item 11</li>
  47                 <li>Second ordered list, item 12</li>
  48             </ol>
  49             <ol class="inner" start="0">
  50                 <li>Inner ordered list, item 0</li>
  51                 <li>Inner ordered list, item 1</li>
  52                 <li>Inner ordered list, item 2</li>
  53             </ol>
  54         </div>
  55
  56         <div class="region" id="r3">
  57             <ol class="ordered-3" reversed="true">
  58                 <li>Reversed ordered list, item 5</li>
  59                 <li>Reversed ordered list, item 4</li>
  60                 <li>Reversed ordered list, item 3</li>
  61                 <li>Reversed ordered list, item 2</li>
  62                 <li>Reversed ordered list, item 1</li>
  63             </ol>
  64         </div>
  65     </body>
  66 </html>