| <!DOCTYPE html> |
| <title>CSSCounterStyleRule name setter</title> |
| <link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface"> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| <link rel="match" href="cssom-name-setter-ref.html"> |
| <style id="sheet"> |
| @counter-style foo { |
| system: fixed; |
| symbols: A B C; |
| } |
| |
| @counter-style bar { |
| system: fixed; |
| symbols: '1' '2' '3'; |
| } |
| |
| @counter-style foo { |
| system: fixed; |
| symbols: X Y Z; |
| } |
| </style> |
| |
| <ol style="list-style-type: foo; list-style-position: inside"> |
| <li></li> |
| <li></li> |
| <li></li> |
| </ol> |
| |
| <ol style="list-style-type: bar; list-style-position: inside"> |
| <li></li> |
| <li></li> |
| <li></li> |
| </ol> |
| |
| <script> |
| // Force layout update before changing the rule |
| document.body.offsetWidth; |
| |
| // Change the last counter style name from 'foo' to 'bar' |
| const sheet = document.getElementById('sheet'); |
| const rule = sheet.sheet.rules[2]; |
| rule.name = 'bar'; |
| </script> |
