From def0bcdfa23d94d20817ff540eeb6cd27a451d0d Mon Sep 17 00:00:00 2001
From: Andreas Kling <andreas@ladybird.org>
Date: Sat, 8 Mar 2025 15:50:08 +0100
Subject: [PATCH] LibWeb: Don't unconditionally relayout on
 animation/transition changes

If a CSS animation or transition was being used to manipulate a property
that itself does not affect layout, we were still doing a full relayout
whenever any animation or transition related property was changed.

As it turns out, we can just not do that, and we avoid a bunch of
unnecessary layout work on many pages. When a layout-affecting property
is being animated, the animation/transition update code takes care to
invalidate layout as appropriate anyway!

This was very noticeable on GitHub, where moving the mouse cursor
between "Issues" and "Pull requests" would trigger a full relayout every
time. Now that doesn't happen, and it's much more responsive. :^)
---
 Libraries/LibWeb/CSS/Properties.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json
index 2f167d8879d..bf19008c180 100644
--- a/Libraries/LibWeb/CSS/Properties.json
+++ b/Libraries/LibWeb/CSS/Properties.json
@@ -169,7 +169,7 @@
     ]
   },
   "animation": {
-    "affects-layout": true,
+    "affects-layout": false,
     "inherited": false,
     "initial": "none 0s ease 1 normal running 0s none",
     "longhands": [
@@ -184,7 +184,7 @@
     ]
   },
   "animation-delay": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "0s",
@@ -205,7 +205,7 @@
     ]
   },
   "animation-duration": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "auto",
@@ -217,7 +217,7 @@
     ]
   },
   "animation-fill-mode": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "none",
@@ -229,7 +229,7 @@
     ]
   },
   "animation-iteration-count": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "1",
@@ -241,7 +241,7 @@
     ]
   },
   "animation-name": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "none",
@@ -264,7 +264,7 @@
     ]
   },
   "animation-timing-function": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "ease",
@@ -2810,7 +2810,7 @@
     "percentages-resolve-to": "length"
   },
   "transition": {
-    "affects-layout": true,
+    "affects-layout": false,
     "inherited": false,
     "initial": "none",
     "longhands": [
@@ -2821,7 +2821,7 @@
     ]
   },
   "transition-delay": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "0s",
@@ -2830,7 +2830,7 @@
     ]
   },
   "transition-duration": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "0s",
@@ -2839,7 +2839,7 @@
     ]
   },
   "transition-property": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "all",
@@ -2852,7 +2852,7 @@
     ]
   },
   "transition-timing-function": {
-    "affects-layout": true,
+    "affects-layout": false,
     "animation-type": "none",
     "inherited": false,
     "initial": "ease",