| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Reftest Reference</title> |
| <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> |
| <style> |
| .container { |
| color: #006400; |
| background-color: lightgreen; |
| margin: 2em; |
| |
| } |
| .region { |
| margin: 2em; |
| background-color: lightblue; |
| color: blue; |
| } |
| .region > ul, |
| .region > ol { |
| padding: 0; |
| margin: 0; |
| } |
| .circle { |
| list-style-type: circle; |
| } |
| .disc { |
| list-style-type: disc; |
| } |
| .decimal { |
| list-style-type: decimal; |
| } |
| .roman { |
| list-style-type: upper-roman; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test passes if you see two rectangles, one green and one blue, as described below:<br> |
| 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> |
| 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. |
| </p> |
| <div class="container"> |
| <ol start="2" class="decimal"> |
| <li>Numbered list, item 2</li> |
| <li>Numbered list, item 3</li> |
| </ol> |
| <ul class="disc"> |
| <li>Bullet list, item 1</li> |
| <li>Bullet list, item 3 |
| <ul class="circle"> |
| <li>Bullet sub-list, item 2</li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| <div class="region" id="r1"> |
| <ol class="decimal"> |
| <li>Numbered list, item 1</li> |
| </ol> |
| <ul class="disc"> |
| <li>Bullet list, item 2 |
| <ol class="roman" start="2"> |
| <li>Numbered sub-list, item II</li> |
| </ol> |
| </li> |
| </ul> |
| <ol class="roman"> |
| <li>Numbered sub-list, item I</li> |
| </ol> |
| <ul class="circle"> |
| <li>Bullet sub-list, item 1</li> |
| </ul> |
| <ul class="disc"> |
| <li>Bullet list, item 4</li> |
| </ul> |
| </div> |
| </body> |
| </html> |
