Add support for math expressions for offset-rotate interpolation
This CL:
1) Adds support for offset-rotate property usage with
math expressions and interpolation of this property;
2) Creates ComputeDegrees API for CSSPrimitiveValue with
CSSLengthResolver;
3) Adds type info to the InterpolationNumber to make
arithmetic operations for number and expression.
Note: the UnresolvedStyleOffsetRotation is needed to interpolate
in expressions, before they are resolved to a single number.
Bug: 1521261
Change-Id: I5e08bc69d0d33e7f9a4675e3a7bcc2fe7971ebd5
diff --git a/css/motion/animation/offset-rotate-interpolation-math-functions-tentative.html b/css/motion/animation/offset-rotate-interpolation-math-functions-tentative.html
new file mode 100644
index 0000000..d5be7e6
--- /dev/null
+++ b/css/motion/animation/offset-rotate-interpolation-math-functions-tentative.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>offset-rotate interpolation with progress-*() functions</title>
+ <link rel="author" title="Daniil Sakhapov" href="mailto:ericwilligers@chromium.org">
+ <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+ <link rel="help" href="https://drafts.csswg.org/css-values-5/#progress">
+ <meta name="assert" content="offset-rotate supports animation with progress-*() functions.">
+ <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;
+ }
+ .parent {
+ offset-rotate: 30deg;
+ }
+ .target {
+ width: 80px;
+ height: 80px;
+ display: inline-block;
+ background-color: black;
+ margin-right: 5px;
+ offset-rotate: 10deg;
+ }
+ .expected {
+ background-color: green;
+ margin-right: 15px;
+ }
+ </style>
+ <body>
+ <script>
+ test_interpolation({
+ property: 'offset-rotate',
+ from: '100deg',
+ to: 'calc(sign(20rem - 20px) * 180deg)',
+ }, [
+ {at: -1, expect: '20deg'},
+ {at: 0, expect: '100deg'},
+ {at: 0.125, expect: '110deg'},
+ {at: 0.875, expect: '170deg'},
+ {at: 1, expect: '180deg'},
+ {at: 2, expect: '260deg'}
+ ]);
+
+ test_interpolation({
+ property: 'offset-rotate',
+ from: 'calc(sign(20rem - 20px) * 100deg)',
+ to: 'calc(progress(10rem from 20px to 100px) * 180deg)',
+ }, [
+ {at: -1, expect: '20deg'},
+ {at: 0, expect: '100deg'},
+ {at: 0.125, expect: '110deg'},
+ {at: 0.875, expect: '170deg'},
+ {at: 1, expect: '180deg'},
+ {at: 2, expect: '260deg'}
+ ]);
+ </script>
+ </body>
+</html>
