Add support for math expressions in offset-path ray() angle interpola…

…tion Note: this approach is different from the previous ones, in a way that we don't take the whole conversion code from basic_shape_functions, but instead only extract the angle value from initial CSSValue. The reason is that the code in basic_shape_functions resolves the relative units for center coordinates, and the interpolation code uses the resolved lengths, instead of unresolved ones. So, a bigger fix is needed for this code, but as it's out of scope for this InterpolationNumber fixing project, it will be done later. Bug: 41494232 Change-Id: Ibf1af3164473a7fd0526a39ef1bac075ba203279 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5317729 Commit-Queue: Daniil Sakhapov <[email protected]> Reviewed-by: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1264474}
Tobias710219 · Feb 23, 2024 · fc207f9 · fc207f9
1 parent 4fe095d
commit fc207f9
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/css/motion/animation/ray-angle-interpolation-math-functions.html b/css/motion/animation/ray-angle-interpolation-math-functions.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>ray() angle interpolation with css math functions</title>
+    <link rel="author" title="Daniil Sakhapov" href="mailto:[email protected]">
+    <link rel="help" href="https://drafts.fxtf.org/motion/#offset-path-property">
+    <link rel="help" href="https://drafts.csswg.org/css-values/#sign-funcs">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    :root {
+      font-size: 10px;
+    }
+  </style>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(100deg)',
+        to: 'ray(calc(sign(20rem - 20px) * 180deg))',
+      }, [
+        {at: -1, expect: 'ray(20deg)'},
+        {at: 0, expect: 'ray(100deg)'},
+        {at: 0.125, expect: 'ray(110deg)'},
+        {at: 0.875, expect: 'ray(170deg)'},
+        {at: 1, expect: 'ray(180deg)'},
+        {at: 2, expect: 'ray(260deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(calc(sign(20rem - 20px) * 100deg))',
+        to: 'ray(calc(sign(20rem - 20px) * 180deg))',
+      }, [
+        {at: -1, expect: 'ray(20deg)'},
+        {at: 0, expect: 'ray(100deg)'},
+        {at: 0.125, expect: 'ray(110deg)'},
+        {at: 0.875, expect: 'ray(170deg)'},
+        {at: 1, expect: 'ray(180deg)'},
+        {at: 2, expect: 'ray(260deg)'}
+      ]);
+    </script>
+  </body>
+</html>