| author | Stephen McGruer <smcgruer@chromium.org> |
| Mon, 26 Aug 2019 11:23:26 +0000 | |
| changeset 553906 | bae26d2d80dc75d674d481a99af12c2500f33b0e |
| parent 553905 | 361984cceb6672b15cfdcb8b9db3e4b84cb4a397 |
| child 553907 | f9b465501368bb06ce08e701011b2188fd9622cc |
| push id | 2165 |
| push user | ffxbld-merge |
| push date | Mon, 14 Oct 2019 16:30:58 +0000 |
| treeherder | mozilla-release@0eae18af659f [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | testonly |
| bugs | 1574941, 18547, 900581, 1756984, 688099 |
| milestone | 70.0a1 |
| first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-interpolation.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color"> +<meta name="test" content="background-color supports animation as a <color>"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-color: #eee; +} +.target { + width: 60px; + height: 60px; + display: inline-block; + border: 2px solid black; + margin-right: 2px; + color: rgba(0, 0, 255, 0.5); + background-color: black; +} +.expected { + margin-right: 15px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'background-color', + from: neutralKeyframe, + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(0, 38, 0)'}, + {at: 0.6, expect: 'rgb(0, 77, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'initial', + to: 'green', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'}, + {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'inherit', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(255, 255, 255)'}, + {at: 0, expect: 'rgb(238, 238, 238)'}, + {at: 0.3, expect: 'rgb(167, 205, 167)'}, + {at: 0.6, expect: 'rgb(95, 172, 95)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 73, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'unset', + to: 'green', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'}, + {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'white', + to: 'orange', +}, [ + {at: -0.3, expect: 'white'}, + {at: 0, expect: 'white'}, + {at: 0.3, expect: 'rgb(255, 228, 179)'}, + {at: 0.6, expect: 'rgb(255, 201, 102)'}, + {at: 1, expect: 'orange'}, + {at: 1.5, expect: 'rgb(255, 120, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'transparent', + to: 'green', +}, [ + {at: -0.3, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0, expect: 'rgba(0, 0, 0, 0)'}, + {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'}, + {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'background-color', + from: 'currentcolor', + to: 'rgba(0, 255, 0, 0.75)', +}, [ + {at: -0.5, expect: 'rgba(0, 0, 255, 0.38)'}, + {at: 0, expect: 'rgba(0, 0, 255, 0.5)'}, + {at: 0.25, expect: 'rgba(0, 85, 170, 0.56)'}, + {at: 0.5, expect: 'rgba(0, 153, 102, 0.63)'}, + {at: 0.75, expect: 'rgba(0, 208, 47, 0.69)'}, + {at: 1, expect: 'rgba(0, 255, 0, 0.75)'}, + {at: 1.5, expect: 'rgba(0, 255, 0, 0.88)'}, +]); +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-interpolation.html @@ -0,0 +1,134 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> +<meta name="test" content="background-position supports animation as a repeatable list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-position: 60px 60px; +} +.target { + width: 120px; + height: 120px; + display: inline-block; + border: 2px solid black; + background-repeat: no-repeat; + background-image: radial-gradient(20px circle at 20px 20px, red 18px, transparent), + radial-gradient(20px circle at 20px 20px, yellow 18px, transparent), + radial-gradient(20px circle at 20px 20px, lime 18px, transparent), + radial-gradient(20px circle at 20px 20px, blue 18px, transparent); + background-position: 40px 40px; +} +.expected { + margin-right: 10px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'background-position', + from: neutralKeyframe, + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '30px 30px, 30px 30px, 30px 30px, 30px 30px'}, + {at: 0, expect: '40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.25, expect: '50px 50px, 50px 50px, 50px 50px, 50px 50px'}, + {at: 0.5, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 0.75, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'}, + {at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '90px 90px, 90px 90px, 90px 90px, 90px 90px'}, +]); + +test_interpolation({ + property: 'background-position', + from: 'initial', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, + {at: 0, expect: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '}, // TODO(alancutter): Should these be 0px? + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +test_interpolation({ + property: 'background-position', + from: 'inherit', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '55px 55px, 55px 55px, 55px 55px, 55px 55px'}, + {at: 0, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 0.25, expect: '65px 65px, 65px 65px, 65px 65px, 65px 65px'}, + {at: 0.5, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'}, + {at: 0.75, expect: '75px 75px, 75px 75px, 75px 75px, 75px 75px'}, + {at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '85px 85px, 85px 85px, 85px 85px, 85px 85px'}, +]); + +test_interpolation({ + property: 'background-position', + from: 'unset', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, + {at: 0, expect: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +// Test equal number of position values as background images. +test_interpolation({ + property: 'background-position', + from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', + to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', +}, [ + {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +// Test single position value repeated over background images. +test_interpolation({ + property: 'background-position', + from: 'top 0px left 0px', + to: 'left 80px top 80px', +}, [ + {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +// Test mismatched numbers of position values. +test_interpolation({ + property: 'background-position', + from: '0px 0px, 80px 0px', + to: '40px 40px, 80px 80px, 0px 80px', +}, [ + {at: -0.25, expect: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, + {at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, + {at: 0.25, expect: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, + {at: 0.5, expect: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, + {at: 0.75, expect: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, + {at: 1, expect: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, + {at: 1.25, expect: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, +]); +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-origin-interpolation.html @@ -0,0 +1,217 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> +<meta name="test" content="background-position animation handles origin parameters"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-position: 80px 80px; +} +.target { + border: 3px solid skyblue; + width: 100px; + height: 100px; + background-image: linear-gradient(to right, green, green); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: 10px 10px; + display: inline-block; +} + +.actual { + background-image: linear-gradient(to right, red, red); +} +.expected { + margin-left: -106px; +} +</style> + +<body></body> + +<script> +// neutral +test_interpolation({ + property: 'background-position', + from: neutralKeyframe, + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '10px 10px'}, + {at: 0.25, expect: '12.5px 12.5px'}, + {at: 0.5, expect: '15px 15px'}, + {at: 0.75, expect: '17.5px 17.5px'}, + {at: 1, expect: '20px 20px'}, +]); + +// initial +test_interpolation({ + property: 'background-position', + from: 'initial', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '0% 0%'}, + {at: 0.25, expect: '5px 5px'}, + {at: 0.5, expect: '10px 10px'}, + {at: 0.75, expect: '15px 15px'}, + {at: 1, expect: '20px 20px'}, +]); + +// inherit +test_interpolation({ + property: 'background-position', + from: 'inherit', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '80px 80px'}, + {at: 0.25, expect: '65px 65px'}, + {at: 0.5, expect: '50px 50px'}, + {at: 0.75, expect: '35px 35px'}, + {at: 1, expect: '20px 20px'}, +]); + +// unset +test_interpolation({ + property: 'background-position', + from: 'unset', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '0% 0%'}, + {at: 0.25, expect: '5px 5px'}, + {at: 0.5, expect: '10px 10px'}, + {at: 0.75, expect: '15px 15px'}, + {at: 1, expect: '20px 20px'}, +]); + +// left-top +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'left 20px top 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(5px + 37.5%) calc(5px + 37.5%)'}, + {at: 0.5, expect: 'calc(10px + 25%) calc(10px + 25%)'}, + {at: 0.75, expect: 'calc(15px + 12.5%) calc(15px + 12.5%)'}, + {at: 1, expect: '20px 20px'}, +]); + +// center-top +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'center top 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% calc(5px + 37.5%)'}, + {at: 0.5, expect: '50% calc(10px + 25%)'}, + {at: 0.75, expect: '50% calc(15px + 12.5%)'}, + {at: 1, expect: '50% 20px'}, +]); + +// right-top +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'right 20px top 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(-5px + 62.5%) calc(5px + 37.5%)'}, + {at: 0.5, expect: 'calc(-10px + 75%) calc(10px + 25%)'}, + {at: 0.75, expect: 'calc(-15px + 87.5%) calc(15px + 12.5%)'}, + {at: 1, expect: 'calc(-20px + 100%) 20px'}, +]); + +// left-center +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'left 20px center', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(5px + 37.5%) 50%'}, + {at: 0.5, expect: 'calc(10px + 25%) 50%'}, + {at: 0.75, expect: 'calc(15px + 12.5%) 50%'}, + {at: 1, expect: '20px 50%'}, +]); + +// center-center +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'center center', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% 50%'}, + {at: 0.5, expect: '50% 50%'}, + {at: 0.75, expect: '50% 50%'}, + {at: 1, expect: '50% 50%'}, +]); + +// right-center +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'right 20px center', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(-5px + 62.5%) 50%'}, + {at: 0.5, expect: 'calc(-10px + 75%) 50%'}, + {at: 0.75, expect: 'calc(-15px + 87.5%) 50%'}, + {at: 1, expect: 'calc(-20px + 100%) 50%'}, +]); + +// left-bottom +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'left 20px bottom 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(5px + 37.5%) calc(-5px + 62.5%)'}, + {at: 0.5, expect: 'calc(10px + 25%) calc(-10px + 75%)'}, + {at: 0.75, expect: 'calc(15px + 12.5%) calc(-15px + 87.5%)'}, + {at: 1, expect: '20px calc(-20px + 100%)'}, +]); + +// center-bottom +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'center bottom 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% calc(-5px + 62.5%)'}, + {at: 0.5, expect: '50% calc(-10px + 75%)'}, + {at: 0.75, expect: '50% calc(-15px + 87.5%)'}, + {at: 1, expect: '50% calc(-20px + 100%)'}, +]); + +// right-bottom +test_interpolation({ + property: 'background-position', + from: 'center center', + to: 'right 20px bottom 20px', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'}, + {at: 0.5, expect: 'calc(-10px + 75%) calc(-10px + 75%)'}, + {at: 0.75, expect: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, + {at: 1, expect: 'calc(-20px + 100%) calc(-20px + 100%)'}, +]); + +// Single values +test_interpolation({ + property: 'background-position', + from: 'center', + to: 'bottom', +}, [ + {at: 0, expect: '50% 50%'}, + {at: 0.25, expect: '50% 62.5%'}, + {at: 0.5, expect: '50% 75%'}, + {at: 0.75, expect: '50% 87.5%'}, + {at: 1, expect: '50% 100%'}, +]); +</script>
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-size-interpolation.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size"> +<meta name="test" content="background-size supports animation as a repeatable list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + background-size: 100px 100px; +} +.target { + width: 80px; + height: 100px; + display: inline-block; + border: 10px solid black; + background-repeat: no-repeat; + background-image: url(../resources/stripes-100.png), + url(../resources/stripes-100.png), + url(../resources/blue-100.png), + url(../resources/green-100.png); + background-position: left top, right top, left bottom, right bottom; + background-size: 10px 10px; +} +.expected { + margin-right: 10px; + border-color: green; +} +</style> + +<body></body> + +<script> +// neutral +test_interpolation({ + property: 'background-size', + from: neutralKeyframe, + to: '20px 20px, 0px 0px', +}, [ + {at: -0.25, expect: ' 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px'}, + {at: 0, expect: '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'}, + {at: 0.25, expect: '12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px'}, + {at: 0.5, expect: '15.0px 15.0px, 5.0px 5.0px, 15.0px 15.0px, 5.0px 5.0px'}, + {at: 0.75, expect: '17.5px 17.5px, 2.5px 2.5px, 17.5px 17.5px, 2.5px 2.5px'}, + {at: 1, expect: '20.0px 20.0px, 0.0px 0.0px, 20.0px 20.0px, 0.0px 0.0px'}, + {at: 1.25, expect: '22.5px 22.5px, 0.0px 0.0px, 22.5px 22.5px, 0.0px 0.0px'}, +]); + +// initial +test_no_interpolation({ + property: 'background-size', + from: 'initial', + to: '20px 20px, 0px 0px', +}); + +// inherit +test_interpolation({ + property: 'background-size', + from: 'inherit', + to: '20px 20px, 0px 0px', +}, [ + {at: -0.25, expect: '120px 120px, 125px 125px, 120px 120px, 125px 125px'}, + {at: 0, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, + {at: 0.25, expect: ' 80px 80px, 75px 75px, 80px 80px, 75px 75px'}, + {at: 0.5, expect: ' 60px 60px, 50px 50px, 60px 60px, 50px 50px'}, + {at: 0.75, expect: ' 40px 40px, 25px 25px, 40px 40px, 25px 25px'}, + {at: 1, expect: ' 20px 20px, 0px 0px, 20px 20px, 0px 0px'}, + {at: 1.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, +]); + +// unset +test_no_interpolation({ + property: 'background-size', + from: 'unset', + to: '20px 20px, 0px 0px', +}); + +// Matched keywords in size value list. +test_interpolation({ + property: 'background-size', + from: '0px auto, 0px 0px, contain, cover', + to: '40px auto, 40px 40px, contain, cover', +}, [ + {at: -0.25, expect: ' 0px auto, 0px 0px, contain, cover'}, + {at: 0, expect: ' 0px auto, 0px 0px, contain, cover'}, + {at: 0.25, expect: '10px auto, 10px 10px, contain, cover'}, + {at: 0.5, expect: '20px auto, 20px 20px, contain, cover'}, + {at: 0.75, expect: '30px auto, 30px 30px, contain, cover'}, + {at: 1, expect: '40px auto, 40px 40px, contain, cover'}, + {at: 1.25, expect: '50px auto, 50px 50px, contain, cover'}, +]); + +// Mismatched keywords in size value list. +test_no_interpolation({ + property: 'background-size', + from: '0px 0px, 0px 0px, contain, cover', + to: '40px 40px, 40px 40px, cover, contain', +}); + +test_no_interpolation({ + property: 'background-size', + from: '0px auto, 0px 0px', + to: 'auto 40px, 40px 40px', +}); + +// Equal number of size values as background images. +test_interpolation({ + property: 'background-size', + from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', + to: '20px 20px, 40px 40px, 60px 60px, 100px 100px', +}, [ + {at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 5px 5px, 10px 10px, 15px 15px, 25px 25px'}, + {at: 0.5, expect: '10px 10px, 20px 20px, 30px 30px, 50px 50px'}, + {at: 0.75, expect: '15px 15px, 30px 30px, 45px 45px, 75px 75px'}, + {at: 1, expect: '20px 20px, 40px 40px, 60px 60px, 100px 100px'}, + {at: 1.25, expect: '25px 25px, 50px 50px, 75px 75px, 125px 125px'}, +]); + +// Single size value repeated over background images. +test_interpolation({ + property: 'background-size', + from: '0px 0px', + to: '80px 80px', +}, [ + {at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, + {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, + {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, + {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, + {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, + {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, +]); + +test_interpolation({ + property: 'background-size', + from: '0px', + to: '80px', +}, [ + {at: -0.25, expect: ' 0px, 0px, 0px, 0px'}, + {at: 0, expect: ' 0px, 0px, 0px, 0px'}, + {at: 0.25, expect: ' 20px, 20px, 20px, 20px'}, + {at: 0.5, expect: ' 40px, 40px, 40px, 40px'}, + {at: 0.75, expect: ' 60px, 60px, 60px, 60px'}, + {at: 1, expect: ' 80px, 80px, 80px, 80px'}, + {at: 1.25, expect: '100px, 100px, 100px, 100px'}, +]); + +// Mismatched numbers of size values. +test_interpolation({ + property: 'background-size', + from: '0px 0px, 80px 0px', + to: '40px 40px, 80px 80px, 0px 80px', +}, [ + {at: -0.25, expect: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'}, + {at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, + {at: 0.25, expect: '10px 10px, 80px 20px, 0px 20px, 70px 10px'}, + {at: 0.5, expect: '20px 20px, 80px 40px, 0px 40px, 60px 20px'}, + {at: 0.75, expect: '30px 30px, 80px 60px, 0px 60px, 50px 30px'}, + {at: 1, expect: '40px 40px, 80px 80px, 0px 80px, 40px 40px'}, + {at: 1.25, expect: '50px 50px, 80px 100px, 0px 100px, 30px 50px'}, +]); +</script>