| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Reftest Reference</title> |
| <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> |
| <style> |
| ul { |
| margin-top: 0; |
| margin-bottom: 0; |
| } |
| ul ul { |
| color: blue; |
| } |
| #list21, #list31 { |
| margin-bottom: 1em; |
| } |
| |
| .region { |
| background-color: lightgray; |
| margin: 1em; |
| float: left; |
| width: 20em; |
| height: 15em; |
| } |
| </style> |
| </head> |
| <body> |
| <p>The test passes if there are three gray rectangles: the left one with a 4 items list, the middle one with two 2 items lists, the right one with two 5 items lists. <br> The blue items in the right rectangle should be indented and have a different marker.</p> |
| <div class="region" id="region1"> |
| <ul id="list1"> |
| <li>Unordered list, item 1</li> |
| <li>Unordered list, item 2</li> |
| <li>Unordered list, item 3</li> |
| <li>Unordered list, item 4</li> |
| </ul> |
| </div> |
| <div class="region" id="region2"> |
| <ul id="list21"> |
| <li>Unordered list 2-1, item 1</li> |
| <li>Unordered list 2-1, item 2</li> |
| </ul> |
| <ul id="list22"> |
| <li>Unordered list 2-2, item 1</li> |
| <li>Unordered list 2-2, item 2</li> |
| </ul> |
| </div> |
| <div class="region" id="region3"> |
| <ul id="list31"> |
| <li>Unordered list 3-1, item 1</li> |
| <li>Unordered list 3-1, item 2 |
| <ul> |
| <li>First unordered inner list, item 1</li> |
| <li>First unordered inner list, item 2</li> |
| </ul> |
| </li> |
| <li>Unordered list 3-1, item 3</li> |
| </ul> |
| <ul id="list32"> |
| <li>Unordered list 3-2, item 1</li> |
| <li>Unordered list 3-2, item 2</li> |
| <li>Unordered list 3-2, item 3 |
| <ul> |
| <li>Second unordered inner list, item 1</li> |
| <li>Second unordered inner list, item 2</li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </body> |
| </html> |
