Add a fast path for comparing fields in “transition: all”.

Steinar H. Gunderson · chromium-wpt-export-bot · commit b87d0b38b39c · 2026-02-04T05:28:48.000-08:00
If the author writes “transition: all”, we essentially treat that as a shorthand with 100+ longhands. However, most of the time, almost all of those longhands will end up early-aborting due to the old and new properties being the same. Do that comparison up-front instead; this allows us to skip entire groups if they are shared, and also allows straight-line comparison code instead of going through a large switch every time. Speedometer3 (M1 Pinpoint, LTO but no PGO, significant results at 99% CI only): TodoMVC-Preact-Complex-DOM [ -1.3%, -0.0%] TodoMVC-JavaScript-ES6-Webpack-Complex-DOM [ -1.0%, -0.2%] NewsSite-Next [ -1.6%, -1.1%] NewsSite-Nuxt [ -1.6%, -1.3%] Score [ +0.1%, +0.4%] Bug: 475091954 Change-Id: Iea61d1455265443c131729ae63c20bcbc39deaea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7493822 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Steinar H Gunderson <sesse@chromium.org> Cr-Commit-Position: refs/heads/main@{#1579359}
diff --git a/css/css-transitions/all-interpolates-same-as-explicit-property.html b/css/css-transitions/all-interpolates-same-as-explicit-property.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>transition:all interpolates the same as transition:the-actual-property</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property">
+
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+<script src="./support/helper.js" type="text/javascript"></script>
+
+</head>
+<body>
+<div id="log"></div>
+
+<script>
+const cases = [
+  // Property name, from-value, to-value, transition at 50%
+  ["width", "100px", "200px", "150px"],
+  ["height", "100px", "200px", "150px"],
+  ["z-index", "100", "200", "150"],
+  ["display", "none", "block", "block"],
+  ["margin-left", "100px", "200px", "150px"],
+  ["font-kerning", "normal", "none", "none"],
+  ["font-optical-sizing", "none", "auto", "auto"],
+  ["font-size", "10px", "12px", "11px"],
+  ["font-stretch", "100%", "150%", "125%"],
+  ["font-style", "normal", "oblique 10deg", "oblique 5deg"],
+  ["font-variant-ligatures", "common-ligatures", "none", "none"],
+  ["font-variant-caps", "normal", "small-caps", "small-caps"],
+  ["font-variant-east-asian", "normal", "ruby", "ruby"],
+  ["font-variant-numeric", "normal", "slashed-zero", "slashed-zero"],
+  ["font-weight", "400", "600", "500"],
+  ["text-rendering", "none", "optimizespeed", "optimizespeed"],
+  ["background-attachment", "scroll", "local", "local"],
+  ["background-clip", "border-box", "text", "text"],
+  ["background-image", "auto", "none", "none"],
+  ["background-origin", "border-box", "padding-box", "padding-box"],
+  ["background-position-x", "100px", "200px", "150px"],
+  ["background-position-y", "100px", "200px", "150px"],
+  ["background-repeat", "repeat-x", "repeat-y", "repeat-y"],
+  ["background-size", "auto", "cover", "cover"],
+  ["border-image-outset", "10px", "20px", "15px"],
+  ["border-image-repeat", "stretch", "repeat", "repeat"],
+  ["border-image-slice", "100", "200", "150"],
+  ["border-image-width", "100px", "200px", "150px"],
+  ["border-left-color", "black", "white", "rgb(128, 128, 128)"],
+  ["counter-increment", "example-counter 10", "example-counter 20", "example-counter 20"],
+  ["vertical-align", "10px", "20px", "15px"],
+  ["vertical-align", "baseline", "super", "super"],
+];
+
+for (const c of cases) {
+  let propertyName = c[0];
+  let fromValue = c[1];
+  let toValue = c[2];
+  let midValue = c[3];
+  promise_test(async t => {
+    // Start a 100s transition 50% of the way through.
+    const div = addDiv(t, {
+        style: `transition: ${propertyName} 100s -50s linear allow-discrete; ${propertyName}: ${fromValue}`,
+    });
+    getComputedStyle(div)[propertyName];
+    div.style[propertyName] = toValue;
+    assert_equals(getComputedStyle(div)[propertyName],
+        midValue,
+        'Transition should be initially 50% complete');
+
+    // Now do the same with transition:all.
+    const div2 = addDiv(t, {
+      style: `transition: all 100s -50s linear allow-discrete; ${propertyName}: ${fromValue}`,
+    });
+    getComputedStyle(div2)[propertyName];
+    div2.style[propertyName] = toValue;
+    assert_equals(getComputedStyle(div2)[propertyName],
+        midValue,
+        'Transition should be initially 50% complete, with transition:all');
+  });
+}
+</script>
+
+</body>
+</html>
