update-reset-counter-parent-sibling.html

<!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), '1');
  assert_equals(internals.counterValue(p2), '2');
  assert_equals(internals.counterValue(p3), '3');
  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), '2');
  assert_equals(internals.counterValue(p4), '1');
}, 'Dynamically changing counter-reset with counter-resets in parent and sibling updates counters accordingly');

</script>
chromium/third_party/blink/web_tests/fast/css/counters/update-reset-counter-parent-sibling.html
