Skip to content

Move animation/composition/background-*-composition.html to WPT #56191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 24, 2025
+198 −0
Merged

Move animation/composition/background-*-composition.html to WPT #56191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions css/css-backgrounds/animations/background-position-composition.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!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, 75px 275px'},
{at: 0, expect: '100px 300px, 100px 300px'},
{at: 0.25, expect: '125px 325px, 125px 325px'},
{at: 0.5, expect: '150px 350px, 150px 350px'},
{at: 0.75, expect: '175px 375px, 175px 375px'},
{at: 1, expect: '200px 400px, 200px 400px'},
{at: 1.25, expect: '225px 425px, 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%, 110% 105%'},
{at: 0, expect: '100% 100%, 100% 100%'},
{at: 0.25, expect: '90% 95%, 90% 95%'},
{at: 0.5, expect: '80% 90%, 80% 90%'},
{at: 0.75, expect: '70% 85%, 70% 85%'},
{at: 1, expect: '60% 80%, 60% 80%'},
{at: 1.25, expect: '50% 75%, 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, 75px 150px'},
{at: 0, expect: '100px 200px, 100px 200px'},
{at: 0.25, expect: '125px 250px, 125px 250px'},
{at: 0.5, expect: '150px 300px, 150px 300px'},
{at: 0.75, expect: '175px 350px, 175px 350px'},
{at: 1, expect: '200px 400px, 200px 400px'},
{at: 1.25, expect: '225px 450px, 225px 450px'},
]);

test_composition({
property: 'background-position',
underlying: '40px 140px',
addFrom: '60px 160px',
replaceTo: '200px 400px',
}, [
{at: -0.25, expect: '75px 275px, 75px 275px'},
{at: 0, expect: '100px 300px, 100px 300px'},
{at: 0.25, expect: '125px 325px, 125px 325px'},
{at: 0.5, expect: '150px 350px, 150px 350px'},
{at: 0.75, expect: '175px 375px, 175px 375px'},
{at: 1, expect: '200px 400px, 200px 400px'},
{at: 1.25, expect: '225px 425px, 225px 425px'},
]);
</script>
</body>
105 changes: 105 additions & 0 deletions css/css-backgrounds/animations/background-size-composition.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!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',
addFrom: '60px 60px, 260px 260px',
addTo: '160px 160px',
}, [
{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%',
addFrom: '40px 80px, 180% 160%',
addTo: '80% 40%',
}, [
{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, 75px 75px'},
{at: 0, expect: '100px 100px, 100px 100px'},
{at: 0.25, expect: '125px 125px, 125px 125px'},
{at: 0.5, expect: '150px 150px, 150px 150px'},
{at: 0.75, expect: '175px 175px, 175px 175px'},
{at: 1, expect: '200px 200px, 200px 200px'},
{at: 1.25, expect: '225px 225px, 225px 225px'},
]);

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

test_composition({
property: 'background-size',
underlying: 'auto, contain',
addFrom: '100px 150px',
replaceTo: '200px 250px',
}, [
{at: -0.25, expect: '75px 125px, 75px 125px'},
{at: 0, expect: '100px 150px, 100px 150px'},
{at: 0.25, expect: '125px 175px, 125px 175px'},
{at: 0.5, expect: '150px 200px, 150px 200px'},
{at: 0.75, expect: '175px 225px, 175px 225px'},
{at: 1, expect: '200px 250px, 200px 250px'},
{at: 1.25, expect: '225px 275px, 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>