Chromium Code Reviews Chromium Code Reviews
Issue 38823002:
Web Animations CSS: Support animation of {text,box,-webkit-box}-shadow and fix blur clamping (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink@master| Index: LayoutTests/animations/interpolation/box-shadow-interpolation.html |
| diff --git a/LayoutTests/animations/interpolation/box-shadow-interpolation.html b/LayoutTests/animations/interpolation/box-shadow-interpolation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..27471103889e1d08f6aa702629a6b356280f0fc1 |
| --- /dev/null |
| +++ b/LayoutTests/animations/interpolation/box-shadow-interpolation.html |
| @@ -0,0 +1,61 @@ |
| +<!DOCTYPE html> |
| +<meta charset="UTF-8"> |
| +<style> |
| +.target { |
| + display: inline-block; |
| + width: 60px; |
| + height: 60px; |
| + border: 2px solid; |
| + margin-right: 20px; |
| + margin-bottom: 30px; |
| +} |
| +.replica { |
| + margin-right: 40px; |
| +} |
| +</style> |
| +<body> |
| +<script src="resources/interpolation-test.js"></script> |
| +<script> |
| +// Test basic functionality, and clipping blur at 0 |
| +assertInterpolation({ |
| + property: 'box-shadow', |
| + from: '15px 10px 5px 5px black', |
| + to: '-15px -10px 25px -5px orange' |
| +}, [ |
| + {at: -0.3, is: '24px 16px 0px 8px black'}, |
| + {at: 0, is: '15px 10px 5px 5px black'}, |
| + {at: 0.3, is: '6px 4px 11px 2px rgb(77, 50, 0)'}, |
|
mithro-old
2013/10/24 01:04:16
Please test #aabbcc, rgb and rgba in the in the an
Timothy Loh
2013/10/24 03:04:54
Tweaked tests as per in-person discussion.
|
| + {at: 0.6, is: '-3px -2px 17px -1px rgb(153, 99, 0)'}, |
| + {at: 1, is: '-15px -10px 25px -5px orange'}, |
| + {at: 1.5, is: '-30px -20px 35px -10px rgb(255, 248, 0)'}, |
| +]); |
|
mithro-old
2013/10/24 01:04:16
Is it worth testing hsl?
|
| + |
| +// Test padding shorter lists |
| +assertInterpolation({ |
| + property: 'box-shadow', |
| + from: '10px 20px yellow, inset 5px 10px green', |
|
mithro-old
2013/10/24 01:04:16
Can these 10px be calc expressions, ems or percent
Timothy Loh
2013/10/24 03:04:54
I've added a test with ems. Percentages aren't all
|
| + to: 'none' |
| +}, [ |
| + {at: -0.3, is: '13px 26px yellow, inset 6.5px 13px rgb(0, 166, 0)'}, |
| + {at: 0, is: '10px 20px yellow, inset 5px 10px green'}, |
| + {at: 0.3, is: '7px 14px rgba(255, 255, 0, 0.7), inset 3.5px 7px rgba(0, 128, 0, 0.7)'}, |
| + {at: 0.6, is: '4px 8px rgba(255, 255, 0, 0.4), inset 2px 4px rgba(0, 128, 0, 0.4)'}, |
| + {at: 1, is: 'none'}, |
| + {at: 1.5, is: '-5px -10px transparent, inset -2.5px -5px transparent'}, |
| +]); |
| + |
| +// Test unmatched inset |
| +assertInterpolation({ |
| + property: 'box-shadow', |
| + from: '10px 20px yellow, 5px 10px green', |
| + to: 'inset 5px 10px green, 15px 20px blue' |
| +}, [ |
| + {at: -0.3, is: '10px 20px yellow, 5px 10px green'}, |
| + {at: 0, is: '10px 20px yellow, 5px 10px green'}, |
| + {at: 0.3, is: '10px 20px yellow, 5px 10px green'}, |
| + {at: 0.6, is: 'inset 5px 10px green, 15px 20px blue'}, |
| + {at: 1, is: 'inset 5px 10px green, 15px 20px blue'}, |
| + {at: 1.5, is: 'inset 5px 10px green, 15px 20px blue'}, |
| +]); |
| +</script> |
| +</body> |
