counter-content-property.html | Explore in Territory

<!DOCTYPE html>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<style>
h1:before {
    content: counter(section);
}
h1:after {
    content: counter(section, decimal);
}
h2:before {
    content: counters(section, ":");
}
h2:after {
    content: counters(section, ":", decimal);
}
h3:before {
    content: counter(section, lower-roman);
}
h3:after {
    content: counters(section, ",", lower-roman);
}
h4:before {
    content: counter(section, none);
}
h4:after {
    content: counters(section, ":", none);
}
h5:before {
    content: "A" counter(section, upper-roman) "B";
}
h5:after {
    content: "C" counters(section, ",", lower-roman) "D";
}
</style>

<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
test(function () {
  assert_equals(getComputedStyle(document.querySelector('h1'), ':before').content, 'counter(section)');
  assert_equals(getComputedStyle(document.querySelector('h1'), ':after').content, 'counter(section)');
  assert_equals(getComputedStyle(document.querySelector('h2'), ':before').content, 'counters(section, ":")');
  assert_equals(getComputedStyle(document.querySelector('h2'), ':after').content, 'counters(section, ":")');
  assert_equals(getComputedStyle(document.querySelector('h3'), ':before').content, 'counter(section, lower-roman)');
  assert_equals(getComputedStyle(document.querySelector('h3'), ':after').content, 'counters(section, ",", lower-roman)');
  assert_equals(getComputedStyle(document.querySelector('h4'), ':before').content, 'counter(section, none)');
  assert_equals(getComputedStyle(document.querySelector('h4'), ':after').content, 'counters(section, ":", none)');
  assert_equals(getComputedStyle(document.querySelector('h5'), ':before').content, '"A" counter(section, upper-roman) "B"');
  assert_equals(getComputedStyle(document.querySelector('h5'), ':after').content, '"C" counters(section, ",", lower-roman) "D"');
}, "Check that the content property contains the correct value for counter()");
</script>
chromium/third_party/blink/web_tests/fast/css/counters/counter-content-property.html
