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>