| 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..5ee27c968a450e2f6fc4196f069d02e2b301cb97
|
| --- /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 140px',
|
| + addFrom: '60px 160px',
|
| + addTo: '160px 260px',
|
| +}, [
|
| + {at: -0.25, is: '75px 275px, 75px 275px'},
|
| + {at: 0, is: '100px 300px, 100px 300px'},
|
| + {at: 0.25, is: '125px 325px, 125px 325px'},
|
| + {at: 0.5, is: '150px 350px, 150px 350px'},
|
| + {at: 0.75, is: '175px 375px, 175px 375px'},
|
| + {at: 1, is: '200px 400px, 200px 400px'},
|
| + {at: 1.25, is: '225px 425px, 225px 425px'},
|
| +]);
|
| +
|
| +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 140px',
|
| + replaceFrom: '100px 200px',
|
| + addTo: '160px 260px',
|
| +}, [
|
| + {at: -0.25, is: '75px 150px, 75px 150px'},
|
| + {at: 0, is: '100px 200px, 100px 200px'},
|
| + {at: 0.25, is: '125px 250px, 125px 250px'},
|
| + {at: 0.5, is: '150px 300px, 150px 300px'},
|
| + {at: 0.75, is: '175px 350px, 175px 350px'},
|
| + {at: 1, is: '200px 400px, 200px 400px'},
|
| + {at: 1.25, is: '225px 450px, 225px 450px'},
|
| +]);
|
| +
|
| +assertComposition({
|
| + property: 'background-position',
|
| + underlying: '40px 140px',
|
| + addFrom: '60px 160px',
|
| + replaceTo: '200px 400px',
|
| +}, [
|
| + {at: -0.25, is: '75px 275px, 75px 275px'},
|
| + {at: 0, is: '100px 300px, 100px 300px'},
|
| + {at: 0.25, is: '125px 325px, 125px 325px'},
|
| + {at: 0.5, is: '150px 350px, 150px 350px'},
|
| + {at: 0.75, is: '175px 375px, 175px 375px'},
|
| + {at: 1, is: '200px 400px, 200px 400px'},
|
| + {at: 1.25, is: '225px 425px, 225px 425px'},
|
| +]);
|
| +</script>
|
| +</body>
|
|
|
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