Chromium Code Reviews Chromium Code Reviews
Issue 2564793002:
Add smooth interpolation support for <color> custom properties (Closed)
| Index: third_party/WebKit/LayoutTests/animations/custom-properties/color-type-interpolation.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/custom-properties/color-type-interpolation.html b/third_party/WebKit/LayoutTests/animations/custom-properties/color-type-interpolation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..ce6e2d28a27316e98905cf0737fb44183b14228f |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/animations/custom-properties/color-type-interpolation.html |
| @@ -0,0 +1,111 @@ |
| +<!DOCTYPE html> |
| +<meta charset="UTF-8"> |
| +<style> |
| +.parent { |
| + --color: blue; |
| +} |
| +.target { |
| + --color: yellow; |
| +} |
| +</style> |
| +<body alink="red" link="blue"> |
| +<script src="../interpolation/resources/interpolation-test.js"></script> |
| +<script> |
| +CSS.registerProperty({ |
| + name: '--color', |
| + syntax: '<color>', |
| + initialValue: 'black', |
| +}); |
| + |
| +assertInterpolation({ |
| + property: '--color', |
| + from: neutralKeyframe, |
| + to: 'green', |
| +}, [ |
| + {at: -0.3, is: 'rgb(255, 255, 0)'}, |
| + {at: 0, is: 'rgb(255, 255, 0)'}, |
| + {at: 0.3, is: 'rgb(179, 217, 0)'}, |
| + {at: 0.6, is: 'rgb(102, 179, 0)'}, |
| + {at: 1, is: 'rgb(0, 128, 0)'}, |
| + {at: 1.5, is: 'rgb(0, 65, 0)'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--color', |
| + from: 'initial', |
| + to: 'green', |
| +}, [ |
| + {at: -0.3, is: 'rgb(0, 0, 0)'}, |
| + {at: 0, is: 'rgb(0, 0, 0)'}, |
| + {at: 0.3, is: 'rgb(0, 38, 0)'}, |
| + {at: 0.6, is: 'rgb(0, 77, 0)'}, |
| + {at: 1, is: 'rgb(0, 128, 0)'}, |
| + {at: 1.5, is: 'rgb(0, 192, 0)'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--color', |
| + from: 'inherit', |
| + to: 'green', |
| +}, [ |
| + {at: -0.3, is: 'rgb(0, 0, 255)'}, |
| + {at: 0, is: 'rgb(0, 0, 255)'}, |
| + {at: 0.3, is: 'rgb(0, 38, 179)'}, |
| + {at: 0.6, is: 'rgb(0, 77, 102)'}, |
| + {at: 1, is: 'rgb(0, 128, 0)'}, |
| + {at: 1.5, is: 'rgb(0, 192, 0)'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--color', |
| + from: 'unset', |
| + to: 'green', |
| +}, [ |
| + {at: -0.3, is: 'rgb(0, 0, 0)'}, |
| + {at: 0, is: 'rgb(0, 0, 0)'}, |
| + {at: 0.3, is: 'rgb(0, 38, 0)'}, |
| + {at: 0.6, is: 'rgb(0, 77, 0)'}, |
| + {at: 1, is: 'rgb(0, 128, 0)'}, |
| + {at: 1.5, is: 'rgb(0, 192, 0)'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--color', |
| + from: 'black', |
| + to: 'orange', |
| +}, [ |
| + {at: -0.3, is: 'rgb(0, 0, 0)'}, |
| + {at: 0, is: 'rgb(0, 0, 0)'}, |
| + {at: 0.3, is: 'rgb(77, 50, 0)'}, |
| + {at: 0.6, is: 'rgb(153, 99, 0)'}, |
| + {at: 1, is: 'rgb(255, 165, 0)'}, |
| + {at: 1.5, is: 'rgb(255, 248, 0)'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--color', |
| + from: '-webkit-activelink', |
| + to: 'green', |
| +}, [ |
| + {at: -0.3, is: 'rgb(255, 0, 0)'}, |
| + {at: 0, is: 'rgb(255, 0, 0)'}, |
| + {at: 0.3, is: 'rgb(179, 38, 0)'}, |
| + {at: 0.6, is: 'rgb(102, 77, 0)'}, |
| + {at: 1, is: 'rgb(0, 128, 0)'}, |
| + {at: 1.5, is: 'rgb(0, 192, 0)'}, |
| +]); |
| + |
| +assertInterpolation({ |
| + property: '--color', |
| + from: '-webkit-link', |
| + to: 'green', |
| +}, [ |
| + {at: -0.3, is: 'rgb(0, 0, 255)'}, |
| + {at: 0, is: 'rgb(0, 0, 255)'}, |
| + {at: 0.3, is: 'rgb(0, 38, 179)'}, |
| + {at: 0.6, is: 'rgb(0, 77, 102)'}, |
| + {at: 1, is: 'rgb(0, 128, 0)'}, |
| + {at: 1.5, is: 'rgb(0, 192, 0)'}, |
| +]); |
|
sashab
2017/01/25 02:55:00
Add test for currentColor as well :^)
alancutter (OOO until 2018)
2017/01/25 03:55:13
Added failing test. Turns out supporting currentco
|
| +</script> |
| +</body> |
