Chromium Code Reviews Chromium Code Reviews
Issue 2537373005:
[css-ui] Make caret-color animatable (Closed)
| Index: third_party/WebKit/LayoutTests/animations/interpolation/caret-color-interpolation.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/caret-color-interpolation.html b/third_party/WebKit/LayoutTests/animations/interpolation/caret-color-interpolation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..3f0a8cfc6ce2ef42a6cc0aa80242d0b43de80a29 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/animations/interpolation/caret-color-interpolation.html |
| @@ -0,0 +1,123 @@ |
| +<!DOCTYPE html> |
| +<meta charset="UTF-8"> |
| +<style> |
| +.parent { |
| + caret-color: blue; |
| +} |
| +.target { |
| + display: inline-block; |
| + font-size: 60pt; |
| + caret-color: yellow; |
| +} |
| +.expected { |
| + margin-right: 15px; |
| +} |
| +</style> |
| +<body alink="red" link="blue" contenteditable> |
| +<template id="target-template">T</template> |
| +<script src="resources/interpolation-test.js"></script> |
| +<script> |
| +assertInterpolation({ |
| + property: 'caret-color', |
| + from: neutralKeyframe, |
|
alancutter (OOO until 2018)
2016/12/15 22:31:15
We should have a test that uses an underlying valu
Manuel Rego
2016/12/19 12:28:31
Created a composition test too, but I'm not 100% s
|
| + 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)'}, |
| +]); |
| + |
| +assertNoInterpolation({ |
| + property: 'caret-color', |
| + from: 'initial', |
| + to: 'green', |
| +}); |
| + |
| +assertNoInterpolation({ |
| + property: 'caret-color', |
| + from: 'auto', |
| + to: 'green', |
| +}); |
| + |
| +assertInterpolation({ |
| + property: 'caret-color', |
| + from: 'currentColor', |
| + 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: 'caret-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: 'caret-color', |
| + from: 'unset', |
| + 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: 'caret-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: 'caret-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: 'caret-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)'}, |
| +]); |
| +</script> |
| +</body> |
