<!DOCTYPE html> <title>Resolving @counter-style name conflicts with cascade layers</title> <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #target, #reference { font-family: monospace; width: min-content; } #reference::before { content: '0000'; } @counter-style three { system: cyclic; symbols: '000'; } @counter-style four { system: cyclic; symbols: '0000'; } </style> <ul> <li id="target"></li> <li id="reference"></li> </ul> <script> // In all tests, #target::before should have 4 characters, same as #reference. const testCases = [ { title: '@counter-style unlayered overrides layered', style: ` #target::before { content: counter(dont-care, custom-counter-style); } @counter-style custom-counter-style { system: extends four; } @layer { @counter-style custom-counter-style { system: extends three; } } ` }, { title: '@counter-style override between layers', style: ` @layer base, override; #target::before { content: counter(dont-care, custom-counter-style); } @layer override { @counter-style custom-counter-style { system: extends four; } } @layer base { @counter-style custom-counter-style { system: extends three; } } ` }, { title: '@counter-style override update with appended sheet 1', style: ` @layer base, override; #target::before { content: counter(dont-care, custom-counter-style); } @layer override { @counter-style custom-counter-style { system: extends four; } } `, append: ` @layer base { @counter-style custom-counter-style { system: extends three; } } ` }, { title: '@counter-style override update with appended sheet 2', style: ` @layer base, override; #target::before { content: counter(dont-care, custom-counter-style); } @layer base { @counter-style custom-counter-style { system: extends three; } } `, append: ` @layer override { @counter-style custom-counter-style { system: extends four; } } ` }, ]; for (let testCase of testCases) { var documentStyle = document.createElement('style'); documentStyle.appendChild(document.createTextNode(testCase['style'])); document.head.appendChild(documentStyle); var appendedStyle; if (testCase['append']) { document.body.offsetLeft; // Force style update appendedStyle = document.createElement('style'); appendedStyle.appendChild(document.createTextNode(testCase['append'])); document.head.appendChild(appendedStyle); } test(function () { assert_equals(getComputedStyle(target).width, getComputedStyle(reference).width); }, testCase['title']); if (appendedStyle) appendedStyle.remove(); documentStyle.remove(); } </script>