WPT
wpt / css / css-backgrounds / animations / background-position-composition.html
Spec: CSS Backgrounds ↗
Runs: Chrome 155.0.8042.0 (wpt@0a3996025, 2026-09-04) | Firefox 157.0a1 (wpt@972e0e100, 2026-09-04) | Safari 251 preview (wpt@972e0e100, 2026-09-04) | Ladybird 1.0-3fd2d (wpt@c29bd2aee, 2026-09-04) | Servo Servo 0.6 (wpt@2c385f65e, 2026-09-04) | Blitz a50cb8971 (wpt@a95401e4e, 2026-09-03)
View on the Blitz WPT dashboard | Open test on wpt.live | wpt.fyi
| Chrome | Firefox | Safari | Ladybird | Servo | Blitz | |
|---|---|---|---|---|---|---|
| Total | 70/70 | 70/70 | 70/70 | 70/70 | 35/70 | 2/70 |
| Subtest | Chrome | Firefox | Safari | Ladybird | Servo | Blitz |
|---|---|---|---|---|---|---|
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (-0.25) should be [75px 275px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0) should be [100px 300px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.25) should be [125px 325px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.5) should be [150px 350px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.75) should be [175px 375px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1) should be [200px 400px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1.25) should be [225px 425px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (-0.25) should be [75px 275px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0) should be [100px 300px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.25) should be [125px 325px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.5) should be [150px 350px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (0.75) should be [175px 375px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1) should be [200px 400px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to add [160px 260px] at (1.25) should be [225px 425px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (-0.25) should be [75px 150px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0) should be [100px 200px] | PASS | PASS | PASS | PASS | PASS | 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.5) should be [150px 300px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.75) should be [175px 350px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1) should be [200px 400px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1.25) should be [225px 450px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (-0.25) should be [75px 150px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0) should be [100px 200px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.25) should be [125px 250px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.5) should be [150px 300px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (0.75) should be [175px 350px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1) should be [200px 400px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from replace [100px 200px] to add [160px 260px] at (1.25) should be [225px 450px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (-0.25) should be [75px 275px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0) should be [100px 300px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.25) should be [125px 325px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.5) should be [150px 350px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.75) should be [175px 375px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (1) should be [200px 400px] | PASS | PASS | PASS | PASS | PASS | 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (-0.25) should be [75px 275px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0) should be [100px 300px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.25) should be [125px 325px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.5) should be [150px 350px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (0.75) should be [175px 375px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (1) should be [200px 400px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-position> underlying [40px 140px] from add [60px 160px] to replace [200px 400px] at (1.25) should be [225px 425px] | PASS | PASS | PASS | PASS | FAIL | FAIL |