| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ol element</title> |
| <link rel="author" title="dzenana" href="mailto:dzenana.trenutak@gmail.com"> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-ol-element"> |
| <link rel="match" href="grouping-ol-start-reftest-001-ref.html" /> |
| <meta name="assert" content="Sequences produced by calculated values for LI elements within OL match spec's expectations (part one)." /> |
| <style type="text/css"> |
| span p {display:list-item; margin-left: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-top: 0; padding-bottom: 0;} |
| span li {margin-left: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-top: 0; padding-bottom: 0; font-family: monospace;} |
| span ol {margin-left: 0; margin-top: 0; margin-bottom: 0; padding-left: 5em; padding-top: 0; padding-bottom: 0; font-family: monospace; |
| list-style-position: inside; list-style-type: decimal; } |
| </style> |
| </head> |
| <body> |
| <p>This test continues to validate the ol element. This reftest is necessary because the values of the ol's li children as calculated and displayed by the user agent are NOT systematically available programatically. Only explicitly-set values are available programatically. Therefore, we need to check actual rendering against expected rendering.</p> |
| |
| <p>The spec states:</p> |
| <blockquote><p>The first item in the list has the ordinal value given by the ol element's start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.</p> |
| <p>Each subsequent item in the list has the ordinal value given by its value attribute, if it has one, or, if it doesn't, the ordinal value of the previous item, plus one if the reversed is absent, or minus one if it is present.</p></blockquote> |
| |
| <p><strong>This reftest passes if each list's items are numbered identically to the horizontal sequence immediately above those list items.</strong></p> |
| <p>(Note: each list item has no content; only the sequencing should appear.)</p> |
| |
| <span> |
| |
| <p>2, 3, 4 (ol has start attribute of 2)</p> |
| <ol start="2"> |
| <li></li> |
| <li></li> |
| <li></li> |
| </ol> |
| |
| <p>-9, -8, -7 (ol has start attribute of -9)</p> |
| <ol start="-9"> |
| <li></li> |
| <li></li> |
| <li></li> |
| </ol> |
| |
| <p>1000, 1001, 1002 (list's start attribute of 1000 provided by JavaScript)</p> |
| <ol id="start_me"> |
| <li></li> |
| <li></li> |
| <li></li> |
| </ol> |
| |
| <p>2, 1, 9 (each list item has a specified value attribute, list has a start attribute of 1000)</p> |
| <ol istart="1000"> |
| <li value="2"></li> |
| <li value="1"></li> |
| <li value="9"></li> |
| </ol> |
| |
| </span> |
| |
| <script> |
| document.getElementById("start_me").start = 1000; |
| </script> |
| |
| </body> |
| </html> |
