Chromium Code Reviews Chromium Code Reviews
Issue 2703593004:
Support animating <number> custom properties (Closed)
| Index: third_party/WebKit/LayoutTests/animations/custom-properties/number-type-interpolation.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/custom-properties/number-type-interpolation.html b/third_party/WebKit/LayoutTests/animations/custom-properties/number-type-interpolation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..051ae16f48f365b12d19c2f0d6bf9adf116cb2a0 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/animations/custom-properties/number-type-interpolation.html |
| @@ -0,0 +1,80 @@ |
| +<!DOCTYPE html> |
| +<meta charset="UTF-8"> |
| +<style> |
| +.parent { |
| + --number: 30; |
| +} |
| +.target { |
| + --number: 10; |
| +} |
| +</style> |
| +<body> |
| +<script src="../interpolation/resources/interpolation-test.js"></script> |
| +<script> |
| +CSS.registerProperty({ |
| + name: '--number', |
| + syntax: '<number>', |
| + initialValue: '40', |
| +}); |
| + |
| +assertInterpolation({ |
| + property: '--number', |
| + from: neutralKeyframe, |
| + to: '20', |
| +}, [ |
| + {at: -0.3, is: '7'}, |
| + {at: 0, is: '10'}, |
| + {at: 0.5, is: '15'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '25'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--number', |
| + from: 'initial', |
| + to: '20', |
| +}, [ |
| + {at: -0.3, is: '46'}, |
| + {at: 0, is: '40'}, |
| + {at: 0.5, is: '30'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '10'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--number', |
| + from: 'inherit', |
| + to: '20', |
| +}, [ |
| + {at: -0.3, is: '33'}, |
| + {at: 0, is: '30'}, |
| + {at: 0.5, is: '25'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '15'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--number', |
| + from: 'unset', |
| + to: '20', |
| +}, [ |
| + {at: -0.3, is: '46'}, |
| + {at: 0, is: '40'}, |
| + {at: 0.5, is: '30'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '10'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--number', |
| + from: '-10', |
| + to: '10', |
| +}, [ |
| + {at: -0.3, is: '-16'}, |
| + {at: 0, is: '-10'}, |
| + {at: 0.5, is: '0'}, |
| + {at: 1, is: '10'}, |
| + {at: 1.5, is: '20'} |
| +]); |
| +</script> |
| +</body> |
