Blitz - WPT: counter-reset-reversed-nested.html

wpt / css / css-lists / counter-reset-reversed-nested.html

/css/css-lists/counter-reset-reversed-nested.html

<!doctype html>
<title>CSS Lists: nested counter-reset: reversed() with counter-set and counter-increment</title>
<link rel="help" href="https://drafts.csswg.org/css-lists/#counter-reset">
<link rel="help" href="https://drafts.csswg.org/css-lists/#inheriting-counters">
<link rel="help" href="https://drafts.csswg.org/css-lists/#instantiating-counters">
<link rel="help" href="https://drafts.csswg.org/css-lists/#nested-counters">
<link rel="author" title="Minseong Kim" href="mailto:jja08111@gmail.com">
<link rel="match" href="counter-reset-reversed-nested-ref.html">
<style>
  ol { counter-reset: reversed(foo); }
  li { display: block }
  li::before { counter-increment: foo -1; content: counter(foo) ". " }
  .set { counter-set: foo 10; }
</style>
<ol>
  <li>Three</li>
  <li>Two
    <ol>
      <li>Eleven</li>
      <li class="set">Nine</li>
      <li>Eight</li>
    </ol>
  </li>
  <li>One</li>
</ol>

/css/css-lists/counter-reset-reversed-nested-ref.html

<!doctype html>
<title>CSS Lists Reference: nested counter-reset: reversed() with counter-set and increment</title>
<style>
  li { display: block }
  li::before { content: attr(data-marker) ". "; }
</style>
<ol>
  <li data-marker="3">Three</li>
  <li data-marker="2">Two
    <ol>
      <li data-marker="11">Eleven</li>
      <li data-marker="9">Nine</li>
      <li data-marker="8">Eight</li>
    </ol>
  </li>
  <li data-marker="1">One</li>
</ol>