li-value-reversed-006d.html (1883B)
1 <!doctype html> 2 <title></title> 3 <link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters"> 4 <link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6738"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1706346"> 7 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 8 <link rel="match" href="li-value-reversed-006-ref.html"> 9 <meta name="assert" content="Reversed value initialization works also for sibling scopes."> 10 <style> 11 :root { 12 color:black; background-color:white; font:10px/1 monospace; 13 } 14 ol::before, li::before { 15 content: counters(list-item,"."); 16 } 17 ol[reversed] { 18 margin-bottom: 0; 19 } 20 ol.no-counter { 21 counter-reset: blah; 22 margin-top: 0; 23 } 24 ol.no-counter::before { 25 content: none; 26 } 27 div, span { 28 counter-increment: list-item 0; 29 } 30 </style> 31 <ol reversed></ol> 32 <ol class="no-counter"> 33 <div></div> 34 <li style="counter-increment: list-item -2"><span></span><span></span></li> 35 <li style="counter-increment: list-item -2"><span></span></li> 36 <li style="counter-increment: list-item -2"><span></span></li> 37 <div></div> 38 <div></div> 39 <div></div> 40 </ol> 41 <ol reversed></ol> 42 <ol class="no-counter"> 43 <div></div> 44 <li style="counter-increment: list-item -3"></li> 45 <div></div> 46 <li style="counter-increment: list-item -1"><span></span></li> 47 <li style="counter-increment: list-item -8"></li> 48 <div></div> 49 </ol> 50 <ol reversed></ol> 51 <ol class="no-counter"> 52 <div></div> 53 <li style="counter-increment: list-item 2"></li> 54 <li style="counter-increment: list-item 2"></li> 55 <li style="counter-increment: list-item 2"></li> 56 </ol> 57 <ol reversed></ol> 58 <ol class="no-counter"> 59 <li style="counter-increment: list-item 3"></li> 60 <li style="counter-increment: list-item 1"></li> 61 <li style="counter-increment: list-item 8"></li> 62 <div></div> 63 </ol>