diff options
| author | alancutter <alancutter@chromium.org> | 2016-02-25 22:20:14 -0800 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2016-02-26 06:21:34 +0000 |
| commit | 8a3777d77af8e154f4eb03bfa87a8c73b58fa880 (patch) | |
| tree | 98480ba7f6e09509118ca02b7bb3dd5b68ff9863 /third_party/WebKit/LayoutTests/animations | |
| parent | 94a1988874793255dca1567a7dacb2f4936444ec (diff) | |
| download | chromium_src-8a3777d77af8e154f4eb03bfa87a8c73b58fa880.zip chromium_src-8a3777d77af8e154f4eb03bfa87a8c73b58fa880.tar.gz chromium_src-8a3777d77af8e154f4eb03bfa87a8c73b58fa880.tar.bz2 | |
Add additive animation support for CSS property translate
This patch adds support for composite modes on translate CSS animations
via element.animate().
BUG=437696
Review URL: https://codereview.chromium.org/1644883002
Cr-Commit-Position: refs/heads/master@{#377830}
Diffstat (limited to 'third_party/WebKit/LayoutTests/animations')
| -rw-r--r-- | third_party/WebKit/LayoutTests/animations/composition/translate-composition.html | 53 | ||||
| -rw-r--r-- | third_party/WebKit/LayoutTests/animations/responsive/translate-responsive.html | 34 |
2 files changed, 87 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/animations/composition/translate-composition.html b/third_party/WebKit/LayoutTests/animations/composition/translate-composition.html new file mode 100644 index 0000000..8287280 --- /dev/null +++ b/third_party/WebKit/LayoutTests/animations/composition/translate-composition.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<body> +<style> +.target { + width: 100px; + height: 100px; +} +</style> +<script src="../interpolation/resources/interpolation-test.js"></script> +<script> +assertComposition({ + property: 'translate', + underlying: '100px 200px 300px', + addFrom: '-50px 50%', + addTo: '100%', +}, [ + {at: -1, is: '-100px 300px 300px'}, + {at: 0, is: '50px 250px 300px'}, + {at: 0.25, is: '87.5px 237.5px 300px'}, + {at: 0.75, is: '162.5px 212.5px 300px'}, + {at: 1, is: '200px 200px 300px'}, + {at: 2, is: '350px 150px 300px'}, +]); + +assertComposition({ + property: 'translate', + underlying: '100px 200px 300px', + addFrom: '50% 100px', + replaceTo: '200px 50% 100px', +}, [ + {at: -1, is: '100px 550px 500px'}, + {at: 0, is: '150px 300px 300px'}, + {at: 0.25, is: '162.5px 237.5px 250px'}, + {at: 0.75, is: '187.5px 112.5px 150px'}, + {at: 1, is: '200px 50px 100px'}, + {at: 2, is: '250px -200px -100px'}, +]); + +assertComposition({ + property: 'translate', + underlying: '100px 200px 300px', + replaceFrom: '50% 100px', + addTo: '200px 50% 100px', +}, [ + {at: -1, is: '-200px -50px -400px'}, + {at: 0, is: '50px 100px'}, + {at: 0.25, is: '112.5px 137.5px 100px'}, + {at: 0.75, is: '237.5px 212.5px 300px'}, + {at: 1, is: '300px 250px 400px'}, + {at: 2, is: '550px 400px 800px'}, +]); +</script> +</body>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/animations/responsive/translate-responsive.html b/third_party/WebKit/LayoutTests/animations/responsive/translate-responsive.html new file mode 100644 index 0000000..5402c18 --- /dev/null +++ b/third_party/WebKit/LayoutTests/animations/responsive/translate-responsive.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<script src="resources/responsive-test.js"></script> +<script> +assertCSSResponsive({ + property: 'translate', + from: 'inherit', + to: '100px 200px 300px', + configurations: [{ + state: {inherited: 'initial'}, + expect: [ + {at: 0.25, is: '25px 50px 75px'}, + {at: 0.75, is: '75px 150px 225px'}, + ], + }, { + state: {inherited: '0'}, + expect: [ + {at: 0.25, is: '25px 50px 75px'}, + {at: 0.75, is: '75px 150px 225px'}, + ], + }, { + state: {inherited: '200px 100px'}, + expect: [ + {at: 0.25, is: '175px 125px 75px'}, + {at: 0.75, is: '125px 175px 225px'}, + ], + }, { + state: {inherited: '100px 100px 100px'}, + expect: [ + {at: 0.25, is: '100px 125px 150px'}, + {at: 0.75, is: '100px 175px 250px'}, + ], + }], +}); +</script> |