Make motion path ray() `at position` interpolable
Fixed: 1450866
Change-Id: Iba2a8ecce0257ce00de88ce091ab8961a69a2d74
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4584572
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1152483}
diff --git a/css/motion/animation/offset-path-interpolation-005.html b/css/motion/animation/offset-path-interpolation-005.html
index 9924106..13de65d 100644
--- a/css/motion/animation/offset-path-interpolation-005.html
+++ b/css/motion/animation/offset-path-interpolation-005.html
@@ -110,6 +110,32 @@
{at: 2, expect: 'ray(-90deg farthest-corner)'},
]);
+ test_interpolation({
+ property: 'offset-path',
+ from: 'ray(-10deg farthest-corner at 0% 0px)',
+ to: 'ray(-50deg farthest-corner at 100% 100px)'
+ }, [
+ {at: -1, expect: 'ray(30deg farthest-corner at -100% -100px)'},
+ {at: 0, expect: 'ray(-10deg farthest-corner at 0% 0px)'},
+ {at: 0.125, expect: 'ray(-15deg farthest-corner at 12.5% 12.5px)'},
+ {at: 0.875, expect: 'ray(-45deg farthest-corner at 87.5% 87.5px)'},
+ {at: 1, expect: 'ray(-50deg farthest-corner at 100% 100px)'},
+ {at: 2, expect: 'ray(-90deg farthest-corner at 200% 200px)'},
+ ]);
+
+ test_interpolation({
+ property: 'offset-path',
+ from: 'ray(-10deg farthest-corner)',
+ to: 'ray(-50deg farthest-corner at 100% 100%)'
+ }, [
+ {at: -1, expect: 'ray(30deg farthest-corner at 0% 0%)'},
+ {at: 0, expect: 'ray(-10deg farthest-corner)'},
+ {at: 0.125, expect: 'ray(-15deg farthest-corner at 56.25% 56.25%)'},
+ {at: 0.875, expect: 'ray(-45deg farthest-corner at 93.75% 93.75%)'},
+ {at: 1, expect: 'ray(-50deg farthest-corner at 100% 100%)'},
+ {at: 2, expect: 'ray(-90deg farthest-corner at 150% 150%)'},
+ ]);
+
// No interpolation between different sizes and/or different containment.
test_no_interpolation({
property: 'offset-path',
