| <!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> |
