src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-list-items-009-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         .container {
   9             color: #006400;
  10             background-color: lightgreen;
  11             margin: 2em;
  12
  13         }
  14         .region {
  15             margin: 2em;
  16             background-color: lightblue;
  17             color: blue;
  18         }
  19         .region > ul,
  20         .region > ol {
  21             padding: 0;
  22             margin: 0;
  23         }
  24         .disc {
  25             list-style-type: disc;
  26         }
  27         .decimal {
  28             list-style-type: decimal;
  29         }
  30         .latin {
  31             list-style-type: upper-latin;
  32         }
  33         .hide {
  34             visibility: hidden;
  35             height: 0;
  36         }
  37         </style>
  38     </head>
  39     <body>
  40         <p>Test passes if you see two rectangles, one green and one blue, as described below:<br>
  41         The green rectangle should contain three lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting at 3, with only one item. The <strong>second list</strong> should be a bulleted list with three items. The <strong>third list</strong> should be a numbered list with two items, numbered A and C respectively.<br>
  42         The blue rectangle should contain a list with items numbered/marked in a different ways, as follows. As opposed to the green rectangle, the numbers/markings for the list items in the blue rectangle should be outside the rectangle. The <strong>first and second items</strong> should be numbered with 1 and 2 (decimal). The <strong>third and fourth items</strong> should be bulleted. The <strong>fifth and sixth items</strong> should be numbered with B and D respectively.</p>
  43         <div class="container">
  44             <ol class="decimal" start="3">
  45                 <li>First numbered list, item 3</li>
  46             </ol>
  47             <ul class="disc">
  48                 <li>Bullet list, item 1</li>
  49                 <li>Bullet list, item 3</li>
  50                 <li>Bullet list, item 5</li>
  51             </ul>
  52             <ol class="latin" start="1">
  53                 <li>Second numbered list, item A</li>
  54                 <li class="hide"></li>
  55                 <li>Second numbered list, item C</li>
  56             </ol>
  57         </div>
  58         <div class="region" id="r1">
  59             <ol class="decimal">
  60                 <li id="theItem">First numbered list, item 1</li>
  61                 <li class="extract">First numbered list, item 2</li>
  62             </ol>
  63             <ul class="disc">
  64                 <li class="extract">Bullet list, item 2</li>
  65                 <li class="extract">Bullet list, item 4</li>
  66             </ul>
  67             <ol class="latin" start="2">
  68                 <li class="extract">Second numbered list, item B</li>
  69                 <li class="hide"></li>
  70                 <li class="extract">Second numbered list, item D</li>
  71             </ol>
  72         </div>
  73     </body>
  74 </html>