Blitz - WPT: counter-suffix.html

wpt / css / css-counter-styles / counter-suffix.html

/css/css-counter-styles/counter-suffix.html

<!DOCTYPE html>
<link rel="match" href="counter-suffix-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-counter-styles/"/>
<style>
  ol, li { margin: 0; padding: 0; line-height: 150%; }
  #wrapper { width: 10em; }
  ol { padding: 0 3em; }
  .dec { list-style-type: decimal; }
  .heb { list-style-type: hebrew; }
  .cjk { list-style-type: cjk-decimal; }
  .kor { list-style-type: korean-hangul-formal; }
</style>
<div id="wrapper">
  <ol class="dec"><li>foo<li>bar</ol>
  <ol class="heb"><li>foo<li>bar</ol>
  <ol class="cjk"><li>foo<li>bar</ol>
  <ol class="kor"><li>foo<li>bar</ol>
  <ol class="dec" dir="rtl"><li>foo<li>bar</ol>
  <ol class="heb" dir="rtl"><li>foo<li>bar</ol>
</div>

/css/css-counter-styles/counter-suffix-ref.html

<!DOCTYPE html>
<style>
  p, span { margin: 0; padding: 0; line-height: 150%; }
  #wrapper { width: 10em; }
  span {
    display: inline-block;
    width: 3em;
    text-align: end;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
  }
</style>
<div id="wrapper">
  <p>
    <span>1.&nbsp;</span>foo<br>
    <span>2.&nbsp;</span>bar
  </p>
  <p>
    <span>&#x5d0;.&nbsp;</span>foo<br>
    <span>&#x5d1;.&nbsp;</span>bar
  </p>
  <p>
    <span>&#x4e00;&#x3001;</span>foo<br>
    <span>&#x4e8c;&#x3001;</span>bar
  </p>
  <p>
    <span>&#xc77c;,&nbsp;</span>foo<br>
    <span>&#xc774;,&nbsp;</span>bar
  </p>
  <p dir="rtl">
    <span>1.&nbsp;</span>foo<br>
    <span>2.&nbsp;</span>bar
  </p>
  <p dir="rtl">
    <span>&#x5d0;.&nbsp;</span>foo<br>
    <span>&#x5d1;.&nbsp;</span>bar
  </p>
</div>