Add layout shift caused by non-composited animation

jackfranklin · jackfranklin · commit f310c585536d · 2025-09-25T10:24:17.000+01:00
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
 <li><a href="idle-callback-time/index.html">idle-callback-time</a></li>
 <li><a href="initiators/index.html">initiators</a></li>
 <li><a href="layout-shift/index.html">layout-shift</a></li>
+<li><a href="layout-shift-animations/index.html">layout-shift-animations</a></li>
 <li><a href="layout-shift-unsized-images/index.html">layout-shift-unsized-images</a></li>
 <li><a href="lcp-critical-path/index.html">lcp-critical-path</a></li>
 <li><a href="lcp-discovery-delay/index.html">lcp-discovery-delay</a></li>
diff --git a/layout-shift-animations/app.js b/layout-shift-animations/app.js
diff --git a/layout-shift-animations/index.html b/layout-shift-animations/index.html
@@ -0,0 +1,36 @@
+<html>
+  <head>
+    <title>Layout Shift from non-composited animation on load</title>
+    <style>
+      .box {
+        height: 100px;
+        width: 100px;
+      }
+      #red {
+        background-color: red;
+        animation: 0.2s linear 0s 1 forwards change-height;
+      }
+      @keyframes change-height {
+        from {
+          height: 100px;
+        }
+        to {
+          height: 300px;
+        }
+      }
+      p {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="red" class="box"></div>
+    <p>This is some text content below the animated box.</p>
+    <p>
+      When the red box above changes height, this text will be pushed down,
+      causing a layout shift.
+    </p>
+    <p>This makes the impact of the non-composited animation very clear.</p>
+    <script src="app.js"></script>
+  </body>
+</html>
