From 0a300fe59b0d318bd22164357fb66b3904f51b1b Mon Sep 17 00:00:00 2001
From: Andreas Kling <andreas@ladybird.org>
Date: Sat, 8 Mar 2025 17:54:04 +0100
Subject: [PATCH] LibWeb: Update the layout tree when CSS text-transform
 changes

Because we cache the transformed text string in text nodes affected by
text-transform, we have to actually update the layout tree when this
property value changes.
---
 Libraries/LibWeb/CSS/Properties.json           |  1 +
 Libraries/LibWeb/CSS/StyleInvalidation.cpp     |  9 +++++++++
 .../css/text-transform-dynamic-change.txt      |  4 ++++
 .../css/text-transform-dynamic-change.html     | 18 ++++++++++++++++++
 4 files changed, 32 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/css/text-transform-dynamic-change.txt
 create mode 100644 Tests/LibWeb/Text/input/css/text-transform-dynamic-change.html

diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json
index bf19008c180..f45c6fd0d6d 100644
--- a/Libraries/LibWeb/CSS/Properties.json
+++ b/Libraries/LibWeb/CSS/Properties.json
@@ -2750,6 +2750,7 @@
     ]
   },
   "text-transform": {
+    "__comment": "NOTE: This property has custom invalidation handling.",
     "animation-type": "discrete",
     "inherited": true,
     "initial": "none",
diff --git a/Libraries/LibWeb/CSS/StyleInvalidation.cpp b/Libraries/LibWeb/CSS/StyleInvalidation.cpp
index 291339d1183..3cad957819b 100644
--- a/Libraries/LibWeb/CSS/StyleInvalidation.cpp
+++ b/Libraries/LibWeb/CSS/StyleInvalidation.cpp
@@ -24,6 +24,15 @@ RequiredInvalidationAfterStyleChange compute_property_invalidation(CSS::Property
         return RequiredInvalidationAfterStyleChange::full();
     }
 
+    // NOTE: If the text-transform property changes, it may affect layout. Furthermore, since the
+    //       Layout::TextNode caches the post-transform text, we have to update the layout tree.
+    if (property_id == CSS::PropertyID::TextTransform) {
+        invalidation.rebuild_layout_tree = true;
+        invalidation.relayout = true;
+        invalidation.repaint = true;
+        return invalidation;
+    }
+
     // NOTE: If one of the overflow properties change, we rebuild the entire layout tree.
     //       This ensures that overflow propagation from root/body to viewport happens correctly.
     //       In the future, we can make this invalidation narrower.
diff --git a/Tests/LibWeb/Text/expected/css/text-transform-dynamic-change.txt b/Tests/LibWeb/Text/expected/css/text-transform-dynamic-change.txt
new file mode 100644
index 00000000000..e8f9e7f41e6
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/css/text-transform-dynamic-change.txt
@@ -0,0 +1,4 @@
+119
+141
+100
+122
diff --git a/Tests/LibWeb/Text/input/css/text-transform-dynamic-change.html b/Tests/LibWeb/Text/input/css/text-transform-dynamic-change.html
new file mode 100644
index 00000000000..77b48e2cd84
--- /dev/null
+++ b/Tests/LibWeb/Text/input/css/text-transform-dynamic-change.html
@@ -0,0 +1,18 @@
+<style>
+    #theDiv {
+        width: max-content;
+    }
+</style>
+<script src="../include.js"></script>
+<div id="theDiv">heLLo FrIends</div>
+<script>
+    test(() => {
+        println(theDiv.offsetWidth);
+        theDiv.style.textTransform = 'uppercase';
+        println(theDiv.offsetWidth);
+        theDiv.style.textTransform = 'lowercase';
+        println(theDiv.offsetWidth);
+        theDiv.style.textTransform = 'capitalize';
+        println(theDiv.offsetWidth);
+    });
+</script>