commit 85b11237a11fde3a1e8c88cfe410e474cef44f98
parent cecd272556e37418cd6b454fe81eee0bd7b2a138
Author: Daniil Sakhapov <sakhapov@chromium.org>
Date: Tue, 21 Oct 2025 10:16:55 +0000
Bug 1994387 [wpt PR 55445] - Support geometry and coord boxes in basic shape interpolation, a=testonly
Automatic update from web-platform-tests
Support geometry and coord boxes in basic shape interpolation
When animating `clip-path` or `offset-path`, the associated
`geometry-box` and `coord-box` were ignored. This prevented correct
interpolation between basic shapes that specified different boxes.
According to the specification, this should result in a discrete
animation, switching at the halfway point.
This patch updates the basic shape interpolation logic to store the
`geometry-box` (for `clip-path`) and `coord-box` (for `offset-path`) in
the non-interpolable part of the animation value.
The interpolation compatibility check now includes the box type. If the
boxes match, the shape's values are interpolated smoothly. If they
differ, the animation switches discretely at the temporal midpoint.
Bug: 450326418
Change-Id: I6221c7a26d531612b7304b70fed8c5b0ec296d15
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7032125
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1529985}
--
wpt-commits: 41f3e4a5c73fd0ea224301a10c2ccb0eabbcf755
wpt-pr: 55445
Diffstat:
2 files changed, 92 insertions(+), 2 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
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<meta charset="utf-8">
-<title>CSS Masking Test: clip-path geometry-box interpolation with allow-discrete and shape()</title>
+<title>CSS Masking Test: clip-path geometry-box interpolation with allow-discrete</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>
@@ -53,5 +53,50 @@
{ 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' },
]);
+
+ // circle(), different geometry-box should switch discretely.
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'circle(10px) border-box',
+ to: 'circle(30px) content-box',
+ }, [
+ { at: -0.1, expect: 'circle(10px)' },
+ { at: 0, expect: 'circle(10px)' },
+ { at: 0.4, expect: 'circle(10px)' },
+ { at: 0.5, expect: 'circle(30px) content-box' },
+ { at: 1, expect: 'circle(30px) content-box' },
+ { at: 1.5, expect: 'circle(30px) content-box' },
+ ]);
+
+ // circle(), omitted geometry-box defaults to border-box.
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'circle(20px)',
+ to: 'circle(20px) padding-box',
+ }, [
+ { at: -0.1, expect: 'circle(20px)' },
+ { at: 0, expect: 'circle(20px)' },
+ { at: 0.4, expect: 'circle(20px)' },
+ { at: 0.5, expect: 'circle(20px) padding-box' },
+ { at: 1, expect: 'circle(20px) padding-box' },
+ { at: 1.5, expect: 'circle(20px) padding-box' },
+ ]);
+
+ // circle(), same geometry-box should interpolate radius smoothly.
+ test_interpolation({
+ property: 'clip-path',
+ behavior: 'allow-discrete',
+ from: 'circle(10px) margin-box',
+ to: 'circle(30px) margin-box',
+ }, [
+ { at: -0.1, expect: 'circle(8px) margin-box' },
+ { at: 0, expect: 'circle(10px) margin-box' },
+ { at: 0.4, expect: 'circle(18px) margin-box' },
+ { at: 0.5, expect: 'circle(20px) margin-box' },
+ { at: 1, expect: 'circle(30px) margin-box' },
+ { at: 1.5, expect: 'circle(40px) 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
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<meta charset="utf-8">
-<title>CSS Motion Path: offset-path coord-box interpolation with allow-discrete and shape()</title>
+<title>CSS Motion Path: offset-path coord-box interpolation with allow-discrete</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>
@@ -53,5 +53,50 @@
{ 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' },
]);
+
+ // circle(), different coord-box should switch discretely.
+ test_interpolation({
+ property: 'offset-path',
+ behavior: 'allow-discrete',
+ from: 'circle(10px) border-box',
+ to: 'circle(30px) content-box',
+ }, [
+ { at: -0.1, expect: 'circle(10px)' },
+ { at: 0, expect: 'circle(10px)' },
+ { at: 0.4, expect: 'circle(10px)' },
+ { at: 0.5, expect: 'circle(30px) content-box' },
+ { at: 1, expect: 'circle(30px) content-box' },
+ { at: 1.5, expect: 'circle(30px) content-box' },
+ ]);
+
+ // circle(), omitted coord-box defaults to border-box.
+ test_interpolation({
+ property: 'offset-path',
+ behavior: 'allow-discrete',
+ from: 'circle(20px)',
+ to: 'circle(20px) padding-box',
+ }, [
+ { at: -0.1, expect: 'circle(20px)' },
+ { at: 0, expect: 'circle(20px)' },
+ { at: 0.4, expect: 'circle(20px)' },
+ { at: 0.5, expect: 'circle(20px) padding-box' },
+ { at: 1, expect: 'circle(20px) padding-box' },
+ { at: 1.5, expect: 'circle(20px) padding-box' },
+ ]);
+
+ // circle(), same coord-box should interpolate radius smoothly.
+ test_interpolation({
+ property: 'offset-path',
+ behavior: 'allow-discrete',
+ from: 'circle(10px) view-box',
+ to: 'circle(30px) view-box',
+ }, [
+ { at: -0.1, expect: 'circle(8px) view-box' },
+ { at: 0, expect: 'circle(10px) view-box' },
+ { at: 0.4, expect: 'circle(18px) view-box' },
+ { at: 0.5, expect: 'circle(20px) view-box' },
+ { at: 1, expect: 'circle(30px) view-box' },
+ { at: 1.5, expect: 'circle(40px) view-box' },
+ ]);
</script>
</body>
