Chromium Code Reviews Chromium Code Reviews
Issue 1680803003:
Add additive animation support for CSS property background-position (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/animations/composition/background-position-composition.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/composition/background-position-composition.html b/third_party/WebKit/LayoutTests/animations/composition/background-position-composition.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..5584ed5eabe92a4d14cfd831c479fd7dd5cbd044 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/animations/composition/background-position-composition.html |
| @@ -0,0 +1,89 @@ |
| +<!DOCTYPE html> |
| +<meta charset="UTF-8"> |
| +<style> |
| +.target { |
| + width: 120px; |
| + height: 120px; |
| + display: inline-block; |
| + background-image: url(), url(); |
| +} |
| +</style> |
| +<body> |
| +<script src="../interpolation/resources/interpolation-test.js"></script> |
| +<script> |
| +assertComposition({ |
| + property: 'background-position', |
| + underlying: '40px 40px', |
| + addFrom: '60px 60px', |
| + addTo: '160px 160px', |
| +}, [ |
| + {at: -0.25, is: '75px 75px, 75px 75px'}, |
| + {at: 0, is: '100px 100px, 100px 100px'}, |
| + {at: 0.25, is: '125px 125px, 125px 125px'}, |
| + {at: 0.5, is: '150px 150px, 150px 150px'}, |
| + {at: 0.75, is: '175px 175px, 175px 175px'}, |
| + {at: 1, is: '200px 200px, 200px 200px'}, |
| + {at: 1.25, is: '225px 225px, 225px 225px'}, |
| +]); |
| + |
| +assertComposition({ |
| + property: 'background-position', |
| + underlying: 'top 20% left 40%', |
| + addFrom: 'left 60% top 80%', |
| + addTo: 'right 80% bottom 40%', |
| +}, [ |
| + {at: -0.25, is: '110% 105%, 110% 105%'}, |
| + {at: 0, is: '100% 100%, 100% 100%'}, |
| + {at: 0.25, is: '90% 95%, 90% 95%'}, |
| + {at: 0.5, is: '80% 90%, 80% 90%'}, |
| + {at: 0.75, is: '70% 85%, 70% 85%'}, |
| + {at: 1, is: '60% 80%, 60% 80%'}, |
| + {at: 1.25, is: '50% 75%, 50% 75%'}, |
| +]); |
| + |
| +assertComposition({ |
| + property: 'background-position', |
| + underlying: 'top 20% left 40%', |
| + addFrom: 'left 60% top 80%, top 180% left 160%', |
| + addTo: 'right 80% bottom 40%', |
| +}, [ |
| + {at: -0.25, is: '110% 105%, 235% 230%'}, |
| + {at: 0, is: '100% 100%, 200% 200%'}, |
| + {at: 0.25, is: '90% 95%, 165% 170%'}, |
| + {at: 0.5, is: '80% 90%, 130% 140%'}, |
| + {at: 0.75, is: '70% 85%, 95% 110%'}, |
| + {at: 1, is: '60% 80%, 60% 80%'}, |
| + {at: 1.25, is: '50% 75%, 25% 50%'}, |
| +]); |
| + |
| +assertComposition({ |
| + property: 'background-position', |
| + underlying: '40px 40px', |
|
Eric Willigers
2016/02/16 07:13:34
Can underlying, replaceFrom, addTo please differ f
alancutter (OOO until 2018)
2016/02/17 06:39:51
Done.
|
| + replaceFrom: '100px 100px', |
| + addTo: '160px 160px', |
| +}, [ |
| + {at: -0.25, is: '75px 75px, 75px 75px'}, |
| + {at: 0, is: '100px 100px, 100px 100px'}, |
| + {at: 0.25, is: '125px 125px, 125px 125px'}, |
| + {at: 0.5, is: '150px 150px, 150px 150px'}, |
| + {at: 0.75, is: '175px 175px, 175px 175px'}, |
| + {at: 1, is: '200px 200px, 200px 200px'}, |
| + {at: 1.25, is: '225px 225px, 225px 225px'}, |
| +]); |
| + |
| +assertComposition({ |
| + property: 'background-position', |
| + underlying: '40px 40px', |
| + addFrom: '60px 60px', |
| + replaceTo: '200px 200px', |
| +}, [ |
| + {at: -0.25, is: '75px 75px, 75px 75px'}, |
| + {at: 0, is: '100px 100px, 100px 100px'}, |
| + {at: 0.25, is: '125px 125px, 125px 125px'}, |
| + {at: 0.5, is: '150px 150px, 150px 150px'}, |
| + {at: 0.75, is: '175px 175px, 175px 175px'}, |
| + {at: 1, is: '200px 200px, 200px 200px'}, |
| + {at: 1.25, is: '225px 225px, 225px 225px'}, |
| +]); |
| +</script> |
| +</body> |
