WPT
wpt / css / css-backgrounds / animations / background-size-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 | 84/84 | 74/84 | 84/84 | 84/84 | 38/84 | 12/84 |
| Subtest | Chrome | Firefox | Safari | Ladybird | Servo | Blitz |
|---|---|---|---|---|---|---|
| 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | PASS | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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%] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (-0.25) should be [75px 75px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0) should be [100px 100px] | PASS | PASS | PASS | PASS | PASS | 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.5) should be [150px 150px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.75) should be [175px 175px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1) should be [200px 200px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1.25) should be [225px 225px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (-0.25) should be [75px 75px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0) should be [100px 100px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.25) should be [125px 125px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.5) should be [150px 150px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (0.75) should be [175px 175px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1) should be [200px 200px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from replace [100px 100px] to add [160px 160px] at (1.25) should be [225px 225px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (-0.25) should be [75px 75px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0) should be [100px 100px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.25) should be [125px 125px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.5) should be [150px 150px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.75) should be [175px 175px] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing CSS Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (1) should be [200px 200px] | PASS | PASS | PASS | PASS | PASS | 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] | PASS | PASS | PASS | PASS | PASS | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (-0.25) should be [75px 75px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0) should be [100px 100px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.25) should be [125px 125px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.5) should be [150px 150px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (0.75) should be [175px 175px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (1) should be [200px 200px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [40px 40px] from add [60px 60px] to replace [200px 200px] at (1.25) should be [225px 225px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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 | PASS | PASS | PASS | PASS | 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 | PASS | PASS | PASS | PASS | 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 | PASS | PASS | PASS | PASS | 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 | PASS | PASS | PASS | PASS | 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 | PASS | PASS | PASS | PASS | 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 | PASS | PASS | PASS | PASS | 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 | PASS | PASS | PASS | PASS | 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0) should be [100px 150px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.25) should be [125px 175px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.5) should be [150px 200px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (0.75) should be [175px 225px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (1) should be [200px 250px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| Compositing Web Animations: property <background-size> underlying [auto, contain] from add [100px 150px] to replace [200px 250px] at (1.25) should be [225px 275px] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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 | PASS | PASS | PASS | PASS | 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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 | PASS | PASS | PASS | PASS | 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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 | PASS | PASS | PASS | PASS | 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |
| 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] | PASS | PASS | PASS | PASS | FAIL | FAIL |
| 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] | PASS | FAIL | PASS | PASS | FAIL | FAIL |