Chromium Code Reviews Chromium Code Reviews
Issue 2692383004:
Support animating CSS property "order" (Closed)
| Index: third_party/WebKit/LayoutTests/animations/interpolation/order-interpolation.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/order-interpolation.html b/third_party/WebKit/LayoutTests/animations/interpolation/order-interpolation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..c226576cc5aa926b9c5ddc274a07295a52dfb1bb |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/animations/interpolation/order-interpolation.html |
| @@ -0,0 +1,96 @@ |
| +<!DOCTYPE html> |
| +<body> |
| +<style> |
| +.parent { |
| + order: 30; |
| +} |
| +.target { |
| + order: 10; |
| +} |
| +</style> |
| +<script src="resources/interpolation-test.js"></script> |
| +<script> |
| +assertInterpolation({ |
| + property: 'order', |
| + from: neutralKeyframe, |
| + to: '20', |
| +}, [ |
| + {at: -3, is: '-20'}, |
| + {at: -0.5, is: '5'}, |
| + {at: 0, is: '10'}, |
| + {at: 0.3, is: '13'}, |
| + {at: 0.6, is: '16'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '25'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: 'order', |
| + from: 'initial', |
| + to: '20', |
| +}, [ |
| + {at: -3, is: '-60'}, |
| + {at: -0.5, is: '-10'}, |
| + {at: 0, is: '0'}, |
| + {at: 0.3, is: '6'}, |
| + {at: 0.6, is: '12'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '30'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: 'order', |
| + from: 'inherit', |
| + to: '20', |
| +}, [ |
| + {at: -3, is: '60'}, |
| + {at: -0.5, is: '35'}, |
| + {at: 0, is: '30'}, |
| + {at: 0.3, is: '27'}, |
| + {at: 0.6, is: '24'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '15'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: 'order', |
| + from: 'unset', |
| + to: '20', |
| +}, [ |
| + {at: -3, is: '-60'}, |
| + {at: -0.5, is: '-10'}, |
| + {at: 0, is: '0'}, |
| + {at: 0.3, is: '6'}, |
| + {at: 0.6, is: '12'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '30'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: 'order', |
| + from: '10', |
| + to: '20' |
| +}, [ |
| + {at: -3.0, is: '-20'}, |
| + {at: -0.5, is: '5'}, |
| + {at: 0, is: '10'}, |
| + {at: 0.3, is: '13'}, |
| + {at: 0.6, is: '16'}, |
| + {at: 1, is: '20'}, |
| + {at: 1.5, is: '25'} |
| +]); |
| + |
| +assertInterpolation({ |
| + property: 'order', |
| + from: '2', |
| + to: '4' |
| +}, [ |
| + {at: -3.0, is: '-4'}, |
| + {at: -0.5, is: '1'}, |
| + {at: 0, is: '2'}, |
| + {at: 0.3, is: '3'}, |
| + {at: 0.6, is: '3'}, |
| + {at: 1, is: '4'}, |
| + {at: 1.5, is: '5'} |
| +]); |
| +</script> |
