| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Reftest Reference</title> |
| <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> |
| <style> |
| ul, ol { |
| margin: 0; |
| } |
| .ordered { |
| list-style-type: lower-latin; |
| } |
| .unordered { |
| list-style-type: circle; |
| } |
| .container { |
| color: #006400; |
| background-color: lightgreen; |
| margin: 2em; |
| float: left; |
| width: 15em; |
| } |
| .region { |
| color: blue; |
| margin: 2em; |
| background-color: lightblue; |
| float: left; |
| width: 15em; |
| } |
| |
| .region > ul, |
| .region > ol { |
| padding: 0; |
| margin: 0; |
| } |
| .hide { |
| visibility: hidden; |
| height: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test passes if you see two rectangles, one green and one blue, as described below.</p> |
| <p>The green rectangle should contain a list with items numbered/marked as such: the <strong>first two items</strong> should be numbered with small latin letters, starting with d. The <strong>next three items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>inside</em> the green rectangle.</p> |
| <p>The blue rectangle should contain a list with items numbered/marked as such: the <strong>first three items</strong> should be numbered with small latin letters, starting with a. The <strong>next two items</strong> should be bulleted with a circle. The numbers/bullets should all be <em>outside</em> the blue rectangle.</p> |
| |
| <div class="container"> |
| <ul class="ordered" start="4"> |
| <li class="hide"></li> |
| <li class="hide"></li> |
| <li class="hide"></li> |
| <li>Ordered list, item d</li> |
| <li>Ordered list, item e</li> |
| </ul> |
| <ol class="unordered"> |
| <li>Unordered list, item 1</li> |
| <li>Unordered list, item 2</li> |
| <li>Unordered list, item 3</li> |
| </ol> |
| </div> |
| <div class="region" id="r1"> |
| <ul class="ordered"> |
| <li>Ordered list, item a</li> |
| <li>Ordered list, item b</li> |
| <li>Ordered list, item c</li> |
| </ul> |
| <ol class="unordered"> |
| <li>Unordered list, item 4</li> |
| <li>Unordered list, item 5</li> |
| </ol> |
| </div> |
| </body> |
| </html> |
