CSS Counters not properly updated on style changes

https://bugs.webkit.org/show_bug.cgi?id=256540 rdar://problem/109416780 Reviewed by Simon Fraser. This patch aligns WebKit with Gecko / Firefox and Blink / Chromium. Merge: https://src.chromium.org/viewvc/blink?view=revision&revision=197703 When oldstyle does not have counterDirectives and new style have counterDirectives on style change previous counter nodes were not cleared because of which oldstyle values are reflected. * Source/WebCore/rendering/RenderCounter.cpp: (enderCounter::rendererStyleChangedSlowCase): * LayoutTests/fast/css/counters/counter-increment-not-reflected-on-stylechange.html: Add Test Case * LayoutTests/fast/css/counters/counter-increment-not-reflected-on-stylechange-expected.txt: Add Test Case Expectation Canonical link: https://commits.webkit.org/271451@main
WebKit · Dec 4, 2023 · f8d357e · f8d357e
1 parent cc5fbe4
commit f8d357e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/LayoutTests/fast/css/counters/counter-increment-not-reflected-on-stylechange-expected.txt b/LayoutTests/fast/css/counters/counter-increment-not-reflected-on-stylechange-expected.txt
@@ -0,0 +1,6 @@
+PASS internals.counterValue(document.getElementById('inner1')) is "1"
+PASS internals.counterValue(document.getElementById('inner2')) is "2"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css/counters/counter-increment-not-reflected-on-stylechange.html b/LayoutTests/fast/css/counters/counter-increment-not-reflected-on-stylechange.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<script src="../../../resources/js-test.js"></script>
+<style>
+    #outer
+    {
+        counter-reset: c;
+    }
+
+    #outer > div:before
+    {
+        content: counter(c);
+    }
+
+    .active > div:before {
+        counter-increment: c;
+    }
+
+    .inactive > div:before {
+        counter-increment: none;
+    }
+</style>
+
+<div id="outer">
+    <div id="inner1"></div>
+    <div id="inner2"></div>
+</div>
+
+<script>
+    var outerDiv = document.getElementById("outer");
+    outerDiv.className = "inactive";
+    outerDiv.offsetTop;
+    outerDiv.className = "active";
+
+    shouldBeEqualToString("internals.counterValue(document.getElementById('inner1'))", "1");
+    shouldBeEqualToString("internals.counterValue(document.getElementById('inner2'))", "2");
+</script>
diff --git a/Source/WebCore/rendering/RenderCounter.cpp b/Source/WebCore/rendering/RenderCounter.cpp
@@ -586,6 +586,9 @@ void RenderCounter::rendererStyleChangedSlowCase(RenderElement& renderer, const
                 RenderCounter::destroyCounterNodes(renderer);
         }
     } else {
+        if (renderer.hasCounterNodeMap())
+            RenderCounter::destroyCounterNodes(renderer);
+
         for (auto& key : newStyle.counterDirectives().map.keys()) {
             // We must create this node here, because the added node may be a node with no display such as
             // as those created by the increment or reset directives and the re-layout that will happen will