Skip to content

Commit f1430ff

Browse files
Fredrik Söderquistchromium-wpt-export-bot
Fredrik Söderquist
authored and
chromium-wpt-export-bot
committed
Move animation/composition/background-*-composition.html to WPT
Move the tests and perform a mechanical rewrite: * Change assertComposition() to test_composition(). * Change 'is' to 'expect' in the expectation objects. * Include required testharness.js and framework. * Add links to spec. Bug: 4066383 Change-Id: I766e91d2d19ae9d1dd9ce1f9e49d09c0b090b7d7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7185219 Reviewed-by: Kevin Ellis <[email protected]> Commit-Queue: Fredrik Söderquist <[email protected]> Cr-Commit-Position: refs/heads/main@{#1549122}
1 parent 403c505 commit f1430ff

File tree

2 files changed

+198
-0
lines changed

2 files changed

+198
-0
lines changed

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>background-position composition</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/interpolation-testcommon.js"></script>
8+
<style>
9+
.target {
10+
width: 120px;
11+
height: 120px;
12+
display: inline-block;
13+
background-image: url(), url();
14+
}
15+
</style>
16+
<body>
17+
<script>
18+
test_composition({
19+
property: 'background-position',
20+
underlying: '40px 140px',
21+
addFrom: '60px 160px',
22+
addTo: '160px 260px',
23+
}, [
24+
{at: -0.25, expect: '75px 275px, 75px 275px'},
25+
{at: 0, expect: '100px 300px, 100px 300px'},
26+
{at: 0.25, expect: '125px 325px, 125px 325px'},
27+
{at: 0.5, expect: '150px 350px, 150px 350px'},
28+
{at: 0.75, expect: '175px 375px, 175px 375px'},
29+
{at: 1, expect: '200px 400px, 200px 400px'},
30+
{at: 1.25, expect: '225px 425px, 225px 425px'},
31+
]);
32+
33+
test_composition({
34+
property: 'background-position',
35+
underlying: 'top 20% left 40%',
36+
addFrom: 'left 60% top 80%',
37+
addTo: 'right 80% bottom 40%',
38+
}, [
39+
{at: -0.25, expect: '110% 105%, 110% 105%'},
40+
{at: 0, expect: '100% 100%, 100% 100%'},
41+
{at: 0.25, expect: '90% 95%, 90% 95%'},
42+
{at: 0.5, expect: '80% 90%, 80% 90%'},
43+
{at: 0.75, expect: '70% 85%, 70% 85%'},
44+
{at: 1, expect: '60% 80%, 60% 80%'},
45+
{at: 1.25, expect: '50% 75%, 50% 75%'},
46+
]);
47+
48+
test_composition({
49+
property: 'background-position',
50+
underlying: 'top 20% left 40%',
51+
addFrom: 'left 60% top 80%, top 180% left 160%',
52+
addTo: 'right 80% bottom 40%',
53+
}, [
54+
{at: -0.25, expect: '110% 105%, 235% 230%'},
55+
{at: 0, expect: '100% 100%, 200% 200%'},
56+
{at: 0.25, expect: '90% 95%, 165% 170%'},
57+
{at: 0.5, expect: '80% 90%, 130% 140%'},
58+
{at: 0.75, expect: '70% 85%, 95% 110%'},
59+
{at: 1, expect: '60% 80%, 60% 80%'},
60+
{at: 1.25, expect: '50% 75%, 25% 50%'},
61+
]);
62+
63+
test_composition({
64+
property: 'background-position',
65+
underlying: '40px 140px',
66+
replaceFrom: '100px 200px',
67+
addTo: '160px 260px',
68+
}, [
69+
{at: -0.25, expect: '75px 150px, 75px 150px'},
70+
{at: 0, expect: '100px 200px, 100px 200px'},
71+
{at: 0.25, expect: '125px 250px, 125px 250px'},
72+
{at: 0.5, expect: '150px 300px, 150px 300px'},
73+
{at: 0.75, expect: '175px 350px, 175px 350px'},
74+
{at: 1, expect: '200px 400px, 200px 400px'},
75+
{at: 1.25, expect: '225px 450px, 225px 450px'},
76+
]);
77+
78+
test_composition({
79+
property: 'background-position',
80+
underlying: '40px 140px',
81+
addFrom: '60px 160px',
82+
replaceTo: '200px 400px',
83+
}, [
84+
{at: -0.25, expect: '75px 275px, 75px 275px'},
85+
{at: 0, expect: '100px 300px, 100px 300px'},
86+
{at: 0.25, expect: '125px 325px, 125px 325px'},
87+
{at: 0.5, expect: '150px 350px, 150px 350px'},
88+
{at: 0.75, expect: '175px 375px, 175px 375px'},
89+
{at: 1, expect: '200px 400px, 200px 400px'},
90+
{at: 1.25, expect: '225px 425px, 225px 425px'},
91+
]);
92+
</script>
93+
</body>

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>background-size composition</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/css/support/interpolation-testcommon.js"></script>
8+
<style>
9+
.target {
10+
background-image: url(), url();
11+
}
12+
</style>
13+
<body>
14+
<script>
15+
test_composition({
16+
property: 'background-size',
17+
underlying: '40px 40px',
18+
addFrom: '60px 60px, 260px 260px',
19+
addTo: '160px 160px',
20+
}, [
21+
{at: -0.25, expect: '75px 75px, 325px 325px'},
22+
{at: 0, expect: '100px 100px, 300px 300px'},
23+
{at: 0.25, expect: '125px 125px, 275px 275px'},
24+
{at: 0.5, expect: '150px 150px, 250px 250px'},
25+
{at: 0.75, expect: '175px 175px, 225px 225px'},
26+
{at: 1, expect: '200px 200px, 200px 200px'},
27+
{at: 1.25, expect: '225px 225px, 175px 175px'},
28+
]);
29+
30+
test_composition({
31+
property: 'background-size',
32+
underlying: '20% 40%',
33+
addFrom: '40px 80px, 180% 160%',
34+
addTo: '80% 40%',
35+
}, [
36+
{at: -0.25, expect: 'calc(50px + 0%) calc(100px + 30%), 225% 230%'},
37+
{at: 0, expect: 'calc(40px + 20%) calc(80px + 40%), 200% 200%'},
38+
{at: 0.25, expect: 'calc(30px + 40%) calc(60px + 50%), 175% 170%'},
39+
{at: 0.5, expect: 'calc(20px + 60%) calc(40px + 60%), 150% 140%'},
40+
{at: 0.75, expect: 'calc(10px + 80%) calc(20px + 70%), 125% 110%'},
41+
{at: 1, expect: '100% 80%, 100% 80%'},
42+
{at: 1.25, expect: 'calc(-10px + 120%) calc(-20px + 90%), 75% 50%'},
43+
]);
44+
45+
test_composition({
46+
property: 'background-size',
47+
underlying: '40px 40px',
48+
replaceFrom: '100px 100px',
49+
addTo: '160px 160px',
50+
}, [
51+
{at: -0.25, expect: '75px 75px, 75px 75px'},
52+
{at: 0, expect: '100px 100px, 100px 100px'},
53+
{at: 0.25, expect: '125px 125px, 125px 125px'},
54+
{at: 0.5, expect: '150px 150px, 150px 150px'},
55+
{at: 0.75, expect: '175px 175px, 175px 175px'},
56+
{at: 1, expect: '200px 200px, 200px 200px'},
57+
{at: 1.25, expect: '225px 225px, 225px 225px'},
58+
]);
59+
60+
test_composition({
61+
property: 'background-size',
62+
underlying: '40px 40px',
63+
addFrom: '60px 60px',
64+
replaceTo: '200px 200px',
65+
}, [
66+
{at: -0.25, expect: '75px 75px, 75px 75px'},
67+
{at: 0, expect: '100px 100px, 100px 100px'},
68+
{at: 0.25, expect: '125px 125px, 125px 125px'},
69+
{at: 0.5, expect: '150px 150px, 150px 150px'},
70+
{at: 0.75, expect: '175px 175px, 175px 175px'},
71+
{at: 1, expect: '200px 200px, 200px 200px'},
72+
{at: 1.25, expect: '225px 225px, 225px 225px'},
73+
]);
74+
75+
test_composition({
76+
property: 'background-size',
77+
underlying: 'auto, contain',
78+
addFrom: '100px 150px',
79+
replaceTo: '200px 250px',
80+
}, [
81+
{at: -0.25, expect: '75px 125px, 75px 125px'},
82+
{at: 0, expect: '100px 150px, 100px 150px'},
83+
{at: 0.25, expect: '125px 175px, 125px 175px'},
84+
{at: 0.5, expect: '150px 200px, 150px 200px'},
85+
{at: 0.75, expect: '175px 225px, 175px 225px'},
86+
{at: 1, expect: '200px 250px, 200px 250px'},
87+
{at: 1.25, expect: '225px 275px, 225px 275px'},
88+
]);
89+
90+
test_composition({
91+
property: 'background-size',
92+
underlying: 'auto 100px, contain',
93+
addFrom: neutralKeyframe,
94+
replaceTo: 'auto 200px, contain',
95+
}, [
96+
{at: -0.25, expect: 'auto 75px, contain'},
97+
{at: 0, expect: 'auto 100px, contain'},
98+
{at: 0.25, expect: 'auto 125px, contain'},
99+
{at: 0.5, expect: 'auto 150px, contain'},
100+
{at: 0.75, expect: 'auto 175px, contain'},
101+
{at: 1, expect: 'auto 200px, contain'},
102+
{at: 1.25, expect: 'auto 225px, contain'},
103+
]);
104+
</script>
105+
</body>

0 commit comments

Comments
 (0)