src/third_party/WebKit/LayoutTests/fast/regions/counters/extract-list-items-004-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         #outer-unordered-1 {
   9             padding: 0;
  10         }
  11         #r2 ol, #r2 ul {
  12             padding: 0;
  13         }
  14
  15         #outer-unordered-1 ul,
  16         #outer-unordered-2 ul {
  17             color: blue;
  18         }
  19
  20         #outer-unordered-2 ul ul {
  21             color: green;
  22         }
  23
  24         .region {
  25             margin: 2em;
  26             background-color: lightgray;
  27             width: 20em;
  28         }
  29         </style>
  30     </head>
  31     <body>
  32         <p>This test passes if there are two gray rectangles:  each with a list with another lists nested in it. The list markers for the black list in the first rectangle, and for all the lists in the second rectangle should be rendered outside of the gray boxes</p>
  33         <p>The list in the first rectangle should be black, with two blue nested lists in it. The nested lists should appear after the first and the second items, they should be indented and use a different kind of bullet.</p>
  34         <p>The list in the second rectangle should be black, with a blue nested list in it that has in turn a nested green list in it. Each of the black, blue and green list should use different kinds of bullets and list items of the same color should have the same kind of bullet.</p>
  35         <div class="region" id="r1">
  36             <ul id="outer-unordered-1">
  37                 <li>First unordered list, item 1
  38                     <ul>
  39                         <li>First inner unordered list, item 1</li>
  40                         <li>First inner unordered list, item 2</li>
  41                         <li>First inner unordered list, item 3</li>
  42                     </ul>
  43                 </li>
  44                 <li>First unordered list, item 2
  45                     <ul>
  46                         <li>Second inner unordered list, item 1</li>
  47                         <li>Second inner unordered list, item 2</li>
  48                     </ul>
  49                 </li>
  50                 <li>First unordered list, item 3</li>
  51             </ul>
  52         </div>
  53         <div class="region" id="r2">
  54             <ul id="outer-unordered-2">
  55                 <li>Second unordered list, item 1</li>
  56                 <li>Second unordered list, item 2
  57                     <ul>
  58                         <li>Last inner unordered list, item 1</li>
  59                         <li>Last inner unordered list, item 2
  60                             <ul>
  61                                 <li>Innermost unordered list, item 1</li>
  62                                 <li>Innermost unordered list, item 2</li>
  63                             </ul>
  64                         </li>
  65                         <li>Last inner unordered list, item 3</li>
  66                         <li>Last inner unordered list, item 4</li>
  67                     </ul>
  68                 </li>
  69                 <li>Second unordered list, item 3</li>
  70             </ul>
  71         </div>
  72     </body>
  73 </html>