src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-list-items-008-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         .circle {
  25             list-style-type: circle;
  26         }
  27         .disc {
  28             list-style-type: disc;
  29         }
  30         .decimal {
  31             list-style-type: decimal;
  32         }
  33         .roman {
  34             list-style-type: upper-roman;
  35         }
  36         </style>
  37     </head>
  38     <body>
  39         <p>Test passes if you see two rectangles, one green and one blue, as described below:<br>
  40         The green rectangle should contain two lists, separated by a small vertical space. The <strong>first list</strong> should be a numbered list starting with 2 that has 2 items;  the <strong>second list</strong> should be a bullet list with 3 items, the last one being indented and with a different type of bullet.<br>
  41         The blue rectangle should contain a list with items numbered/marked in different ways, as follows. Except where noted, the numbers/markers should be <em>outside</em> the the blue rectangle. The <strong>first item</strong> should be numbered with the number 1, in decimal. The <strong>second item</strong> should be bulleted. The <strong>third and fourth items</strong> should be numbered with 2 and 1 respectively, with roman numerals. Also, the <strong>third item</strong> should be indented (with the number inside the blue rectangle). The <strong>fourth and fifth items</strong> should be bulleted, with the <strong>fourth item</strong> having a different kind of bullet than the second and fifth item.
  42         </p>
  43         <div class="container">
  44             <ol start="2" class="decimal">
  45                 <li>Numbered list, item 2</li>
  46                 <li>Numbered list, item 3</li>
  47             </ol>
  48             <ul class="disc">
  49                 <li>Bullet list, item 1</li>
  50                 <li>Bullet list, item 3
  51                     <ul class="circle">
  52                         <li>Bullet sub-list, item 2</li>
  53                     </ul>
  54                 </li>
  55             </ul>
  56         </div>
  57         <div class="region" id="r1">
  58             <ol class="decimal">
  59                 <li>Numbered list, item 1</li>
  60             </ol>
  61             <ul class="disc">
  62                 <li>Bullet list, item 2
  63                     <ol class="roman" start="2">
  64                         <li>Numbered sub-list, item II</li>
  65                     </ol>
  66                 </li>
  67             </ul>
  68             <ol class="roman">
  69                 <li>Numbered sub-list, item I</li>
  70             </ol>
  71             <ul class="circle">
  72                 <li>Bullet sub-list, item 1</li>
  73             </ul>
  74             <ul class="disc">
  75                 <li>Bullet list, item 4</li>
  76             </ul>
  77         </div>
  78     </body>
  79 </html>