nested-counter-with-display-changed.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Nested counter with display change to none and restore</title>
<link rel="help" href="https://drafts.csswg.org/css-lists/#counters-without-boxes">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
  ol {
    list-style-type: none;
    counter-reset: count;
  }
  li { counter-increment: count; }
  li::before {
    content: counters(count, ".");
    margin-right: 0.5em;
    font-weight: bold;
    color: seagreen;
  }
</style>
<ol>
  <li>
    <span>Item 1</span>
    <ol id="target">
      <li>Item 1.1</li>
    </ol>
  </li>
  <li id="item2">Item 2</li>
</ol>
<script>
  test(function() {
    document.body.offsetTop; // force layout
    assert_equals(window.internals.counterValue(item2), '2');
    document.getElementById("target").style="display:none";
    document.body.offsetTop; // force layout
    assert_equals(window.internals.counterValue(item2), '2');
    document.getElementById("target").style="display:block";
    document.body.offsetTop; // force layout
    assert_equals(window.internals.counterValue(item2), '2');
  }, "nested counter with display changed");
</script>

chromium/third_party/blink/web_tests/fast/css/counters/nested-counter-with-display-changed.html