diff options
| author | alancutter <alancutter@chromium.org> | 2016-02-18 05:11:15 -0800 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2016-02-18 13:12:35 +0000 |
| commit | 38955fb584216cab36eccb20ac2672d38c198df7 (patch) | |
| tree | 83015f902550a51c65674787070a854489b81e26 /third_party/WebKit/LayoutTests/animations | |
| parent | 89261da788f0588b60f9a483ac93592e76689215 (diff) | |
| download | chromium_src-38955fb584216cab36eccb20ac2672d38c198df7.zip chromium_src-38955fb584216cab36eccb20ac2672d38c198df7.tar.gz chromium_src-38955fb584216cab36eccb20ac2672d38c198df7.tar.bz2 | |
Add additive animation support for CSS property background-position
This patch adds support for composite modes on background-position
CSS animations via element.animate().
BUG=437696
Review URL: https://codereview.chromium.org/1680803003
Cr-Commit-Position: refs/heads/master@{#376155}
Diffstat (limited to 'third_party/WebKit/LayoutTests/animations')
4 files changed, 238 insertions, 80 deletions
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 0000000..5ee27c9 --- /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> diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt b/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt index 94a62d3..be892ea 100644 --- a/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt +++ b/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt @@ -25,46 +25,51 @@ PASS CSS Transitions: property <background-position> from [center center] to [le PASS CSS Transitions: property <background-position> from [center center] to [left 20px top 20px] at (0.5) is [calc(10px + 25%) calc(10px + 25%)] PASS CSS Transitions: property <background-position> from [center center] to [left 20px top 20px] at (0.75) is [calc(15px + 12.5%) calc(15px + 12.5%)] PASS CSS Transitions: property <background-position> from [center center] to [left 20px top 20px] at (1) is [20px 20px] -FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0) is [left 50% 50%] assert_equals: expected "left 50 % top 50 % " but got "left 50 % 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0.25) is [left 50% calc(5px + 37.5%)] assert_equals: expected "left 50 % top calc ( 5px + 37.5 % ) " but got "left 50 % calc ( 5px + 37.5 % ) " -FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0.5) is [left 50% calc(10px + 25%)] assert_equals: expected "left 50 % top calc ( 10px + 25 % ) " but got "left 50 % calc ( 10px + 25 % ) " -FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0.75) is [left 50% calc(15px + 12.5%)] assert_equals: expected "left 50 % top calc ( 15px + 12.5 % ) " but got "left 50 % calc ( 15px + 12.5 % ) " -FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (1) is [left 50% 20px] assert_equals: expected "left 50 % top 20px " but got "left 50 % 20px " +FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0) is [left 50% 50%] assert_equals: expected "50 % 50 % " but got "left 50 % 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0.25) is [left 50% calc(5px + 37.5%)] assert_equals: expected "50 % calc ( 5px + 37.5 % ) " but got "left 50 % calc ( 5px + 37.5 % ) " +FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0.5) is [left 50% calc(10px + 25%)] assert_equals: expected "50 % calc ( 10px + 25 % ) " but got "left 50 % calc ( 10px + 25 % ) " +FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (0.75) is [left 50% calc(15px + 12.5%)] assert_equals: expected "50 % calc ( 15px + 12.5 % ) " but got "left 50 % calc ( 15px + 12.5 % ) " +FAIL CSS Transitions: property <background-position> from [center center] to [center top 20px] at (1) is [left 50% 20px] assert_equals: expected "50 % 20px " but got "left 50 % 20px " PASS CSS Transitions: property <background-position> from [center center] to [right 20px top 20px] at (0) is [50% 50%] PASS CSS Transitions: property <background-position> from [center center] to [right 20px top 20px] at (0.25) is [calc(-5px + 62.5%) calc(5px + 37.5%)] PASS CSS Transitions: property <background-position> from [center center] to [right 20px top 20px] at (0.5) is [calc(-10px + 75%) calc(10px + 25%)] PASS CSS Transitions: property <background-position> from [center center] to [right 20px top 20px] at (0.75) is [calc(-15px + 87.5%) calc(15px + 12.5%)] PASS CSS Transitions: property <background-position> from [center center] to [right 20px top 20px] at (1) is [calc(-20px + 100%) 20px] -FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0) is [50% top 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0.25) is [calc(5px + 37.5%) top 50%] assert_equals: expected "left calc ( 5px + 37.5 % ) top 50 % " but got "calc ( 5px + 37.5 % ) top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0.5) is [calc(10px + 25%) top 50%] assert_equals: expected "left calc ( 10px + 25 % ) top 50 % " but got "calc ( 10px + 25 % ) top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0.75) is [calc(15px + 12.5%) top 50%] assert_equals: expected "left calc ( 15px + 12.5 % ) top 50 % " but got "calc ( 15px + 12.5 % ) top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (1) is [20px top 50%] assert_equals: expected "left 20px top 50 % " but got "20px top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0) is [50% top 50%] assert_equals: expected "50 % 50 % " but got "50 % top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0.25) is [calc(5px + 37.5%) top 50%] assert_equals: expected "calc ( 5px + 37.5 % ) 50 % " but got "calc ( 5px + 37.5 % ) top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0.5) is [calc(10px + 25%) top 50%] assert_equals: expected "calc ( 10px + 25 % ) 50 % " but got "calc ( 10px + 25 % ) top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (0.75) is [calc(15px + 12.5%) top 50%] assert_equals: expected "calc ( 15px + 12.5 % ) 50 % " but got "calc ( 15px + 12.5 % ) top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [left 20px center] at (1) is [20px top 50%] assert_equals: expected "20px 50 % " but got "20px top 50 % " PASS CSS Transitions: property <background-position> from [center center] to [center center] at (0) is [50% 50%] PASS CSS Transitions: property <background-position> from [center center] to [center center] at (0.25) is [50% 50%] PASS CSS Transitions: property <background-position> from [center center] to [center center] at (0.5) is [50% 50%] PASS CSS Transitions: property <background-position> from [center center] to [center center] at (0.75) is [50% 50%] PASS CSS Transitions: property <background-position> from [center center] to [center center] at (1) is [50% 50%] -FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0) is [50% top 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0.25) is [calc(-5px + 62.5%) top 50%] assert_equals: expected "left calc ( - 5px + 62.5 % ) top 50 % " but got "calc ( - 5px + 62.5 % ) top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0.5) is [calc(-10px + 75%) top 50%] assert_equals: expected "left calc ( - 10px + 75 % ) top 50 % " but got "calc ( - 10px + 75 % ) top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0.75) is [calc(-15px + 87.5%) top 50%] assert_equals: expected "left calc ( - 15px + 87.5 % ) top 50 % " but got "calc ( - 15px + 87.5 % ) top 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (1) is [calc(-20px + 100%) top 50%] assert_equals: expected "left calc ( - 20px + 100 % ) top 50 % " but got "calc ( - 20px + 100 % ) top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0) is [50% top 50%] assert_equals: expected "50 % 50 % " but got "50 % top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0.25) is [calc(-5px + 62.5%) top 50%] assert_equals: expected "calc ( - 5px + 62.5 % ) 50 % " but got "calc ( - 5px + 62.5 % ) top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0.5) is [calc(-10px + 75%) top 50%] assert_equals: expected "calc ( - 10px + 75 % ) 50 % " but got "calc ( - 10px + 75 % ) top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (0.75) is [calc(-15px + 87.5%) top 50%] assert_equals: expected "calc ( - 15px + 87.5 % ) 50 % " but got "calc ( - 15px + 87.5 % ) top 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [right 20px center] at (1) is [calc(-20px + 100%) top 50%] assert_equals: expected "calc ( - 20px + 100 % ) 50 % " but got "calc ( - 20px + 100 % ) top 50 % " PASS CSS Transitions: property <background-position> from [center center] to [left 20px bottom 20px] at (0) is [50% 50%] PASS CSS Transitions: property <background-position> from [center center] to [left 20px bottom 20px] at (0.25) is [calc(5px + 37.5%) calc(-5px + 62.5%)] PASS CSS Transitions: property <background-position> from [center center] to [left 20px bottom 20px] at (0.5) is [calc(10px + 25%) calc(-10px + 75%)] PASS CSS Transitions: property <background-position> from [center center] to [left 20px bottom 20px] at (0.75) is [calc(15px + 12.5%) calc(-15px + 87.5%)] PASS CSS Transitions: property <background-position> from [center center] to [left 20px bottom 20px] at (1) is [20px calc(-20px + 100%)] -FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0) is [left 50% 50%] assert_equals: expected "left 50 % top 50 % " but got "left 50 % 50 % " -FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0.25) is [left 50% calc(-5px + 62.5%)] assert_equals: expected "left 50 % top calc ( - 5px + 62.5 % ) " but got "left 50 % calc ( - 5px + 62.5 % ) " -FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0.5) is [left 50% calc(-10px + 75%)] assert_equals: expected "left 50 % top calc ( - 10px + 75 % ) " but got "left 50 % calc ( - 10px + 75 % ) " -FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0.75) is [left 50% calc(-15px + 87.5%)] assert_equals: expected "left 50 % top calc ( - 15px + 87.5 % ) " but got "left 50 % calc ( - 15px + 87.5 % ) " -FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (1) is [left 50% calc(-20px + 100%)] assert_equals: expected "left 50 % top calc ( - 20px + 100 % ) " but got "left 50 % calc ( - 20px + 100 % ) " +FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0) is [left 50% 50%] assert_equals: expected "50 % 50 % " but got "left 50 % 50 % " +FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0.25) is [left 50% calc(-5px + 62.5%)] assert_equals: expected "50 % calc ( - 5px + 62.5 % ) " but got "left 50 % calc ( - 5px + 62.5 % ) " +FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0.5) is [left 50% calc(-10px + 75%)] assert_equals: expected "50 % calc ( - 10px + 75 % ) " but got "left 50 % calc ( - 10px + 75 % ) " +FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (0.75) is [left 50% calc(-15px + 87.5%)] assert_equals: expected "50 % calc ( - 15px + 87.5 % ) " but got "left 50 % calc ( - 15px + 87.5 % ) " +FAIL CSS Transitions: property <background-position> from [center center] to [center bottom 20px] at (1) is [left 50% calc(-20px + 100%)] assert_equals: expected "50 % calc ( - 20px + 100 % ) " but got "left 50 % calc ( - 20px + 100 % ) " PASS CSS Transitions: property <background-position> from [center center] to [right 20px bottom 20px] at (0) is [50% 50%] PASS CSS Transitions: property <background-position> from [center center] to [right 20px bottom 20px] at (0.25) is [calc(-5px + 62.5%) calc(-5px + 62.5%)] PASS CSS Transitions: property <background-position> from [center center] to [right 20px bottom 20px] at (0.5) is [calc(-10px + 75%) calc(-10px + 75%)] PASS CSS Transitions: property <background-position> from [center center] to [right 20px bottom 20px] at (0.75) is [calc(-15px + 87.5%) calc(-15px + 87.5%)] PASS CSS Transitions: property <background-position> from [center center] to [right 20px bottom 20px] at (1) is [calc(-20px + 100%) calc(-20px + 100%)] +PASS CSS Transitions: property <background-position> from [center] to [bottom] at (0) is [50% 50%] +PASS CSS Transitions: property <background-position> from [center] to [bottom] at (0.25) is [50% 62.5%] +PASS CSS Transitions: property <background-position> from [center] to [bottom] at (0.5) is [50% 75%] +PASS CSS Transitions: property <background-position> from [center] to [bottom] at (0.75) is [50% 87.5%] +PASS CSS Transitions: property <background-position> from [center] to [bottom] at (1) is [50% 100%] PASS CSS Animations: property <background-position> from [] to [left 20px top 20px] at (0) is [10px 10px] PASS CSS Animations: property <background-position> from [] to [left 20px top 20px] at (0.25) is [12.5px 12.5px] PASS CSS Animations: property <background-position> from [] to [left 20px top 20px] at (0.5) is [15px 15px] @@ -90,46 +95,51 @@ PASS CSS Animations: property <background-position> from [center center] to [lef PASS CSS Animations: property <background-position> from [center center] to [left 20px top 20px] at (0.5) is [calc(10px + 25%) calc(10px + 25%)] PASS CSS Animations: property <background-position> from [center center] to [left 20px top 20px] at (0.75) is [calc(15px + 12.5%) calc(15px + 12.5%)] PASS CSS Animations: property <background-position> from [center center] to [left 20px top 20px] at (1) is [20px 20px] -FAIL CSS Animations: property <background-position> from [center center] to [center top 20px] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [center top 20px] at (0.25) is [50% calc(5px + 37.5%)] assert_equals: expected "left 50 % top calc ( 5px + 37.5 % ) " but got "50 % calc ( 5px + 37.5 % ) " -FAIL CSS Animations: property <background-position> from [center center] to [center top 20px] at (0.5) is [50% calc(10px + 25%)] assert_equals: expected "left 50 % top calc ( 10px + 25 % ) " but got "50 % calc ( 10px + 25 % ) " -FAIL CSS Animations: property <background-position> from [center center] to [center top 20px] at (0.75) is [50% calc(15px + 12.5%)] assert_equals: expected "left 50 % top calc ( 15px + 12.5 % ) " but got "50 % calc ( 15px + 12.5 % ) " -FAIL CSS Animations: property <background-position> from [center center] to [center top 20px] at (1) is [50% 20px] assert_equals: expected "left 50 % top 20px " but got "50 % 20px " +PASS CSS Animations: property <background-position> from [center center] to [center top 20px] at (0) is [50% 50%] +PASS CSS Animations: property <background-position> from [center center] to [center top 20px] at (0.25) is [50% calc(5px + 37.5%)] +PASS CSS Animations: property <background-position> from [center center] to [center top 20px] at (0.5) is [50% calc(10px + 25%)] +PASS CSS Animations: property <background-position> from [center center] to [center top 20px] at (0.75) is [50% calc(15px + 12.5%)] +PASS CSS Animations: property <background-position> from [center center] to [center top 20px] at (1) is [50% 20px] PASS CSS Animations: property <background-position> from [center center] to [right 20px top 20px] at (0) is [50% 50%] PASS CSS Animations: property <background-position> from [center center] to [right 20px top 20px] at (0.25) is [calc(-5px + 62.5%) calc(5px + 37.5%)] PASS CSS Animations: property <background-position> from [center center] to [right 20px top 20px] at (0.5) is [calc(-10px + 75%) calc(10px + 25%)] PASS CSS Animations: property <background-position> from [center center] to [right 20px top 20px] at (0.75) is [calc(-15px + 87.5%) calc(15px + 12.5%)] PASS CSS Animations: property <background-position> from [center center] to [right 20px top 20px] at (1) is [calc(-20px + 100%) 20px] -FAIL CSS Animations: property <background-position> from [center center] to [left 20px center] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [left 20px center] at (0.25) is [calc(5px + 37.5%) 50%] assert_equals: expected "left calc ( 5px + 37.5 % ) top 50 % " but got "calc ( 5px + 37.5 % ) 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [left 20px center] at (0.5) is [calc(10px + 25%) 50%] assert_equals: expected "left calc ( 10px + 25 % ) top 50 % " but got "calc ( 10px + 25 % ) 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [left 20px center] at (0.75) is [calc(15px + 12.5%) 50%] assert_equals: expected "left calc ( 15px + 12.5 % ) top 50 % " but got "calc ( 15px + 12.5 % ) 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [left 20px center] at (1) is [20px 50%] assert_equals: expected "left 20px top 50 % " but got "20px 50 % " +PASS CSS Animations: property <background-position> from [center center] to [left 20px center] at (0) is [50% 50%] +PASS CSS Animations: property <background-position> from [center center] to [left 20px center] at (0.25) is [calc(5px + 37.5%) 50%] +PASS CSS Animations: property <background-position> from [center center] to [left 20px center] at (0.5) is [calc(10px + 25%) 50%] +PASS CSS Animations: property <background-position> from [center center] to [left 20px center] at (0.75) is [calc(15px + 12.5%) 50%] +PASS CSS Animations: property <background-position> from [center center] to [left 20px center] at (1) is [20px 50%] PASS CSS Animations: property <background-position> from [center center] to [center center] at (0) is [50% 50%] PASS CSS Animations: property <background-position> from [center center] to [center center] at (0.25) is [50% 50%] PASS CSS Animations: property <background-position> from [center center] to [center center] at (0.5) is [50% 50%] PASS CSS Animations: property <background-position> from [center center] to [center center] at (0.75) is [50% 50%] PASS CSS Animations: property <background-position> from [center center] to [center center] at (1) is [50% 50%] -FAIL CSS Animations: property <background-position> from [center center] to [right 20px center] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [right 20px center] at (0.25) is [calc(-5px + 62.5%) 50%] assert_equals: expected "left calc ( - 5px + 62.5 % ) top 50 % " but got "calc ( - 5px + 62.5 % ) 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [right 20px center] at (0.5) is [calc(-10px + 75%) 50%] assert_equals: expected "left calc ( - 10px + 75 % ) top 50 % " but got "calc ( - 10px + 75 % ) 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [right 20px center] at (0.75) is [calc(-15px + 87.5%) 50%] assert_equals: expected "left calc ( - 15px + 87.5 % ) top 50 % " but got "calc ( - 15px + 87.5 % ) 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [right 20px center] at (1) is [calc(-20px + 100%) 50%] assert_equals: expected "left calc ( - 20px + 100 % ) top 50 % " but got "calc ( - 20px + 100 % ) 50 % " +PASS CSS Animations: property <background-position> from [center center] to [right 20px center] at (0) is [50% 50%] +PASS CSS Animations: property <background-position> from [center center] to [right 20px center] at (0.25) is [calc(-5px + 62.5%) 50%] +PASS CSS Animations: property <background-position> from [center center] to [right 20px center] at (0.5) is [calc(-10px + 75%) 50%] +PASS CSS Animations: property <background-position> from [center center] to [right 20px center] at (0.75) is [calc(-15px + 87.5%) 50%] +PASS CSS Animations: property <background-position> from [center center] to [right 20px center] at (1) is [calc(-20px + 100%) 50%] PASS CSS Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0) is [50% 50%] PASS CSS Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0.25) is [calc(5px + 37.5%) calc(-5px + 62.5%)] PASS CSS Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0.5) is [calc(10px + 25%) calc(-10px + 75%)] PASS CSS Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0.75) is [calc(15px + 12.5%) calc(-15px + 87.5%)] PASS CSS Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (1) is [20px calc(-20px + 100%)] -FAIL CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0.25) is [50% calc(-5px + 62.5%)] assert_equals: expected "left 50 % top calc ( - 5px + 62.5 % ) " but got "50 % calc ( - 5px + 62.5 % ) " -FAIL CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0.5) is [50% calc(-10px + 75%)] assert_equals: expected "left 50 % top calc ( - 10px + 75 % ) " but got "50 % calc ( - 10px + 75 % ) " -FAIL CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0.75) is [50% calc(-15px + 87.5%)] assert_equals: expected "left 50 % top calc ( - 15px + 87.5 % ) " but got "50 % calc ( - 15px + 87.5 % ) " -FAIL CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (1) is [50% calc(-20px + 100%)] assert_equals: expected "left 50 % top calc ( - 20px + 100 % ) " but got "50 % calc ( - 20px + 100 % ) " +PASS CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0) is [50% 50%] +PASS CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0.25) is [50% calc(-5px + 62.5%)] +PASS CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0.5) is [50% calc(-10px + 75%)] +PASS CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (0.75) is [50% calc(-15px + 87.5%)] +PASS CSS Animations: property <background-position> from [center center] to [center bottom 20px] at (1) is [50% calc(-20px + 100%)] PASS CSS Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0) is [50% 50%] PASS CSS Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0.25) is [calc(-5px + 62.5%) calc(-5px + 62.5%)] PASS CSS Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0.5) is [calc(-10px + 75%) calc(-10px + 75%)] PASS CSS Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0.75) is [calc(-15px + 87.5%) calc(-15px + 87.5%)] PASS CSS Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (1) is [calc(-20px + 100%) calc(-20px + 100%)] +PASS CSS Animations: property <background-position> from [center] to [bottom] at (0) is [50% 50%] +PASS CSS Animations: property <background-position> from [center] to [bottom] at (0.25) is [50% 62.5%] +PASS CSS Animations: property <background-position> from [center] to [bottom] at (0.5) is [50% 75%] +PASS CSS Animations: property <background-position> from [center] to [bottom] at (0.75) is [50% 87.5%] +PASS CSS Animations: property <background-position> from [center] to [bottom] at (1) is [50% 100%] PASS Web Animations: property <background-position> from [initial] to [left 20px top 20px] at (0) is [0% 0%] PASS Web Animations: property <background-position> from [initial] to [left 20px top 20px] at (0.25) is [5px 5px] PASS Web Animations: property <background-position> from [initial] to [left 20px top 20px] at (0.5) is [10px 10px] @@ -150,45 +160,50 @@ PASS Web Animations: property <background-position> from [center center] to [lef PASS Web Animations: property <background-position> from [center center] to [left 20px top 20px] at (0.5) is [calc(10px + 25%) calc(10px + 25%)] PASS Web Animations: property <background-position> from [center center] to [left 20px top 20px] at (0.75) is [calc(15px + 12.5%) calc(15px + 12.5%)] PASS Web Animations: property <background-position> from [center center] to [left 20px top 20px] at (1) is [20px 20px] -FAIL Web Animations: property <background-position> from [center center] to [center top 20px] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL Web Animations: property <background-position> from [center center] to [center top 20px] at (0.25) is [50% calc(5px + 37.5%)] assert_equals: expected "left 50 % top calc ( 5px + 37.5 % ) " but got "50 % calc ( 5px + 37.5 % ) " -FAIL Web Animations: property <background-position> from [center center] to [center top 20px] at (0.5) is [50% calc(10px + 25%)] assert_equals: expected "left 50 % top calc ( 10px + 25 % ) " but got "50 % calc ( 10px + 25 % ) " -FAIL Web Animations: property <background-position> from [center center] to [center top 20px] at (0.75) is [50% calc(15px + 12.5%)] assert_equals: expected "left 50 % top calc ( 15px + 12.5 % ) " but got "50 % calc ( 15px + 12.5 % ) " -FAIL Web Animations: property <background-position> from [center center] to [center top 20px] at (1) is [50% 20px] assert_equals: expected "left 50 % top 20px " but got "50 % 20px " +PASS Web Animations: property <background-position> from [center center] to [center top 20px] at (0) is [50% 50%] +PASS Web Animations: property <background-position> from [center center] to [center top 20px] at (0.25) is [50% calc(5px + 37.5%)] +PASS Web Animations: property <background-position> from [center center] to [center top 20px] at (0.5) is [50% calc(10px + 25%)] +PASS Web Animations: property <background-position> from [center center] to [center top 20px] at (0.75) is [50% calc(15px + 12.5%)] +PASS Web Animations: property <background-position> from [center center] to [center top 20px] at (1) is [50% 20px] PASS Web Animations: property <background-position> from [center center] to [right 20px top 20px] at (0) is [50% 50%] PASS Web Animations: property <background-position> from [center center] to [right 20px top 20px] at (0.25) is [calc(-5px + 62.5%) calc(5px + 37.5%)] PASS Web Animations: property <background-position> from [center center] to [right 20px top 20px] at (0.5) is [calc(-10px + 75%) calc(10px + 25%)] PASS Web Animations: property <background-position> from [center center] to [right 20px top 20px] at (0.75) is [calc(-15px + 87.5%) calc(15px + 12.5%)] PASS Web Animations: property <background-position> from [center center] to [right 20px top 20px] at (1) is [calc(-20px + 100%) 20px] -FAIL Web Animations: property <background-position> from [center center] to [left 20px center] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL Web Animations: property <background-position> from [center center] to [left 20px center] at (0.25) is [calc(5px + 37.5%) 50%] assert_equals: expected "left calc ( 5px + 37.5 % ) top 50 % " but got "calc ( 5px + 37.5 % ) 50 % " -FAIL Web Animations: property <background-position> from [center center] to [left 20px center] at (0.5) is [calc(10px + 25%) 50%] assert_equals: expected "left calc ( 10px + 25 % ) top 50 % " but got "calc ( 10px + 25 % ) 50 % " -FAIL Web Animations: property <background-position> from [center center] to [left 20px center] at (0.75) is [calc(15px + 12.5%) 50%] assert_equals: expected "left calc ( 15px + 12.5 % ) top 50 % " but got "calc ( 15px + 12.5 % ) 50 % " -FAIL Web Animations: property <background-position> from [center center] to [left 20px center] at (1) is [20px 50%] assert_equals: expected "left 20px top 50 % " but got "20px 50 % " +PASS Web Animations: property <background-position> from [center center] to [left 20px center] at (0) is [50% 50%] +PASS Web Animations: property <background-position> from [center center] to [left 20px center] at (0.25) is [calc(5px + 37.5%) 50%] +PASS Web Animations: property <background-position> from [center center] to [left 20px center] at (0.5) is [calc(10px + 25%) 50%] +PASS Web Animations: property <background-position> from [center center] to [left 20px center] at (0.75) is [calc(15px + 12.5%) 50%] +PASS Web Animations: property <background-position> from [center center] to [left 20px center] at (1) is [20px 50%] PASS Web Animations: property <background-position> from [center center] to [center center] at (0) is [50% 50%] PASS Web Animations: property <background-position> from [center center] to [center center] at (0.25) is [50% 50%] PASS Web Animations: property <background-position> from [center center] to [center center] at (0.5) is [50% 50%] PASS Web Animations: property <background-position> from [center center] to [center center] at (0.75) is [50% 50%] PASS Web Animations: property <background-position> from [center center] to [center center] at (1) is [50% 50%] -FAIL Web Animations: property <background-position> from [center center] to [right 20px center] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL Web Animations: property <background-position> from [center center] to [right 20px center] at (0.25) is [calc(-5px + 62.5%) 50%] assert_equals: expected "left calc ( - 5px + 62.5 % ) top 50 % " but got "calc ( - 5px + 62.5 % ) 50 % " -FAIL Web Animations: property <background-position> from [center center] to [right 20px center] at (0.5) is [calc(-10px + 75%) 50%] assert_equals: expected "left calc ( - 10px + 75 % ) top 50 % " but got "calc ( - 10px + 75 % ) 50 % " -FAIL Web Animations: property <background-position> from [center center] to [right 20px center] at (0.75) is [calc(-15px + 87.5%) 50%] assert_equals: expected "left calc ( - 15px + 87.5 % ) top 50 % " but got "calc ( - 15px + 87.5 % ) 50 % " -FAIL Web Animations: property <background-position> from [center center] to [right 20px center] at (1) is [calc(-20px + 100%) 50%] assert_equals: expected "left calc ( - 20px + 100 % ) top 50 % " but got "calc ( - 20px + 100 % ) 50 % " +PASS Web Animations: property <background-position> from [center center] to [right 20px center] at (0) is [50% 50%] +PASS Web Animations: property <background-position> from [center center] to [right 20px center] at (0.25) is [calc(-5px + 62.5%) 50%] +PASS Web Animations: property <background-position> from [center center] to [right 20px center] at (0.5) is [calc(-10px + 75%) 50%] +PASS Web Animations: property <background-position> from [center center] to [right 20px center] at (0.75) is [calc(-15px + 87.5%) 50%] +PASS Web Animations: property <background-position> from [center center] to [right 20px center] at (1) is [calc(-20px + 100%) 50%] PASS Web Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0) is [50% 50%] PASS Web Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0.25) is [calc(5px + 37.5%) calc(-5px + 62.5%)] PASS Web Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0.5) is [calc(10px + 25%) calc(-10px + 75%)] PASS Web Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (0.75) is [calc(15px + 12.5%) calc(-15px + 87.5%)] PASS Web Animations: property <background-position> from [center center] to [left 20px bottom 20px] at (1) is [20px calc(-20px + 100%)] -FAIL Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0) is [50% 50%] assert_equals: expected "left 50 % top 50 % " but got "50 % 50 % " -FAIL Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0.25) is [50% calc(-5px + 62.5%)] assert_equals: expected "left 50 % top calc ( - 5px + 62.5 % ) " but got "50 % calc ( - 5px + 62.5 % ) " -FAIL Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0.5) is [50% calc(-10px + 75%)] assert_equals: expected "left 50 % top calc ( - 10px + 75 % ) " but got "50 % calc ( - 10px + 75 % ) " -FAIL Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0.75) is [50% calc(-15px + 87.5%)] assert_equals: expected "left 50 % top calc ( - 15px + 87.5 % ) " but got "50 % calc ( - 15px + 87.5 % ) " -FAIL Web Animations: property <background-position> from [center center] to [center bottom 20px] at (1) is [50% calc(-20px + 100%)] assert_equals: expected "left 50 % top calc ( - 20px + 100 % ) " but got "50 % calc ( - 20px + 100 % ) " +PASS Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0) is [50% 50%] +PASS Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0.25) is [50% calc(-5px + 62.5%)] +PASS Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0.5) is [50% calc(-10px + 75%)] +PASS Web Animations: property <background-position> from [center center] to [center bottom 20px] at (0.75) is [50% calc(-15px + 87.5%)] +PASS Web Animations: property <background-position> from [center center] to [center bottom 20px] at (1) is [50% calc(-20px + 100%)] PASS Web Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0) is [50% 50%] PASS Web Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0.25) is [calc(-5px + 62.5%) calc(-5px + 62.5%)] PASS Web Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0.5) is [calc(-10px + 75%) calc(-10px + 75%)] PASS Web Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (0.75) is [calc(-15px + 87.5%) calc(-15px + 87.5%)] PASS Web Animations: property <background-position> from [center center] to [right 20px bottom 20px] at (1) is [calc(-20px + 100%) calc(-20px + 100%)] +PASS Web Animations: property <background-position> from [center] to [bottom] at (0) is [50% 50%] +PASS Web Animations: property <background-position> from [center] to [bottom] at (0.25) is [50% 62.5%] +PASS Web Animations: property <background-position> from [center] to [bottom] at (0.5) is [50% 75%] +PASS Web Animations: property <background-position> from [center] to [bottom] at (0.75) is [50% 87.5%] +PASS Web Animations: property <background-position> from [center] to [bottom] at (1) is [50% 100%] Harness: the test ran to completion. diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation.html b/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation.html index de91281..14ccc92 100644 --- a/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation.html +++ b/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation.html @@ -96,11 +96,11 @@ assertInterpolation({ from: 'center center', to: 'center top 20px', }, [ - {at: 0, is: 'left 50% top 50%'}, - {at: 0.25, is: 'left 50% top calc(5px + 37.5%)'}, - {at: 0.5, is: 'left 50% top calc(10px + 25%)'}, - {at: 0.75, is: 'left 50% top calc(15px + 12.5%)'}, - {at: 1, is: 'left 50% top 20px'}, + {at: 0, is: '50% 50%'}, + {at: 0.25, is: '50% calc(5px + 37.5%)'}, + {at: 0.5, is: '50% calc(10px + 25%)'}, + {at: 0.75, is: '50% calc(15px + 12.5%)'}, + {at: 1, is: '50% 20px'}, ]); // right-top @@ -122,11 +122,11 @@ assertInterpolation({ from: 'center center', to: 'left 20px center', }, [ - {at: 0, is: 'left 50% top 50%'}, - {at: 0.25, is: 'left calc(5px + 37.5%) top 50%'}, - {at: 0.5, is: 'left calc(10px + 25%) top 50%'}, - {at: 0.75, is: 'left calc(15px + 12.5%) top 50%'}, - {at: 1, is: 'left 20px top 50%'}, + {at: 0, is: '50% 50%'}, + {at: 0.25, is: 'calc(5px + 37.5%) 50%'}, + {at: 0.5, is: 'calc(10px + 25%) 50%'}, + {at: 0.75, is: 'calc(15px + 12.5%) 50%'}, + {at: 1, is: '20px 50%'}, ]); // center-center @@ -148,11 +148,11 @@ assertInterpolation({ from: 'center center', to: 'right 20px center', }, [ - {at: 0, is: 'left 50% top 50%'}, - {at: 0.25, is: 'left calc(-5px + 62.5%) top 50%'}, - {at: 0.5, is: 'left calc(-10px + 75%) top 50%'}, - {at: 0.75, is: 'left calc(-15px + 87.5%) top 50%'}, - {at: 1, is: 'left calc(-20px + 100%) top 50%'}, + {at: 0, is: '50% 50%'}, + {at: 0.25, is: 'calc(-5px + 62.5%) 50%'}, + {at: 0.5, is: 'calc(-10px + 75%) 50%'}, + {at: 0.75, is: 'calc(-15px + 87.5%) 50%'}, + {at: 1, is: 'calc(-20px + 100%) 50%'}, ]); // left-bottom @@ -174,11 +174,11 @@ assertInterpolation({ from: 'center center', to: 'center bottom 20px', }, [ - {at: 0, is: 'left 50% top 50%'}, - {at: 0.25, is: 'left 50% top calc(-5px + 62.5%)'}, - {at: 0.5, is: 'left 50% top calc(-10px + 75%)'}, - {at: 0.75, is: 'left 50% top calc(-15px + 87.5%)'}, - {at: 1, is: 'left 50% top calc(-20px + 100%)'}, + {at: 0, is: '50% 50%'}, + {at: 0.25, is: '50% calc(-5px + 62.5%)'}, + {at: 0.5, is: '50% calc(-10px + 75%)'}, + {at: 0.75, is: '50% calc(-15px + 87.5%)'}, + {at: 1, is: '50% calc(-20px + 100%)'}, ]); // right-bottom @@ -193,5 +193,18 @@ assertInterpolation({ {at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, {at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'}, ]); + +// Single values +assertInterpolation({ + property: 'background-position', + from: 'center', + to: 'bottom', +}, [ + {at: 0, is: '50% 50%'}, + {at: 0.25, is: '50% 62.5%'}, + {at: 0.5, is: '50% 75%'}, + {at: 0.75, is: '50% 87.5%'}, + {at: 1, is: '50% 100%'}, +]); </script> </body> diff --git a/third_party/WebKit/LayoutTests/animations/responsive/background-position-responsive.html b/third_party/WebKit/LayoutTests/animations/responsive/background-position-responsive.html new file mode 100644 index 0000000..10f734c --- /dev/null +++ b/third_party/WebKit/LayoutTests/animations/responsive/background-position-responsive.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<script src="resources/responsive-test.js"></script> +<script> +assertCSSResponsive({ + property: 'background-position', + from: neutralKeyframe, + to: '100px 100px', + configurations: [{ + state: {underlying: '20px 60px'}, + expect: [ + {at: 0.25, is: '40px 70px'}, + {at: 0.75, is: '80px 90px'}, + ], + }, { + state: {underlying: '60px 20px'}, + expect: [ + {at: 0.25, is: '70px 40px'}, + {at: 0.75, is: '90px 80px'}, + ], + }], +}); + +assertCSSResponsive({ + property: 'background-position', + from: 'inherit', + to: '100px 100px', + configurations: [{ + state: {inherited: '20px 60px'}, + expect: [ + {at: 0.25, is: '40px 70px'}, + {at: 0.75, is: '80px 90px'}, + ], + }, { + state: {inherited: '60px 20px'}, + expect: [ + {at: 0.25, is: '70px 40px'}, + {at: 0.75, is: '90px 80px'}, + ], + }], +}); +</script> |