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

Status: FAIL | Duration: 287ms | Subtests: 2/70 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (2/70)

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

SubtestStatusMessage
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (-0.25) should be [75px 275px]FAILassert_equals: expected "75px 275px " but got "35px 135px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0) should be [100px 300px]FAILassert_equals: expected "100px 300px " but got "60px 160px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.25) should be [125px 325px]FAILassert_equals: expected "125px 325px " but got "85px 185px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.5) should be [150px 350px]FAILassert_equals: expected "150px 350px " but got "110px 210px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.75) should be [175px 375px]FAILassert_equals: expected "175px 375px " but got "135px 235px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1) should be [200px 400px]FAILassert_equals: expected "200px 400px " but got "160px 260px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1.25) should be [225px 425px]FAILassert_equals: expected "225px 425px " but got "185px 285px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (-0.25) should be [75px 275px]FAILassert_equals: expected "75px 275px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0) should be [100px 300px]FAILassert_equals: expected "100px 300px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.25) should be [125px 325px]FAILassert_equals: expected "125px 325px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.5) should be [150px 350px]FAILassert_equals: expected "150px 350px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.75) should be [175px 375px]FAILassert_equals: expected "175px 375px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1) should be [200px 400px]FAILassert_equals: expected "200px 400px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1.25) should be [225px 425px]FAILassert_equals: expected "225px 425px " but got "40px 140px "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (-0.25) should be [110% 105%]FAILassert_equals: expected "110 % 105 % " but got "70 % 85 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0) should be [100% 100%]FAILassert_equals: expected "100 % 100 % " but got "60 % 80 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0.25) should be [90% 95%]FAILassert_equals: expected "90 % 95 % " but got "50 % 75 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0.5) should be [80% 90%]FAILassert_equals: expected "80 % 90 % " but got "40 % 70 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0.75) should be [70% 85%]FAILassert_equals: expected "70 % 85 % " but got "30 % 65 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (1) should be [60% 80%]FAILassert_equals: expected "60 % 80 % " but got "20 % 60 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (1.25) should be [50% 75%]FAILassert_equals: expected "50 % 75 % " but got "10 % 55 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (-0.25) should be [110% 105%]FAILassert_equals: expected "110 % 105 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0) should be [100% 100%]FAILassert_equals: expected "100 % 100 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0.25) should be [90% 95%]FAILassert_equals: expected "90 % 95 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0.5) should be [80% 90%]FAILassert_equals: expected "80 % 90 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (0.75) should be [70% 85%]FAILassert_equals: expected "70 % 85 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (1) should be [60% 80%]FAILassert_equals: expected "60 % 80 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%] to add [right 80% bottom 40%] at (1.25) should be [50% 75%]FAILassert_equals: expected "50 % 75 % " but got "40 % 20 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (-0.25) should be [110% 105%, 235% 230%]FAILassert_equals: expected "110 % 105 % , 235 % 230 % " but got "70 % 85 % , 195 % 210 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0) should be [100% 100%, 200% 200%]FAILassert_equals: expected "100 % 100 % , 200 % 200 % " but got "60 % 80 % , 160 % 180 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0.25) should be [90% 95%, 165% 170%]FAILassert_equals: expected "90 % 95 % , 165 % 170 % " but got "50 % 75 % , 125 % 150 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0.5) should be [80% 90%, 130% 140%]FAILassert_equals: expected "80 % 90 % , 130 % 140 % " but got "40 % 70 % , 90 % 120 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0.75) should be [70% 85%, 95% 110%]FAILassert_equals: expected "70 % 85 % , 95 % 110 % " but got "30 % 65 % , 55 % 90 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (1) should be [60% 80%, 60% 80%]FAILassert_equals: expected "60 % 80 % , 60 % 80 % " but got "20 % 60 % , 20 % 60 % "
Compositing CSS Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (1.25) should be [50% 75%, 25% 50%]FAILassert_equals: expected "50 % 75 % , 25 % 50 % " but got "10 % 55 % , - 15 % 30 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (-0.25) should be [110% 105%, 235% 230%]FAILassert_equals: expected "110 % 105 % , 235 % 230 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0) should be [100% 100%, 200% 200%]FAILassert_equals: expected "100 % 100 % , 200 % 200 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0.25) should be [90% 95%, 165% 170%]FAILassert_equals: expected "90 % 95 % , 165 % 170 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0.5) should be [80% 90%, 130% 140%]FAILassert_equals: expected "80 % 90 % , 130 % 140 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (0.75) should be [70% 85%, 95% 110%]FAILassert_equals: expected "70 % 85 % , 95 % 110 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (1) should be [60% 80%, 60% 80%]FAILassert_equals: expected "60 % 80 % , 60 % 80 % " but got "40 % 20 % "
Compositing Web Animations: property <background-position> underlying [top 20% left 40%] from add [left 60% top 80%, top 180% left 160%] to add [right 80% bottom 40%] at (1.25) should be [50% 75%, 25% 50%]FAILassert_equals: expected "50 % 75 % , 25 % 50 % " but got "40 % 20 % "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (-0.25) should be [75px 150px]FAILassert_equals: expected "75px 150px " but got "85px 185px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0) should be [100px 200px]PASS
Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.25) should be [125px 250px]FAILassert_equals: expected "125px 250px " but got "115px 215px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.5) should be [150px 300px]FAILassert_equals: expected "150px 300px " but got "130px 230px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.75) should be [175px 350px]FAILassert_equals: expected "175px 350px " but got "145px 245px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1) should be [200px 400px]FAILassert_equals: expected "200px 400px " but got "160px 260px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1.25) should be [225px 450px]FAILassert_equals: expected "225px 450px " but got "175px 275px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (-0.25) should be [75px 150px]FAILassert_equals: expected "75px 150px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0) should be [100px 200px]FAILassert_equals: expected "100px 200px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.25) should be [125px 250px]FAILassert_equals: expected "125px 250px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.5) should be [150px 300px]FAILassert_equals: expected "150px 300px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.75) should be [175px 350px]FAILassert_equals: expected "175px 350px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1) should be [200px 400px]FAILassert_equals: expected "200px 400px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1.25) should be [225px 450px]FAILassert_equals: expected "225px 450px " but got "40px 140px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (-0.25) should be [75px 275px]FAILassert_equals: expected "75px 275px " but got "25px 100px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0) should be [100px 300px]FAILassert_equals: expected "100px 300px " but got "60px 160px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.25) should be [125px 325px]FAILassert_equals: expected "125px 325px " but got "95px 220px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.5) should be [150px 350px]FAILassert_equals: expected "150px 350px " but got "130px 280px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.75) should be [175px 375px]FAILassert_equals: expected "175px 375px " but got "165px 340px "
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (1) should be [200px 400px]PASS
Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (1.25) should be [225px 425px]FAILassert_equals: expected "225px 425px " but got "235px 460px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (-0.25) should be [75px 275px]FAILassert_equals: expected "75px 275px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0) should be [100px 300px]FAILassert_equals: expected "100px 300px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.25) should be [125px 325px]FAILassert_equals: expected "125px 325px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.5) should be [150px 350px]FAILassert_equals: expected "150px 350px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.75) should be [175px 375px]FAILassert_equals: expected "175px 375px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (1) should be [200px 400px]FAILassert_equals: expected "200px 400px " but got "40px 140px "
Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (1.25) should be [225px 425px]FAILassert_equals: expected "225px 425px " but got "40px 140px "

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

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

test_composition({
  property: 'background-position',
  underlying: 'top 20% left 40%',
  addFrom: 'left 60% top 80%',
  addTo: 'right 80% bottom 40%',
}, [
  {at: -0.25, expect: '110% 105%'},
  {at: 0, expect: '100% 100%'},
  {at: 0.25, expect: '90% 95%'},
  {at: 0.5, expect: '80% 90%'},
  {at: 0.75, expect: '70% 85%'},
  {at: 1, expect: '60% 80%'},
  {at: 1.25, expect: '50% 75%'},
]);

test_composition({
  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, expect: '110% 105%, 235% 230%'},
  {at: 0, expect: '100% 100%, 200% 200%'},
  {at: 0.25, expect: '90% 95%, 165% 170%'},
  {at: 0.5, expect: '80% 90%, 130% 140%'},
  {at: 0.75, expect: '70% 85%, 95% 110%'},
  {at: 1, expect: '60% 80%, 60% 80%'},
  {at: 1.25, expect: '50% 75%, 25% 50%'},
]);

test_composition({
  property: 'background-position',
  underlying: '40px 140px',
  replaceFrom: '100px 200px',
  addTo: '160px 260px',
}, [
  {at: -0.25, expect: '75px 150px'},
  {at: 0, expect: '100px 200px'},
  {at: 0.25, expect: '125px 250px'},
  {at: 0.5, expect: '150px 300px'},
  {at: 0.75, expect: '175px 350px'},
  {at: 1, expect: '200px 400px'},
  {at: 1.25, expect: '225px 450px'},
]);

test_composition({
  property: 'background-position',
  underlying: '40px 140px',
  addFrom: '60px 160px',
  replaceTo: '200px 400px',
}, [
  {at: -0.25, expect: '75px 275px'},
  {at: 0, expect: '100px 300px'},
  {at: 0.25, expect: '125px 325px'},
  {at: 0.5, expect: '150px 350px'},
  {at: 0.75, expect: '175px 375px'},
  {at: 1, expect: '200px 400px'},
  {at: 1.25, expect: '225px 425px'},
]);
</script>
</body>