| <!doctype html> |
| <title>Dynamic changes to 'counter-reset' (crbug.com/463513)</title> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| .reset { counter-reset: c } |
| .increment { counter-increment: c } |
| p:before { content: counter(c) } |
| </style> |
| <div id="root" class="reset"> |
| <p class="reset increment"></p> |
| <p id="p1" class="increment">First item</p> |
| <p id="p2" class="increment">Second item</p> |
| <p id="p3" class="increment">Third item</p> |
| <div class="reset"> |
| <p id="p4" class="increment">Fourth item</p> |
| </div> |
| </div> |
| <script> |
| 'use strict'; |
| |
| test(() => { |
| assert_equals(internals.counterValue(p1), '2'); |
| assert_equals(internals.counterValue(p2), '3'); |
| assert_equals(internals.counterValue(p3), '4'); |
| assert_equals(internals.counterValue(p4), '1'); |
| |
| p1.className = 'reset'; |
| |
| assert_equals(internals.counterValue(p1), '0'); |
| assert_equals(internals.counterValue(p2), '1'); |
| assert_equals(internals.counterValue(p3), '2'); |
| assert_equals(internals.counterValue(p4), '1'); |
| |
| let elem = document.createElement('p'); |
| elem.className = 'reset'; |
| root.insertBefore(elem, p3); |
| |
| assert_equals(internals.counterValue(p1), '0'); |
| assert_equals(internals.counterValue(p2), '1'); |
| assert_equals(internals.counterValue(p3), '1'); |
| assert_equals(internals.counterValue(p4), '1'); |
| }, 'Dynamically changing counter-reset with counter-resets in parent and sibling updates counters accordingly'); |
| |
| </script> |
