commit d7ca7b54d3a2e437a40b8d2c82816b7e90c4447c
parent 9fe300012591e8a0e13c5ace2ca37663f0aedfd0
Author: Daniil Sakhapov <sakhapov@chromium.org>
Date: Tue, 21 Oct 2025 10:16:38 +0000
Bug 1994304 [wpt PR 55433] - Support geometry and coord boxes in shape interpolation, a=testonly
Automatic update from web-platform-tests
Support geometry and coord boxes in shape interpolation
Animations for `clip-path` and `offset-path` did not previously
account for their respective `geometry-box` and `coord-box` values.
This resulted in incorrect interpolation when these boxes differed
between keyframes. The CSS specification requires a discrete animation
in such cases.
This change updates the shape interpolation logic to treat the
reference box as a non-interpolable component. The box is now parsed
and stored with the shape data. If the boxes differ between the start
and end values of an animation, the animation will correctly fall
back to discrete interpolation.
Bug: 450326418
Change-Id: I1b6f113b1257f94dcceac6f8b7e716015e39f165
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7032120
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1529973}
--
wpt-commits: 4d73284408e4397f74c4c6190f4652520e6f6f19
wpt-pr: 55433
Diffstat:
2 files changed, 114 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-masking/animations/clip-path-geometry-box-interpolation.html b/testing/web-platform/tests/css/css-masking/animations/clip-path-geometry-box-interpolation.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Masking Test: clip-path geometry-box interpolation with allow-discrete and shape()</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+ <script>
+ // Same shape(), different geometry-box: should switch discretely at 0.5 (no interpolation of shape params)
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'shape(from 0px 0px, line to 10px 10px) border-box',
+ to: 'shape(from 1px 1px, line to 20px 20px) content-box',
+ }, [
+ { at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
+ { at: 1, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
+ { at: 1.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
+ ]);
+
+ // Omitted geometry-box defaults to border-box.
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'shape(from 0px 0px, line to 10px 10px)', // defaults to border-box
+ to: 'shape(from 0px 0px, line to 20px 20px) padding-box',
+ }, [
+ { at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
+ { at: 1, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
+ { at: 1.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
+ ]);
+
+ // Same shape(), same geometry-box.
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'shape(from 0px 0px, line to 10px 10px) margin-box',
+ to: 'shape(from 10px 10px, line to 20px 20px) margin-box',
+ }, [
+ { at: -0.1, expect: 'shape(from -1px -1px, line to 9px 9px) margin-box' },
+ { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px) margin-box' },
+ { at: 0.4, expect: 'shape(from 4px 4px, line to 14px 14px) margin-box' },
+ { at: 0.5, expect: 'shape(from 5px 5px, line to 15px 15px) margin-box' },
+ { at: 1, expect: 'shape(from 10px 10px, line to 20px 20px) margin-box' },
+ { at: 1.5, expect: 'shape(from 15px 15px, line to 25px 25px) margin-box' },
+ ]);
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-coord-box-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-path-coord-box-interpolation.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Motion Path: offset-path coord-box interpolation with allow-discrete and shape()</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+ <script>
+ // Same shape(), different coord-box: should switch discretely at 0.5 (no interpolation of shape params)
+ test_interpolation({
+ property: 'offset-path',
+ behavior: 'allow-discrete',
+ from: 'shape(from 0px 0px, line to 10px 10px) border-box',
+ to: 'shape(from 1px 1px, line to 20px 20px) content-box',
+ }, [
+ { at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
+ { at: 1, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
+ { at: 1.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' },
+ ]);
+
+ // Omitted coord-box defaults to border-box.
+ test_interpolation({
+ property: 'offset-path',
+ behavior: 'allow-discrete',
+ from: 'shape(from 0px 0px, line to 10px 10px)', // defaults to border-box
+ to: 'shape(from 0px 0px, line to 20px 20px) padding-box',
+ }, [
+ { at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' },
+ { at: 0.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
+ { at: 1, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
+ { at: 1.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' },
+ ]);
+
+ // Same shape(), same coord-box.
+ test_interpolation({
+ property: 'offset-path',
+ behavior: 'allow-discrete',
+ from: 'shape(from 0px 0px, line to 10px 10px) view-box',
+ to: 'shape(from 10px 10px, line to 20px 20px) view-box',
+ }, [
+ { at: -0.1, expect: 'shape(from -1px -1px, line to 9px 9px) view-box' },
+ { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px) view-box' },
+ { at: 0.4, expect: 'shape(from 4px 4px, line to 14px 14px) view-box' },
+ { at: 0.5, expect: 'shape(from 5px 5px, line to 15px 15px) view-box' },
+ { at: 1, expect: 'shape(from 10px 10px, line to 20px 20px) view-box' },
+ { at: 1.5, expect: 'shape(from 15px 15px, line to 25px 25px) view-box' },
+ ]);
+ </script>
+</body>
