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

@@ -2750,6 +2750,7 @@
     ]
   },
   "text-transform": {
+    "__comment": "NOTE: This property has custom invalidation handling.",
     "animation-type": "discrete",
     "inherited": true,
     "initial": "none",

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.

Tests/LibWeb/Text/expected/css/text-transform-dynamic-change.txt

@@ -0,0 +1,4 @@
+119
+141
+100
+122

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>