Blitz - WPT: descriptor-calc.html

wpt / css / css-counter-styles / counter-style-at-rule / descriptor-calc.html

/css/css-counter-styles/counter-style-at-rule/descriptor-calc.html

<!DOCTYPE html>
<head>
  <title>CSS Test: calc() in counter-style descriptor</title>
  <link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/">
  <link rel="match" href="descriptor-calc-ref.html">
  <link rel="stylesheet" href="support/test-common.css">
  <style type="text/css">
    /* 100em - 1px should be positive with pretty much any initial font size. */
    @counter-style a {
      system: extends upper-roman;
      range: calc(2 - sign(100em - 1px)) calc(5 + sign(100em - 1px));
      pad: calc(3 + sign(100em - 1px)) '*';
    }
    @counter-style b {
      system: fixed calc(1 + sign(100em - 1px));
      symbols: g h;
    }
    @counter-style c {
      system: additive;
      additive-symbols: calc(2 + sign(100em - 1px)) c, 2 b, 1 a;
    }
  </style>
</head>
<body>
  <ol style="list-style-type: a;"><li><li><li><li><li><li><li><li><li><li></ol>
  <ol style="list-style-type: b;"><li><li><li><li><li><li><li><li><li><li></ol>
  <ol style="list-style-type: c;"><li><li><li><li><li><li><li><li><li><li></ol>
</body>

/css/css-counter-styles/counter-style-at-rule/descriptor-calc-ref.html

<!DOCTYPE html>
<head>
  <title>CSS Test Reference</title>
  <link rel="stylesheet" href="support/test-common.css">
  <style type="text/css">
    @counter-style a {
      system: extends upper-roman;
      range: 1 6;
      pad: 4 '*';
    }
    @counter-style b {
      system: fixed 2;
      symbols: g h;
    }
    @counter-style c {
      system: additive;
      additive-symbols: 3 c, 2 b, 1 a;
    }
  </style>
</head>
<body>
  <ol style="list-style-type: a;"><li><li><li><li><li><li><li><li><li><li></ol>
  <ol style="list-style-type: b;"><li><li><li><li><li><li><li><li><li><li></ol>
  <ol style="list-style-type: c;"><li><li><li><li><li><li><li><li><li><li></ol>
</body>