wpt / css / css-backgrounds / animations / background-size-composition.html

Status: FAIL | Duration: 290ms | Subtests: 12/84 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (12/84)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (-0.25) should be [ 75px 75px, 325px 325px]FAILassert_equals: expected "75px 75px , 325px 325px " but got "35px 35px , 285px 285px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0) should be [100px 100px, 300px 300px]FAILassert_equals: expected "100px 100px , 300px 300px " but got "60px 60px , 260px 260px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0.25) should be [125px 125px, 275px 275px]FAILassert_equals: expected "125px 125px , 275px 275px " but got "85px 85px , 235px 235px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0.5) should be [150px 150px, 250px 250px]FAILassert_equals: expected "150px 150px , 250px 250px " but got "110px 110px , 210px 210px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0.75) should be [175px 175px, 225px 225px]FAILassert_equals: expected "175px 175px , 225px 225px " but got "135px 135px , 185px 185px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (1) should be [200px 200px, 200px 200px]FAILassert_equals: expected "200px 200px , 200px 200px " but got "160px 160px , 160px 160px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (1.25) should be [225px 225px, 175px 175px]FAILassert_equals: expected "225px 225px , 175px 175px " but got "185px 185px , 135px 135px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (-0.25) should be [ 75px 75px, 325px 325px]FAILassert_equals: expected "75px 75px , 325px 325px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0) should be [100px 100px, 300px 300px]FAILassert_equals: expected "100px 100px , 300px 300px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0.25) should be [125px 125px, 275px 275px]FAILassert_equals: expected "125px 125px , 275px 275px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0.5) should be [150px 150px, 250px 250px]FAILassert_equals: expected "150px 150px , 250px 250px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (0.75) should be [175px 175px, 225px 225px]FAILassert_equals: expected "175px 175px , 225px 225px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (1) should be [200px 200px, 200px 200px]FAILassert_equals: expected "200px 200px , 200px 200px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px, 260px 260px] to add [160px 160px] at (1.25) should be [225px 225px, 175px 175px]FAILassert_equals: expected "225px 225px , 175px 175px " but got "40px 40px "
Compositing CSS Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (-0.25) should be [calc( 50px + 0%) calc(100px + 30%), 225% 230%]FAILassert_equals: expected "calc ( 0 % + 50px ) calc ( 30 % + 100px ) , 225 % 230 % " but got "calc ( - 20 % + 50px ) calc ( - 10 % + 100px ) , 205 % 190 % "
Compositing CSS Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0) should be [calc( 40px + 20%) calc( 80px + 40%), 200% 200%]FAILassert_equals: expected "calc ( 20 % + 40px ) calc ( 40 % + 80px ) , 200 % 200 % " but got "calc ( 0 % + 40px ) calc ( 0 % + 80px ) , 180 % 160 % "
Compositing CSS Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0.25) should be [calc( 30px + 40%) calc( 60px + 50%), 175% 170%]FAILassert_equals: expected "calc ( 40 % + 30px ) calc ( 50 % + 60px ) , 175 % 170 % " but got "calc ( 20 % + 30px ) calc ( 10 % + 60px ) , 155 % 130 % "
Compositing CSS Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0.5) should be [calc( 20px + 60%) calc( 40px + 60%), 150% 140%]FAILassert_equals: expected "calc ( 60 % + 20px ) calc ( 60 % + 40px ) , 150 % 140 % " but got "calc ( 40 % + 20px ) calc ( 20 % + 40px ) , 130 % 100 % "
Compositing CSS Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0.75) should be [calc( 10px + 80%) calc( 20px + 70%), 125% 110%]FAILassert_equals: expected "calc ( 80 % + 10px ) calc ( 70 % + 20px ) , 125 % 110 % " but got "calc ( 60 % + 10px ) calc ( 30 % + 20px ) , 105 % 70 % "
Compositing CSS Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (1) should be [ 100% 80%, 100% 80%]FAILassert_equals: expected "100 % 80 % , 100 % 80 % " but got "80 % 40 % , 80 % 40 % "
Compositing CSS Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (1.25) should be [calc(-10px + 120%) calc(-20px + 90%), 75% 50%]FAILassert_equals: expected "calc ( 120 % - 10px ) calc ( 90 % - 20px ) , 75 % 50 % " but got "calc ( 100 % - 10px ) calc ( 50 % - 20px ) , 55 % 10 % "
Compositing Web Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (-0.25) should be [calc( 50px + 0%) calc(100px + 30%), 225% 230%]FAILassert_equals: expected "calc ( 0 % + 50px ) calc ( 30 % + 100px ) , 225 % 230 % " but got "20 % 40 % "
Compositing Web Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0) should be [calc( 40px + 20%) calc( 80px + 40%), 200% 200%]FAILassert_equals: expected "calc ( 20 % + 40px ) calc ( 40 % + 80px ) , 200 % 200 % " but got "20 % 40 % "
Compositing Web Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0.25) should be [calc( 30px + 40%) calc( 60px + 50%), 175% 170%]FAILassert_equals: expected "calc ( 40 % + 30px ) calc ( 50 % + 60px ) , 175 % 170 % " but got "20 % 40 % "
Compositing Web Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0.5) should be [calc( 20px + 60%) calc( 40px + 60%), 150% 140%]FAILassert_equals: expected "calc ( 60 % + 20px ) calc ( 60 % + 40px ) , 150 % 140 % " but got "20 % 40 % "
Compositing Web Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (0.75) should be [calc( 10px + 80%) calc( 20px + 70%), 125% 110%]FAILassert_equals: expected "calc ( 80 % + 10px ) calc ( 70 % + 20px ) , 125 % 110 % " but got "20 % 40 % "
Compositing Web Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (1) should be [ 100% 80%, 100% 80%]FAILassert_equals: expected "100 % 80 % , 100 % 80 % " but got "20 % 40 % "
Compositing Web Animations: property <background-size> underlying [20% 40%] from add [40px 80px, 180% 160%] to add [80% 40%] at (1.25) should be [calc(-10px + 120%) calc(-20px + 90%), 75% 50%]FAILassert_equals: expected "calc ( 120 % - 10px ) calc ( 90 % - 20px ) , 75 % 50 % " but got "20 % 40 % "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (-0.25) should be [75px 75px]FAILassert_equals: expected "75px 75px " but got "85px 85px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0) should be [100px 100px]PASS
Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.25) should be [125px 125px]FAILassert_equals: expected "125px 125px " but got "115px 115px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.5) should be [150px 150px]FAILassert_equals: expected "150px 150px " but got "130px 130px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.75) should be [175px 175px]FAILassert_equals: expected "175px 175px " but got "145px 145px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1) should be [200px 200px]FAILassert_equals: expected "200px 200px " but got "160px 160px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1.25) should be [225px 225px]FAILassert_equals: expected "225px 225px " but got "175px 175px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (-0.25) should be [75px 75px]FAILassert_equals: expected "75px 75px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0) should be [100px 100px]FAILassert_equals: expected "100px 100px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.25) should be [125px 125px]FAILassert_equals: expected "125px 125px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.5) should be [150px 150px]FAILassert_equals: expected "150px 150px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.75) should be [175px 175px]FAILassert_equals: expected "175px 175px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1) should be [200px 200px]FAILassert_equals: expected "200px 200px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1.25) should be [225px 225px]FAILassert_equals: expected "225px 225px " but got "40px 40px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (-0.25) should be [75px 75px]FAILassert_equals: expected "75px 75px " but got "25px 25px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0) should be [100px 100px]FAILassert_equals: expected "100px 100px " but got "60px 60px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.25) should be [125px 125px]FAILassert_equals: expected "125px 125px " but got "95px 95px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.5) should be [150px 150px]FAILassert_equals: expected "150px 150px " but got "130px 130px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.75) should be [175px 175px]FAILassert_equals: expected "175px 175px " but got "165px 165px "
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (1) should be [200px 200px]PASS
Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (1.25) should be [225px 225px]FAILassert_equals: expected "225px 225px " but got "235px 235px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (-0.25) should be [75px 75px]FAILassert_equals: expected "75px 75px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0) should be [100px 100px]FAILassert_equals: expected "100px 100px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.25) should be [125px 125px]FAILassert_equals: expected "125px 125px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.5) should be [150px 150px]FAILassert_equals: expected "150px 150px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.75) should be [175px 175px]FAILassert_equals: expected "175px 175px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (1) should be [200px 200px]FAILassert_equals: expected "200px 200px " but got "40px 40px "
Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (1.25) should be [225px 225px]FAILassert_equals: expected "225px 225px " but got "40px 40px "
Compositing CSS Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (-0.25) should be [75px 125px]PASS
Compositing CSS Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0) should be [100px 150px]PASS
Compositing CSS Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.25) should be [125px 175px]PASS
Compositing CSS Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.5) should be [150px 200px]PASS
Compositing CSS Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.75) should be [175px 225px]PASS
Compositing CSS Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (1) should be [200px 250px]PASS
Compositing CSS Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (1.25) should be [225px 275px]PASS
Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (-0.25) should be [75px 125px]FAILassert_equals: expected "75px 125px " but got "auto , contain "
Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0) should be [100px 150px]FAILassert_equals: expected "100px 150px " but got "auto , contain "
Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.25) should be [125px 175px]FAILassert_equals: expected "125px 175px " but got "auto , contain "
Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.5) should be [150px 200px]FAILassert_equals: expected "150px 200px " but got "auto , contain "
Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.75) should be [175px 225px]FAILassert_equals: expected "175px 225px " but got "auto , contain "
Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (1) should be [200px 250px]FAILassert_equals: expected "200px 250px " but got "auto , contain "
Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (1.25) should be [225px 275px]FAILassert_equals: expected "225px 275px " but got "auto , contain "
Compositing CSS Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (-0.25) should be [auto 75px, contain]FAILassert_equals: expected "auto 75px , contain " but got "auto 100px , contain "
Compositing CSS Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0) should be [auto 100px, contain]PASS
Compositing CSS Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0.25) should be [auto 125px, contain]FAILassert_equals: expected "auto 125px , contain " but got "auto 100px , contain "
Compositing CSS Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0.5) should be [auto 150px, contain]FAILassert_equals: expected "auto 150px , contain " but got "auto 200px , contain "
Compositing CSS Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0.75) should be [auto 175px, contain]FAILassert_equals: expected "auto 175px , contain " but got "auto 200px , contain "
Compositing CSS Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (1) should be [auto 200px, contain]PASS
Compositing CSS Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (1.25) should be [auto 225px, contain]FAILassert_equals: expected "auto 225px , contain " but got "auto 200px , contain "
Compositing Web Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (-0.25) should be [auto 75px, contain]FAILassert_equals: expected "auto 75px , contain " but got "auto 100px , contain "
Compositing Web Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0) should be [auto 100px, contain]PASS
Compositing Web Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0.25) should be [auto 125px, contain]FAILassert_equals: expected "auto 125px , contain " but got "auto 100px , contain "
Compositing Web Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0.5) should be [auto 150px, contain]FAILassert_equals: expected "auto 150px , contain " but got "auto 100px , contain "
Compositing Web Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (0.75) should be [auto 175px, contain]FAILassert_equals: expected "auto 175px , contain " but got "auto 100px , contain "
Compositing Web Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (1) should be [auto 200px, contain]FAILassert_equals: expected "auto 200px , contain " but got "auto 100px , contain "
Compositing Web Animations: property <background-size> underlying [auto 100px, contain] from add [[object Object]] to replace [auto 200px, contain] at (1.25) should be [auto 225px, contain]FAILassert_equals: expected "auto 225px , contain " but got "auto 100px , contain "

/css/css-backgrounds/animations/background-size-composition.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>background-size composition</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
  background-image: url(), url();
}
</style>
<body>
<script>
test_composition({
  property: 'background-size',
  underlying: '40px 40px',              // intepreted as [  40px  40px,  40px  40px] via repetition
  addFrom: '60px 60px, 260px 260px',
  addTo: '160px 160px',                 // intepreted as [ 160px 160px, 160px 160px] via repetition
}, [
  {at: -0.25, expect: ' 75px  75px, 325px 325px'},
  {at: 0, expect:     '100px 100px, 300px 300px'},
  {at: 0.25, expect:  '125px 125px, 275px 275px'},
  {at: 0.5, expect:   '150px 150px, 250px 250px'},
  {at: 0.75, expect:  '175px 175px, 225px 225px'},
  {at: 1, expect:     '200px 200px, 200px 200px'},
  {at: 1.25, expect:  '225px 225px, 175px 175px'},
]);

test_composition({
  property: 'background-size',
  underlying: '20% 40%',            // intepreted as [ 20% 40%, 20% 40%] via repetition
  addFrom: '40px 80px, 180% 160%',
  addTo: '80% 40%',                 // intepreted as [ 80% 40%, 80% 40%] via repetition
}, [
  {at: -0.25, expect: 'calc( 50px +   0%) calc(100px + 30%), 225% 230%'},
  {at: 0, expect:     'calc( 40px +  20%) calc( 80px + 40%), 200% 200%'},
  {at: 0.25, expect:  'calc( 30px +  40%) calc( 60px + 50%), 175% 170%'},
  {at: 0.5, expect:   'calc( 20px +  60%) calc( 40px + 60%), 150% 140%'},
  {at: 0.75, expect:  'calc( 10px +  80%) calc( 20px + 70%), 125% 110%'},
  {at: 1, expect:     '             100%               80%,  100%  80%'},
  {at: 1.25, expect:  'calc(-10px + 120%) calc(-20px + 90%),  75%  50%'},
]);

test_composition({
  property: 'background-size',
  underlying: '40px 40px',
  replaceFrom: '100px 100px',
  addTo: '160px 160px',
}, [
  {at: -0.25, expect: '75px 75px'},
  {at: 0, expect: '100px 100px'},
  {at: 0.25, expect: '125px 125px'},
  {at: 0.5, expect: '150px 150px'},
  {at: 0.75, expect: '175px 175px'},
  {at: 1, expect: '200px 200px'},
  {at: 1.25, expect: '225px 225px'},
]);

test_composition({
  property: 'background-size',
  underlying: '40px 40px',
  addFrom: '60px 60px',
  replaceTo: '200px 200px',
}, [
  {at: -0.25, expect: '75px 75px'},
  {at: 0, expect: '100px 100px'},
  {at: 0.25, expect: '125px 125px'},
  {at: 0.5, expect: '150px 150px'},
  {at: 0.75, expect: '175px 175px'},
  {at: 1, expect: '200px 200px'},
  {at: 1.25, expect: '225px 225px'},
]);

test_composition({
  property: 'background-size',
  underlying: 'auto, contain',
  addFrom: '100px 150px',
  replaceTo: '200px 250px',
}, [
  {at: -0.25, expect: '75px 125px'},
  {at: 0, expect: '100px 150px'},
  {at: 0.25, expect: '125px 175px'},
  {at: 0.5, expect: '150px 200px'},
  {at: 0.75, expect: '175px 225px'},
  {at: 1, expect: '200px 250px'},
  {at: 1.25, expect: '225px 275px'},
]);

test_composition({
  property: 'background-size',
  underlying: 'auto 100px, contain',
  addFrom: neutralKeyframe,
  replaceTo: 'auto 200px, contain',
}, [
  {at: -0.25, expect: 'auto 75px, contain'},
  {at: 0, expect: 'auto 100px, contain'},
  {at: 0.25, expect: 'auto 125px, contain'},
  {at: 0.5, expect: 'auto 150px, contain'},
  {at: 0.75, expect: 'auto 175px, contain'},
  {at: 1, expect: 'auto 200px, contain'},
  {at: 1.25, expect: 'auto 225px, contain'},
]);
</script>
</body>