Skip to content

GitLab

T
tangled
Commit 35d2fc98 authored by Stephen McGruer's avatar Stephen McGruer Committed by Commit Bot
Browse files
Options

Port background-{color, position, size}-interpolation.html to WPT 

Bug: 900581
Change-Id: Ic4e14f4add81f40add7d80906ca402cdd1ed6334
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1756984Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688099}
parent 9f556aa4
Hide whitespace changes
Inline Side-by-side
Showing with 639 additions and 242 deletions
third_party/blink/web_tests/animations/interpolation/background-color-interpolation.html deleted 100644 → 0
View file @ 9f556aa4
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
background-color: #eee;
}
.target {
width: 60px;
height: 60px;
display: inline-block;
border: 2px solid black;
margin-right: 2px;
color: rgba(0, 0, 255, 0.5);
background-color: black;
}
.expected {
margin-right: 15px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'background-color',
from: neutralKeyframe,
to: 'green',
}, [
{at: -0.3, is: 'rgb(0, 0, 0)'},
{at: 0, is: 'rgb(0, 0, 0)'},
{at: 0.3, is: 'rgb(0, 38, 0)'},
{at: 0.6, is: 'rgb(0, 77, 0)'},
{at: 1, is: 'rgb(0, 128, 0)'},
{at: 1.5, is: 'rgb(0, 192, 0)'},
]);
assertInterpolation({
property: 'background-color',
from: 'initial',
to: 'green',
}, [
{at: -0.3, is: 'rgba(0, 0, 0, 0)'},
{at: 0, is: 'rgba(0, 0, 0, 0)'},
{at: 0.3, is: 'rgba(0, 128, 0, 0.3)'},
{at: 0.6, is: 'rgba(0, 128, 0, 0.6)'},
{at: 1, is: 'rgb(0, 128, 0)'},
{at: 1.5, is: 'rgb(0, 192, 0)'},
]);
assertInterpolation({
property: 'background-color',
from: 'inherit',
to: 'green',
}, [
{at: -0.3, is: 'rgb(255, 255, 255)'},
{at: 0, is: 'rgb(238, 238, 238)'},
{at: 0.3, is: 'rgb(167, 205, 167)'},
{at: 0.6, is: 'rgb(95, 172, 95)'},
{at: 1, is: 'rgb(0, 128, 0)'},
{at: 1.5, is: 'rgb(0, 73, 0)'},
]);
assertInterpolation({
property: 'background-color',
from: 'unset',
to: 'green',
}, [
{at: -0.3, is: 'rgba(0, 0, 0, 0)'},
{at: 0, is: 'rgba(0, 0, 0, 0)'},
{at: 0.3, is: 'rgba(0, 128, 0, 0.3)'},
{at: 0.6, is: 'rgba(0, 128, 0, 0.6)'},
{at: 1, is: 'rgb(0, 128, 0)'},
{at: 1.5, is: 'rgb(0, 192, 0)'},
]);
assertInterpolation({
property: 'background-color',
from: 'white',
to: 'orange',
}, [
{at: -0.3, is: 'white'},
{at: 0, is: 'white'},
{at: 0.3, is: 'rgb(255, 228, 179)'},
{at: 0.6, is: 'rgb(255, 201, 102)'},
{at: 1, is: 'orange'},
{at: 1.5, is: 'rgb(255, 120, 0)'},
]);
assertInterpolation({
property: 'background-color',
from: 'transparent',
to: 'green',
}, [
{at: -0.3, is: 'rgba(0, 0, 0, 0)'},
{at: 0, is: 'rgba(0, 0, 0, 0)'},
{at: 0.3, is: 'rgba(0, 128, 0, 0.3)'},
{at: 0.6, is: 'rgba(0, 128, 0, 0.6)'},
{at: 1, is: 'rgb(0, 128, 0)'},
{at: 1.5, is: 'rgb(0, 192, 0)'},
]);
assertInterpolation({
property: 'background-color',
from: 'currentcolor',
to: 'rgba(0, 255, 0, 0.75)',
}, [
{at: -0.5, is: 'rgba(0, 0, 255, 0.38)'},
{at: 0, is: 'rgba(0, 0, 255, 0.5)'},
{at: 0.25, is: 'rgba(0, 85, 170, 0.56)'},
{at: 0.5, is: 'rgba(0, 153, 102, 0.63)'},
{at: 0.75, is: 'rgba(0, 208, 47, 0.69)'},
{at: 1, is: 'rgba(0, 255, 0, 0.75)'},
{at: 1.5, is: 'rgba(0, 255, 0, 0.88)'},
]);
</script>
</body>
third_party/blink/web_tests/animations/interpolation/background-position-interpolation.html deleted 100644 → 0
View file @ 9f556aa4
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
background-position: 60px 60px;
}
.target {
width: 120px;
height: 120px;
display: inline-block;
border: 2px solid black;
background-repeat: no-repeat;
background-image: radial-gradient(20px circle at 20px 20px, red 18px, transparent),
radial-gradient(20px circle at 20px 20px, yellow 18px, transparent),
radial-gradient(20px circle at 20px 20px, lime 18px, transparent),
radial-gradient(20px circle at 20px 20px, blue 18px, transparent);
background-position: 40px 40px;
}
.expected {
margin-right: 10px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'background-position',
from: neutralKeyframe,
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, is: '30px 30px, 30px 30px, 30px 30px, 30px 30px'},
{at: 0, is: '40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.25, is: '50px 50px, 50px 50px, 50px 50px, 50px 50px'},
{at: 0.5, is: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 0.75, is: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
{at: 1, is: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, is: '90px 90px, 90px 90px, 90px 90px, 90px 90px'},
]);
assertInterpolation({
property: 'background-position',
from: 'initial',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, is: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '}, // TODO(alancutter): Should these be 0px?
{at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
assertInterpolation({
property: 'background-position',
from: 'inherit',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, is: '55px 55px, 55px 55px, 55px 55px, 55px 55px'},
{at: 0, is: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 0.25, is: '65px 65px, 65px 65px, 65px 65px, 65px 65px'},
{at: 0.5, is: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
{at: 0.75, is: '75px 75px, 75px 75px, 75px 75px, 75px 75px'},
{at: 1, is: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, is: '85px 85px, 85px 85px, 85px 85px, 85px 85px'},
]);
assertInterpolation({
property: 'background-position',
from: 'unset',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, is: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '},
{at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
// Test equal number of position values as background images.
assertInterpolation({
property: 'background-position',
from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
// Test single position value repeated over background images.
assertInterpolation({
property: 'background-position',
from: 'top 0px left 0px',
to: 'left 80px top 80px',
}, [
{at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
// Test mismatched numbers of position values.
assertInterpolation({
property: 'background-position',
from: '0px 0px, 80px 0px',
to: '40px 40px, 80px 80px, 0px 80px',
}, [
{at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},
{at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
{at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'},
{at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'},
{at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'},
{at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'},
{at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/background-color-interpolation.html 0 → 100644
View file @ 35d2fc98
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
<meta name="test" content="background-color supports animation as a <color>">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
background-color: #eee;
}
.target {
width: 60px;
height: 60px;
display: inline-block;
border: 2px solid black;
margin-right: 2px;
color: rgba(0, 0, 255, 0.5);
background-color: black;
}
.expected {
margin-right: 15px;
}
</style>
<body></body>
<script>
test_interpolation({
property: 'background-color',
from: neutralKeyframe,
to: 'green',
}, [
{at: -0.3, expect: 'rgb(0, 0, 0)'},
{at: 0, expect: 'rgb(0, 0, 0)'},
{at: 0.3, expect: 'rgb(0, 38, 0)'},
{at: 0.6, expect: 'rgb(0, 77, 0)'},
{at: 1, expect: 'rgb(0, 128, 0)'},
{at: 1.5, expect: 'rgb(0, 192, 0)'},
]);
test_interpolation({
property: 'background-color',
from: 'initial',
to: 'green',
}, [
{at: -0.3, expect: 'rgba(0, 0, 0, 0)'},
{at: 0, expect: 'rgba(0, 0, 0, 0)'},
{at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'},
{at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'},
{at: 1, expect: 'rgb(0, 128, 0)'},
{at: 1.5, expect: 'rgb(0, 192, 0)'},
]);
test_interpolation({
property: 'background-color',
from: 'inherit',
to: 'green',
}, [
{at: -0.3, expect: 'rgb(255, 255, 255)'},
{at: 0, expect: 'rgb(238, 238, 238)'},
{at: 0.3, expect: 'rgb(167, 205, 167)'},
{at: 0.6, expect: 'rgb(95, 172, 95)'},
{at: 1, expect: 'rgb(0, 128, 0)'},
{at: 1.5, expect: 'rgb(0, 73, 0)'},
]);
test_interpolation({
property: 'background-color',
from: 'unset',
to: 'green',
}, [
{at: -0.3, expect: 'rgba(0, 0, 0, 0)'},
{at: 0, expect: 'rgba(0, 0, 0, 0)'},
{at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'},
{at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'},
{at: 1, expect: 'rgb(0, 128, 0)'},
{at: 1.5, expect: 'rgb(0, 192, 0)'},
]);
test_interpolation({
property: 'background-color',
from: 'white',
to: 'orange',
}, [
{at: -0.3, expect: 'white'},
{at: 0, expect: 'white'},
{at: 0.3, expect: 'rgb(255, 228, 179)'},
{at: 0.6, expect: 'rgb(255, 201, 102)'},
{at: 1, expect: 'orange'},
{at: 1.5, expect: 'rgb(255, 120, 0)'},
]);
test_interpolation({
property: 'background-color',
from: 'transparent',
to: 'green',
}, [
{at: -0.3, expect: 'rgba(0, 0, 0, 0)'},
{at: 0, expect: 'rgba(0, 0, 0, 0)'},
{at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'},
{at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'},
{at: 1, expect: 'rgb(0, 128, 0)'},
{at: 1.5, expect: 'rgb(0, 192, 0)'},
]);
test_interpolation({
property: 'background-color',
from: 'currentcolor',
to: 'rgba(0, 255, 0, 0.75)',
}, [
{at: -0.5, expect: 'rgba(0, 0, 255, 0.38)'},
{at: 0, expect: 'rgba(0, 0, 255, 0.5)'},
{at: 0.25, expect: 'rgba(0, 85, 170, 0.56)'},
{at: 0.5, expect: 'rgba(0, 153, 102, 0.63)'},
{at: 0.75, expect: 'rgba(0, 208, 47, 0.69)'},
{at: 1, expect: 'rgba(0, 255, 0, 0.75)'},
{at: 1.5, expect: 'rgba(0, 255, 0, 0.88)'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/background-position-interpolation.html 0 → 100644
View file @ 35d2fc98
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
<meta name="test" content="background-position supports animation as a repeatable list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
background-position: 60px 60px;
}
.target {
width: 120px;
height: 120px;
display: inline-block;
border: 2px solid black;
background-repeat: no-repeat;
background-image: radial-gradient(20px circle at 20px 20px, red 18px, transparent),
radial-gradient(20px circle at 20px 20px, yellow 18px, transparent),
radial-gradient(20px circle at 20px 20px, lime 18px, transparent),
radial-gradient(20px circle at 20px 20px, blue 18px, transparent);
background-position: 40px 40px;
}
.expected {
margin-right: 10px;
}
</style>
<body></body>
<script>
test_interpolation({
property: 'background-position',
from: neutralKeyframe,
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, expect: '30px 30px, 30px 30px, 30px 30px, 30px 30px'},
{at: 0, expect: '40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.25, expect: '50px 50px, 50px 50px, 50px 50px, 50px 50px'},
{at: 0.5, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 0.75, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
{at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, expect: '90px 90px, 90px 90px, 90px 90px, 90px 90px'},
]);
test_interpolation({
property: 'background-position',
from: 'initial',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, expect: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '}, // TODO(alancutter): Should these be 0px?
{at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
test_interpolation({
property: 'background-position',
from: 'inherit',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, expect: '55px 55px, 55px 55px, 55px 55px, 55px 55px'},
{at: 0, expect: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 0.25, expect: '65px 65px, 65px 65px, 65px 65px, 65px 65px'},
{at: 0.5, expect: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
{at: 0.75, expect: '75px 75px, 75px 75px, 75px 75px, 75px 75px'},
{at: 1, expect: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, expect: '85px 85px, 85px 85px, 85px 85px, 85px 85px'},
]);
test_interpolation({
property: 'background-position',
from: 'unset',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, expect: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '},
{at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
// Test equal number of position values as background images.
test_interpolation({
property: 'background-position',
from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
{at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
// Test single position value repeated over background images.
test_interpolation({
property: 'background-position',
from: 'top 0px left 0px',
to: 'left 80px top 80px',
}, [
{at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
{at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
// Test mismatched numbers of position values.
test_interpolation({
property: 'background-position',
from: '0px 0px, 80px 0px',
to: '40px 40px, 80px 80px, 0px 80px',
}, [
{at: -0.25, expect: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},
{at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
{at: 0.25, expect: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'},
{at: 0.5, expect: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'},
{at: 0.75, expect: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'},
{at: 1, expect: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'},
{at: 1.25, expect: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'},
]);
</script>
third_party/blink/web_tests/animations/interpolation/background-position-origin-interpolation.html → third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/background-position-origin-interpolation.html
View file @ 35d2fc98
<!doctype html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
<meta name="test" content="background-position animation handles origin parameters">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
background-position: 80px 80px;
......@@ -22,189 +29,189 @@
margin-left: -106px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<body></body>
<script>
// neutral
assertInterpolation({
test_interpolation({
property: 'background-position',
from: neutralKeyframe,
to: 'left 20px top 20px',
}, [
{at: 0, is: '10px 10px'},
{at: 0.25, is: '12.5px 12.5px'},
{at: 0.5, is: '15px 15px'},
{at: 0.75, is: '17.5px 17.5px'},
{at: 1, is: '20px 20px'},
{at: 0, expect: '10px 10px'},
{at: 0.25, expect: '12.5px 12.5px'},
{at: 0.5, expect: '15px 15px'},
{at: 0.75, expect: '17.5px 17.5px'},
{at: 1, expect: '20px 20px'},
]);
// initial
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'initial',
to: 'left 20px top 20px',
}, [
{at: 0, is: '0% 0%'},
{at: 0.25, is: '5px 5px'},
{at: 0.5, is: '10px 10px'},
{at: 0.75, is: '15px 15px'},
{at: 1, is: '20px 20px'},
{at: 0, expect: '0% 0%'},
{at: 0.25, expect: '5px 5px'},
{at: 0.5, expect: '10px 10px'},
{at: 0.75, expect: '15px 15px'},
{at: 1, expect: '20px 20px'},
]);
// inherit
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'inherit',
to: 'left 20px top 20px',
}, [
{at: 0, is: '80px 80px'},
{at: 0.25, is: '65px 65px'},
{at: 0.5, is: '50px 50px'},
{at: 0.75, is: '35px 35px'},
{at: 1, is: '20px 20px'},
{at: 0, expect: '80px 80px'},
{at: 0.25, expect: '65px 65px'},
{at: 0.5, expect: '50px 50px'},
{at: 0.75, expect: '35px 35px'},
{at: 1, expect: '20px 20px'},
]);
// unset
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'unset',
to: 'left 20px top 20px',
}, [
{at: 0, is: '0% 0%'},
{at: 0.25, is: '5px 5px'},
{at: 0.5, is: '10px 10px'},
{at: 0.75, is: '15px 15px'},
{at: 1, is: '20px 20px'},
{at: 0, expect: '0% 0%'},
{at: 0.25, expect: '5px 5px'},
{at: 0.5, expect: '10px 10px'},
{at: 0.75, expect: '15px 15px'},
{at: 1, expect: '20px 20px'},
]);
// left-top
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'left 20px top 20px',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: 'calc(5px + 37.5%) calc(5px + 37.5%)'},
{at: 0.5, is: 'calc(10px + 25%) calc(10px + 25%)'},
{at: 0.75, is: 'calc(15px + 12.5%) calc(15px + 12.5%)'},
{at: 1, is: '20px 20px'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: 'calc(5px + 37.5%) calc(5px + 37.5%)'},
{at: 0.5, expect: 'calc(10px + 25%) calc(10px + 25%)'},
{at: 0.75, expect: 'calc(15px + 12.5%) calc(15px + 12.5%)'},
{at: 1, expect: '20px 20px'},
]);
// center-top
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'center top 20px',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: '50% calc(5px + 37.5%)'},
{at: 0.5, is: '50% calc(10px + 25%)'},
{at: 0.75, is: '50% calc(15px + 12.5%)'},
{at: 1, is: '50% 20px'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: '50% calc(5px + 37.5%)'},
{at: 0.5, expect: '50% calc(10px + 25%)'},
{at: 0.75, expect: '50% calc(15px + 12.5%)'},
{at: 1, expect: '50% 20px'},
]);
// right-top
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'right 20px top 20px',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: 'calc(-5px + 62.5%) calc(5px + 37.5%)'},
{at: 0.5, is: 'calc(-10px + 75%) calc(10px + 25%)'},
{at: 0.75, is: 'calc(-15px + 87.5%) calc(15px + 12.5%)'},
{at: 1, is: 'calc(-20px + 100%) 20px'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: 'calc(-5px + 62.5%) calc(5px + 37.5%)'},
{at: 0.5, expect: 'calc(-10px + 75%) calc(10px + 25%)'},
{at: 0.75, expect: 'calc(-15px + 87.5%) calc(15px + 12.5%)'},
{at: 1, expect: 'calc(-20px + 100%) 20px'},
]);
// left-center
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'left 20px center',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: 'calc(5px + 37.5%) 50%'},
{at: 0.5, is: 'calc(10px + 25%) 50%'},
{at: 0.75, is: 'calc(15px + 12.5%) 50%'},
{at: 1, is: '20px 50%'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: 'calc(5px + 37.5%) 50%'},
{at: 0.5, expect: 'calc(10px + 25%) 50%'},
{at: 0.75, expect: 'calc(15px + 12.5%) 50%'},
{at: 1, expect: '20px 50%'},
]);
// center-center
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'center center',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: '50% 50%'},
{at: 0.5, is: '50% 50%'},
{at: 0.75, is: '50% 50%'},
{at: 1, is: '50% 50%'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: '50% 50%'},
{at: 0.5, expect: '50% 50%'},
{at: 0.75, expect: '50% 50%'},
{at: 1, expect: '50% 50%'},
]);
// right-center
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'right 20px center',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: 'calc(-5px + 62.5%) 50%'},
{at: 0.5, is: 'calc(-10px + 75%) 50%'},
{at: 0.75, is: 'calc(-15px + 87.5%) 50%'},
{at: 1, is: 'calc(-20px + 100%) 50%'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: 'calc(-5px + 62.5%) 50%'},
{at: 0.5, expect: 'calc(-10px + 75%) 50%'},
{at: 0.75, expect: 'calc(-15px + 87.5%) 50%'},
{at: 1, expect: 'calc(-20px + 100%) 50%'},
]);
// left-bottom
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'left 20px bottom 20px',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: 'calc(5px + 37.5%) calc(-5px + 62.5%)'},
{at: 0.5, is: 'calc(10px + 25%) calc(-10px + 75%)'},
{at: 0.75, is: 'calc(15px + 12.5%) calc(-15px + 87.5%)'},
{at: 1, is: '20px calc(-20px + 100%)'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: 'calc(5px + 37.5%) calc(-5px + 62.5%)'},
{at: 0.5, expect: 'calc(10px + 25%) calc(-10px + 75%)'},
{at: 0.75, expect: 'calc(15px + 12.5%) calc(-15px + 87.5%)'},
{at: 1, expect: '20px calc(-20px + 100%)'},
]);
// center-bottom
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'center bottom 20px',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: '50% calc(-5px + 62.5%)'},
{at: 0.5, is: '50% calc(-10px + 75%)'},
{at: 0.75, is: '50% calc(-15px + 87.5%)'},
{at: 1, is: '50% calc(-20px + 100%)'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: '50% calc(-5px + 62.5%)'},
{at: 0.5, expect: '50% calc(-10px + 75%)'},
{at: 0.75, expect: '50% calc(-15px + 87.5%)'},
{at: 1, expect: '50% calc(-20px + 100%)'},
]);
// right-bottom
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center center',
to: 'right 20px bottom 20px',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'},
{at: 0.5, is: 'calc(-10px + 75%) calc(-10px + 75%)'},
{at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'},
{at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'},
{at: 0.5, expect: 'calc(-10px + 75%) calc(-10px + 75%)'},
{at: 0.75, expect: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'},
{at: 1, expect: 'calc(-20px + 100%) calc(-20px + 100%)'},
]);
// Single values
assertInterpolation({
test_interpolation({
property: 'background-position',
from: 'center',
to: 'bottom',
}, [
{at: 0, is: '50% 50%'},
{at: 0.25, is: '50% 62.5%'},
{at: 0.5, is: '50% 75%'},
{at: 0.75, is: '50% 87.5%'},
{at: 1, is: '50% 100%'},
{at: 0, expect: '50% 50%'},
{at: 0.25, expect: '50% 62.5%'},
{at: 0.5, expect: '50% 75%'},
{at: 0.75, expect: '50% 87.5%'},
{at: 1, expect: '50% 100%'},
]);
</script>
</body>
third_party/blink/web_tests/animations/interpolation/background-size-interpolation.html → third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/background-size-interpolation.html
View file @ 35d2fc98
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size">
<meta name="test" content="background-size supports animation as a repeatable list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
background-size: 100px 100px;
......@@ -22,138 +29,138 @@
border-color: green;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<body></body>
<script>
// neutral
assertInterpolation({
test_interpolation({
property: 'background-size',
from: neutralKeyframe,
to: '20px 20px, 0px 0px',
}, [
{at: -0.25, is: ' 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px'},
{at: 0, is: '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'},
{at: 0.25, is: '12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px'},
{at: 0.5, is: '15.0px 15.0px, 5.0px 5.0px, 15.0px 15.0px, 5.0px 5.0px'},
{at: 0.75, is: '17.5px 17.5px, 2.5px 2.5px, 17.5px 17.5px, 2.5px 2.5px'},
{at: 1, is: '20.0px 20.0px, 0.0px 0.0px, 20.0px 20.0px, 0.0px 0.0px'},
{at: 1.25, is: '22.5px 22.5px, 0.0px 0.0px, 22.5px 22.5px, 0.0px 0.0px'},
{at: -0.25, expect: ' 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px'},
{at: 0, expect: '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'},
{at: 0.25, expect: '12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px'},
{at: 0.5, expect: '15.0px 15.0px, 5.0px 5.0px, 15.0px 15.0px, 5.0px 5.0px'},
{at: 0.75, expect: '17.5px 17.5px, 2.5px 2.5px, 17.5px 17.5px, 2.5px 2.5px'},
{at: 1, expect: '20.0px 20.0px, 0.0px 0.0px, 20.0px 20.0px, 0.0px 0.0px'},
{at: 1.25, expect: '22.5px 22.5px, 0.0px 0.0px, 22.5px 22.5px, 0.0px 0.0px'},
]);
// initial
assertNoInterpolation({
test_no_interpolation({
property: 'background-size',
from: 'initial',
to: '20px 20px, 0px 0px',
});
// inherit
assertInterpolation({
test_interpolation({
property: 'background-size',
from: 'inherit',
to: '20px 20px, 0px 0px',
}, [
{at: -0.25, is: '120px 120px, 125px 125px, 120px 120px, 125px 125px'},
{at: 0, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
{at: 0.25, is: ' 80px 80px, 75px 75px, 80px 80px, 75px 75px'},
{at: 0.5, is: ' 60px 60px, 50px 50px, 60px 60px, 50px 50px'},
{at: 0.75, is: ' 40px 40px, 25px 25px, 40px 40px, 25px 25px'},
{at: 1, is: ' 20px 20px, 0px 0px, 20px 20px, 0px 0px'},
{at: 1.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: -0.25, expect: '120px 120px, 125px 125px, 120px 120px, 125px 125px'},
{at: 0, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
{at: 0.25, expect: ' 80px 80px, 75px 75px, 80px 80px, 75px 75px'},
{at: 0.5, expect: ' 60px 60px, 50px 50px, 60px 60px, 50px 50px'},
{at: 0.75, expect: ' 40px 40px, 25px 25px, 40px 40px, 25px 25px'},
{at: 1, expect: ' 20px 20px, 0px 0px, 20px 20px, 0px 0px'},
{at: 1.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
]);
// unset
assertNoInterpolation({
test_no_interpolation({
property: 'background-size',
from: 'unset',
to: '20px 20px, 0px 0px',
});
// Matched keywords in size value list.
assertInterpolation({
test_interpolation({
property: 'background-size',
from: '0px auto, 0px 0px, contain, cover',
to: '40px auto, 40px 40px, contain, cover',
}, [
{at: -0.25, is: ' 0px auto, 0px 0px, contain, cover'},
{at: 0, is: ' 0px auto, 0px 0px, contain, cover'},
{at: 0.25, is: '10px auto, 10px 10px, contain, cover'},
{at: 0.5, is: '20px auto, 20px 20px, contain, cover'},
{at: 0.75, is: '30px auto, 30px 30px, contain, cover'},
{at: 1, is: '40px auto, 40px 40px, contain, cover'},
{at: 1.25, is: '50px auto, 50px 50px, contain, cover'},
{at: -0.25, expect: ' 0px auto, 0px 0px, contain, cover'},
{at: 0, expect: ' 0px auto, 0px 0px, contain, cover'},
{at: 0.25, expect: '10px auto, 10px 10px, contain, cover'},
{at: 0.5, expect: '20px auto, 20px 20px, contain, cover'},
{at: 0.75, expect: '30px auto, 30px 30px, contain, cover'},
{at: 1, expect: '40px auto, 40px 40px, contain, cover'},
{at: 1.25, expect: '50px auto, 50px 50px, contain, cover'},
]);
// Mismatched keywords in size value list.
assertNoInterpolation({
test_no_interpolation({
property: 'background-size',
from: '0px 0px, 0px 0px, contain, cover',
to: '40px 40px, 40px 40px, cover, contain',
});
assertNoInterpolation({
test_no_interpolation({
property: 'background-size',
from: '0px auto, 0px 0px',
to: 'auto 40px, 40px 40px',
});
// Equal number of size values as background images.
assertInterpolation({
test_interpolation({
property: 'background-size',
from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
to: '20px 20px, 40px 40px, 60px 60px, 100px 100px',
}, [
{at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, is: ' 5px 5px, 10px 10px, 15px 15px, 25px 25px'},
{at: 0.5, is: '10px 10px, 20px 20px, 30px 30px, 50px 50px'},
{at: 0.75, is: '15px 15px, 30px 30px, 45px 45px, 75px 75px'},
{at: 1, is: '20px 20px, 40px 40px, 60px 60px, 100px 100px'},
{at: 1.25, is: '25px 25px, 50px 50px, 75px 75px, 125px 125px'},
{at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, expect: ' 5px 5px, 10px 10px, 15px 15px, 25px 25px'},
{at: 0.5, expect: '10px 10px, 20px 20px, 30px 30px, 50px 50px'},
{at: 0.75, expect: '15px 15px, 30px 30px, 45px 45px, 75px 75px'},
{at: 1, expect: '20px 20px, 40px 40px, 60px 60px, 100px 100px'},
{at: 1.25, expect: '25px 25px, 50px 50px, 75px 75px, 125px 125px'},
]);
// Single size value repeated over background images.
assertInterpolation({
test_interpolation({
property: 'background-size',
from: '0px 0px',
to: '80px 80px',
}, [
{at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
{at: -0.25, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
{at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
{at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
{at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
{at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
{at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);
assertInterpolation({
test_interpolation({
property: 'background-size',
from: '0px',
to: '80px',
}, [
{at: -0.25, is: ' 0px, 0px, 0px, 0px'},
{at: 0, is: ' 0px, 0px, 0px, 0px'},
{at: 0.25, is: ' 20px, 20px, 20px, 20px'},
{at: 0.5, is: ' 40px, 40px, 40px, 40px'},
{at: 0.75, is: ' 60px, 60px, 60px, 60px'},
{at: 1, is: ' 80px, 80px, 80px, 80px'},
{at: 1.25, is: '100px, 100px, 100px, 100px'},
{at: -0.25, expect: ' 0px, 0px, 0px, 0px'},
{at: 0, expect: ' 0px, 0px, 0px, 0px'},
{at: 0.25, expect: ' 20px, 20px, 20px, 20px'},
{at: 0.5, expect: ' 40px, 40px, 40px, 40px'},
{at: 0.75, expect: ' 60px, 60px, 60px, 60px'},
{at: 1, expect: ' 80px, 80px, 80px, 80px'},
{at: 1.25, expect: '100px, 100px, 100px, 100px'},
]);
// Mismatched numbers of size values.
assertInterpolation({
test_interpolation({
property: 'background-size',
from: '0px 0px, 80px 0px',
to: '40px 40px, 80px 80px, 0px 80px',
}, [
{at: -0.25, is: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'},
{at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
{at: 0.25, is: '10px 10px, 80px 20px, 0px 20px, 70px 10px'},
{at: 0.5, is: '20px 20px, 80px 40px, 0px 40px, 60px 20px'},
{at: 0.75, is: '30px 30px, 80px 60px, 0px 60px, 50px 30px'},
{at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'},
{at: 1.25, is: '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
{at: -0.25, expect: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'},
{at: 0, expect: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
{at: 0.25, expect: '10px 10px, 80px 20px, 0px 20px, 70px 10px'},
{at: 0.5, expect: '20px 20px, 80px 40px, 0px 40px, 60px 20px'},
{at: 0.75, expect: '30px 30px, 80px 60px, 0px 60px, 50px 30px'},
{at: 1, expect: '40px 40px, 80px 80px, 0px 80px, 40px 40px'},
{at: 1.25, expect: '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
]);
</script>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment