mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-02 23:56:06 +00:00
Tests: Import WPT tests from css/css-backgrounds/animation
These give us some basic coverage of backgrounds, borders and animation mechanisms.
This commit is contained in:
Andreas Kling
Andreas Kling
parent
5bdbc34a63
commit
87dd8714c5
Notes:
github-actions[bot]
2024-11-07 21:51:28 +00:00
Author: https://github.com/awesomekling
Commit: 87dd8714c5
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2213
62 changed files with 8867 additions and 0 deletions
|
|
@ -0,0 +1,4 @@
|
|||
features:
|
||||
- name: border-image
|
||||
files:
|
||||
- border-image-*
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!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="../../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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>currentColor in nested color-mix() with transition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color">
|
||||
<style>
|
||||
#parent {
|
||||
color: white;
|
||||
background-color:
|
||||
color-mix(in srgb,
|
||||
color-mix(in srgb, black, currentColor),
|
||||
black);
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
#child {
|
||||
background-color: inherit;
|
||||
transition: background-color;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script>
|
||||
async function runTest() {
|
||||
promise_test(async t => {
|
||||
await waitForNextFrame();
|
||||
const child = document.getElementById('child');
|
||||
const parent = document.getElementById('parent');
|
||||
let parentBG = getComputedStyle(parent).backgroundColor;
|
||||
let childBG = getComputedStyle(child).backgroundColor;
|
||||
|
||||
assert_equals(parentBG, "color(srgb 0.25 0.25 0.25)");
|
||||
assert_equals(childBG, "color(srgb 0.25 0.25 0.25)");
|
||||
|
||||
// Style change triggers a CSS transition. Wait for the
|
||||
// transition to start.
|
||||
await waitForNextFrame();
|
||||
child.style = 'color:black';
|
||||
await Promise.all(document.getAnimations().map(a => a.ready));
|
||||
|
||||
parentBG = getComputedStyle(parent).backgroundColor;
|
||||
childBG = getComputedStyle(child).backgroundColor;
|
||||
assert_equals(parentBG, "color(srgb 0.25 0.25 0.25)");
|
||||
assert_equals(childBG, "color(srgb 0 0 0)");
|
||||
}, 'Transition with currentColor in color-mix');
|
||||
}
|
||||
window.onload = runTest();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image">
|
||||
<meta name="test" content="background-image supports animation">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
background-image: url(../resources/blue-100.png);
|
||||
background-size: 0 0;
|
||||
}
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
border: 10px solid black;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../resources/blue-100.png);
|
||||
}
|
||||
.expected {
|
||||
border-color: green;
|
||||
margin-right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// Neutral to image
|
||||
var from = 'url(../resources/blue-100.png)';
|
||||
var to = 'url(../resources/green-100.png)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: neutralKeyframe,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// initial to image
|
||||
to = 'url(../resources/green-100.png)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: 'initial',
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: 'none'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0.3, expect: 'none'},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// inherit to image
|
||||
from = 'url(../resources/blue-100.png)';
|
||||
to = 'url(../resources/green-100.png)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: 'inherit',
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// unset to image
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: 'unset',
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: 'none'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0.3, expect: 'none'},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Image to image
|
||||
from = 'url(../resources/blue-100.png)';
|
||||
to = 'url(../resources/green-100.png)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Image to gradient
|
||||
from = 'url(../resources/blue-100.png)';
|
||||
to = 'linear-gradient(45deg, blue, orange)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Image to crossfade
|
||||
from = 'url(../resources/blue-100.png)';
|
||||
to = 'cross-fade(url(../resources/green-100.png), url(../resources/stripes-100.png), 0.5)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Gradient to gradient
|
||||
from = 'linear-gradient(-45deg, red, yellow)';
|
||||
to = 'linear-gradient(45deg, blue, orange)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Keyword to image
|
||||
from = 'none';
|
||||
to = 'url(../resources/green-100.png)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Multiple to multiple
|
||||
var fromA = 'url(../resources/stripes-100.png)';
|
||||
var fromB = 'url(../resources/blue-100.png)';
|
||||
var toA = 'url(../resources/blue-100.png)';
|
||||
var toB = 'url(../resources/stripes-100.png)';
|
||||
from = fromA + ', ' + fromB;
|
||||
to = toA + ', ' + toB;
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Single to multiple
|
||||
from = 'url(../resources/blue-100.png)';
|
||||
var toA = 'url(../resources/stripes-100.png)';
|
||||
var toB = 'url(../resources/green-100.png)';
|
||||
to = toA + ', ' + toB;
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
// The interpolation of different numbers of background-images looks a bit strange here.
|
||||
// Animating background-image is not specified to be possible however we do it for backwards compatibility.
|
||||
// With this in mind we kept the implementation simple at the expense of this corner case because there is
|
||||
// no official specification to support.
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
|
||||
// Multiple mismatched types
|
||||
from = 'url(../resources/blue-100.png), none';
|
||||
to = 'url(../resources/stripes-100.png), url(../resources/green-100.png)';
|
||||
test_interpolation({
|
||||
property: 'background-image',
|
||||
from: from,
|
||||
to: to,
|
||||
}, [
|
||||
{at: -0.3, expect: from},
|
||||
{at: 0, expect: from},
|
||||
{at: 0.3, expect: from},
|
||||
{at: 0.6, expect: to},
|
||||
{at: 1, expect: to},
|
||||
{at: 1.5, expect: to},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!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="../../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'},
|
||||
]);
|
||||
|
||||
// background-position's initial value is 0% 0%, and calcs involving percentages
|
||||
// are never resolved by the calc spec (even when the percentage is 0%).
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'initial',
|
||||
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
|
||||
}, [
|
||||
{at: -0.25, expect: 'calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px)'},
|
||||
{at: 0, expect: '0% 0%, 0% 0%, 0% 0%, 0% 0%'},
|
||||
{at: 0.25, expect: 'calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px)'},
|
||||
{at: 0.5, expect: 'calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px)'},
|
||||
{at: 0.75, expect: 'calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px)'},
|
||||
{at: 1, expect: 'calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px)'},
|
||||
{at: 1.25, expect: 'calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 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'},
|
||||
]);
|
||||
|
||||
// background-position is not inherited, so 'unset' is equivalent to initial.
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'unset',
|
||||
to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
|
||||
}, [
|
||||
{at: -0.25, expect: 'calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px), calc(0% - 20px) calc(0% - 20px)'},
|
||||
{at: 0, expect: '0% 0%, 0% 0%, 0% 0%, 0% 0%'},
|
||||
{at: 0.25, expect: 'calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px), calc(0% + 20px) calc(0% + 20px)'},
|
||||
{at: 0.5, expect: 'calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px), calc(0% + 40px) calc(0% + 40px)'},
|
||||
{at: 0.75, expect: 'calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px), calc(0% + 60px) calc(0% + 60px)'},
|
||||
{at: 1, expect: 'calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px), calc(0% + 80px) calc(0% + 80px)'},
|
||||
{at: 1.25, expect: 'calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 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>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<!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="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
background-position: 80px 80px;
|
||||
}
|
||||
.target {
|
||||
border: 3px solid skyblue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: linear-gradient(to right, green, green);
|
||||
background-size: 20px 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.actual {
|
||||
background-image: linear-gradient(to right, red, red);
|
||||
}
|
||||
.expected {
|
||||
margin-left: -106px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
// neutral
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: neutralKeyframe,
|
||||
to: 'left 20px top 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
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'initial',
|
||||
to: 'left 20px top 20px',
|
||||
}, [
|
||||
{at: 0, expect: '0% 0%'},
|
||||
{at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'},
|
||||
{at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'},
|
||||
{at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'},
|
||||
{at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'},
|
||||
]);
|
||||
|
||||
// inherit
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'inherit',
|
||||
to: 'left 20px top 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
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'unset',
|
||||
to: 'left 20px top 20px',
|
||||
}, [
|
||||
{at: 0, expect: '0% 0%'},
|
||||
{at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'},
|
||||
{at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'},
|
||||
{at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'},
|
||||
{at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'},
|
||||
]);
|
||||
|
||||
// left-top
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'left 20px top 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: 'calc(0% + 20px) calc(0% + 20px)'},
|
||||
]);
|
||||
|
||||
// center-top
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'center top 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% calc(0% + 20px)'},
|
||||
]);
|
||||
|
||||
// right-top
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'right 20px top 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%) calc(0% + 20px)'},
|
||||
]);
|
||||
|
||||
// left-center
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'left 20px center',
|
||||
}, [
|
||||
{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: 'calc(0% + 20px) 50%'},
|
||||
]);
|
||||
|
||||
// center-center
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'center center',
|
||||
}, [
|
||||
{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
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'right 20px center',
|
||||
}, [
|
||||
{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
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'left 20px bottom 20px',
|
||||
}, [
|
||||
{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: 'calc(0% + 20px) calc(-20px + 100%)'},
|
||||
]);
|
||||
|
||||
// center-bottom
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'center bottom 20px',
|
||||
}, [
|
||||
{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
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center center',
|
||||
to: 'right 20px bottom 20px',
|
||||
}, [
|
||||
{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
|
||||
test_interpolation({
|
||||
property: 'background-position',
|
||||
from: 'center',
|
||||
to: 'bottom',
|
||||
}, [
|
||||
{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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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-x supports animation">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
background-position-x: 60px;
|
||||
}
|
||||
|
||||
.target {
|
||||
background-position-x: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'background-position-x',
|
||||
from: neutralKeyframe,
|
||||
to: '80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '30px'},
|
||||
{at: 0, expect: '40px'},
|
||||
{at: 0.25, expect: '50px'},
|
||||
{at: 0.5, expect: '60px'},
|
||||
{at: 0.75, expect: '70px'},
|
||||
{at: 1, expect: '80px'},
|
||||
{at: 1.25, expect: '90px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'background-position-x',
|
||||
from: 'initial',
|
||||
to: 'right',
|
||||
}, [
|
||||
{at: -0.25, expect: '-25%'},
|
||||
{at: 0, expect: '0%'},
|
||||
{at: 0.25, expect: '25%'},
|
||||
{at: 0.5, expect: '50%'},
|
||||
{at: 0.75, expect: '75%'},
|
||||
{at: 1, expect: '100%'},
|
||||
{at: 1.25, expect: '125%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'background-position-x',
|
||||
from: 'inherit',
|
||||
to: '80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '55px'},
|
||||
{at: 0, expect: '60px'},
|
||||
{at: 0.25, expect: '65px'},
|
||||
{at: 0.5, expect: '70px'},
|
||||
{at: 0.75, expect: '75px'},
|
||||
{at: 1, expect: '80px'},
|
||||
{at: 1.25, expect: '85px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'background-position-x',
|
||||
from: '300px, 400px',
|
||||
to: '500px, 600px, 700px',
|
||||
}, [
|
||||
{at: -0.25, expect: '250px, 350px, 200px, 375px, 225px, 325px'},
|
||||
{at: 0, expect: '300px, 400px, 300px, 400px, 300px, 400px'},
|
||||
{at: 0.25, expect: '350px, 450px, 400px, 425px, 375px, 475px'},
|
||||
{at: 0.5, expect: '400px, 500px, 500px, 450px, 450px, 550px'},
|
||||
{at: 0.75, expect: '450px, 550px, 600px, 475px, 525px, 625px'},
|
||||
{at: 1, expect: '500px, 600px, 700px, 500px, 600px, 700px'},
|
||||
{at: 1.25, expect: '550px, 650px, 800px, 525px, 675px, 775px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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-y supports animation">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
background-position-y: 60px;
|
||||
}
|
||||
|
||||
.target {
|
||||
background-position-y: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'background-position-y',
|
||||
from: neutralKeyframe,
|
||||
to: '80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '30px'},
|
||||
{at: 0, expect: '40px'},
|
||||
{at: 0.25, expect: '50px'},
|
||||
{at: 0.5, expect: '60px'},
|
||||
{at: 0.75, expect: '70px'},
|
||||
{at: 1, expect: '80px'},
|
||||
{at: 1.25, expect: '90px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'background-position-y',
|
||||
from: 'initial',
|
||||
to: 'bottom',
|
||||
}, [
|
||||
{at: -0.25, expect: '-25%'},
|
||||
{at: 0, expect: '0%'},
|
||||
{at: 0.25, expect: '25%'},
|
||||
{at: 0.5, expect: '50%'},
|
||||
{at: 0.75, expect: '75%'},
|
||||
{at: 1, expect: '100%'},
|
||||
{at: 1.25, expect: '125%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'background-position-y',
|
||||
from: 'inherit',
|
||||
to: '80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '55px'},
|
||||
{at: 0, expect: '60px'},
|
||||
{at: 0.25, expect: '65px'},
|
||||
{at: 0.5, expect: '70px'},
|
||||
{at: 0.75, expect: '75px'},
|
||||
{at: 1, expect: '80px'},
|
||||
{at: 1.25, expect: '85px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'background-position-y',
|
||||
from: '300px, 400px',
|
||||
to: '500px, 600px, 700px',
|
||||
}, [
|
||||
{at: -0.25, expect: '250px, 350px, 200px, 375px, 225px, 325px'},
|
||||
{at: 0, expect: '300px, 400px, 300px, 400px, 300px, 400px'},
|
||||
{at: 0.25, expect: '350px, 450px, 400px, 425px, 375px, 475px'},
|
||||
{at: 0.5, expect: '400px, 500px, 500px, 450px, 450px, 550px'},
|
||||
{at: 0.75, expect: '450px, 550px, 600px, 475px, 525px, 625px'},
|
||||
{at: 1, expect: '500px, 600px, 700px, 500px, 600px, 700px'},
|
||||
{at: 1.25, expect: '550px, 650px, 800px, 525px, 675px, 775px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<!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="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
border: 10px solid black;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../resources/stripes-100.png),
|
||||
url(../resources/stripes-100.png),
|
||||
url(../resources/blue-100.png),
|
||||
url(../resources/green-100.png);
|
||||
background-position: left top, right top, left bottom, right bottom;
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
.expected {
|
||||
margin-right: 10px;
|
||||
border-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
// neutral
|
||||
test_interpolation({
|
||||
property: 'background-size',
|
||||
from: neutralKeyframe,
|
||||
to: '20px 20px, 0px 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
|
||||
test_no_interpolation({
|
||||
property: 'background-size',
|
||||
from: 'initial',
|
||||
to: '20px 20px, 0px 0px',
|
||||
});
|
||||
|
||||
// inherit
|
||||
test_interpolation({
|
||||
property: 'background-size',
|
||||
from: 'inherit',
|
||||
to: '20px 20px, 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
|
||||
test_no_interpolation({
|
||||
property: 'background-size',
|
||||
from: 'unset',
|
||||
to: '20px 20px, 0px 0px',
|
||||
});
|
||||
|
||||
// Matched keywords in size value list.
|
||||
test_interpolation({
|
||||
property: 'background-size',
|
||||
from: '0px auto, 0px 0px, contain, cover',
|
||||
to: '40px auto, 40px 40px, 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.
|
||||
test_no_interpolation({
|
||||
property: 'background-size',
|
||||
from: '0px 0px, 0px 0px, contain, cover',
|
||||
to: '40px 40px, 40px 40px, cover, contain',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'background-size',
|
||||
from: '0px auto, 0px 0px',
|
||||
to: 'auto 40px, 40px 40px',
|
||||
});
|
||||
|
||||
// Equal number of size values as background images.
|
||||
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, 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.
|
||||
test_interpolation({
|
||||
property: 'background-size',
|
||||
from: '0px 0px',
|
||||
to: '80px 80px',
|
||||
}, [
|
||||
{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'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'background-size',
|
||||
from: '0px',
|
||||
to: '80px',
|
||||
}, [
|
||||
{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.
|
||||
test_interpolation({
|
||||
property: 'background-size',
|
||||
from: '0px 0px, 80px 0px',
|
||||
to: '40px 40px, 80px 80px, 0px 80px',
|
||||
}, [
|
||||
{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>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-bottom-left-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-bottom-left-radius supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-bottom-left-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-left-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-left-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-bottom-right-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-bottom-right-radius supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-bottom-right-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-right-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-right-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-bottom-width composition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties">
|
||||
<meta name="assert" content="border-bottom-width supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-color interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-color">
|
||||
<meta name="assert" content="border-color supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
border-color: white;
|
||||
}
|
||||
.target {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: blue;
|
||||
display: inline-block;
|
||||
border: 12px solid;
|
||||
border-color: darkblue;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
margin-right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
// As per https://bugzilla.mozilla.org/show_bug.cgi?id=137688, Firefox does not
|
||||
// support getComputedStyle for shorthands. As such, we have one test for this
|
||||
// which explicitly checks the shorthand variant, but most tests use one of the
|
||||
// longhands instead.
|
||||
function compareNotEmpty(actual, expected) {
|
||||
assert_equals(actual, expected);
|
||||
assert_not_equals(actual, '');
|
||||
}
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-color',
|
||||
from: 'rgb(20, 30, 40) rgb(40, 50, 60)',
|
||||
to: 'rgb(10, 20, 30) rgb(40, 50, 60) rgb(30, 40, 50) rgb(50, 60, 70)',
|
||||
comparisonFunction: compareNotEmpty,
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(23, 33, 43) rgb(40, 50, 60) rgb(17, 27, 37) rgb(37, 47, 57)'},
|
||||
{at: 0, expect: 'rgb(20, 30, 40) rgb(40, 50, 60)'},
|
||||
{at: 0.3, expect: 'rgb(17, 27, 37) rgb(40, 50, 60) rgb(23, 33, 43) rgb(43, 53, 63)'},
|
||||
{at: 0.6, expect: 'rgb(14, 24, 34) rgb(40, 50, 60) rgb(26, 36, 46) rgb(46, 56, 66)'},
|
||||
{at: 1, expect: 'rgb(10, 20, 30) rgb(40, 50, 60) rgb(30, 40, 50) rgb(50, 60, 70)'},
|
||||
{at: 1.5, expect: 'rgb(5, 15, 25) rgb(40, 50, 60) rgb(35, 45, 55) rgb(55, 65, 75)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-color',
|
||||
from: neutralKeyframe,
|
||||
to: 'orange',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 181)'},
|
||||
{at: 0, expect: 'rgb(0, 0, 139)'},
|
||||
{at: 0.3, expect: 'rgb(77, 50, 97)'},
|
||||
{at: 0.6, expect: 'rgb(153, 99, 56)'},
|
||||
{at: 1, expect: 'rgb(255, 165, 0)'},
|
||||
{at: 1.5, expect: 'rgb(255, 248, 0)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-color',
|
||||
from: 'initial',
|
||||
to: 'orange',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0)'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0)'},
|
||||
{at: 0.3, expect: 'rgb(77, 50, 0)'},
|
||||
{at: 0.6, expect: 'rgb(153, 99, 0)'},
|
||||
{at: 1, expect: 'rgb(255, 165, 0)'},
|
||||
{at: 1.5, expect: 'rgb(255, 248, 0)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-color',
|
||||
from: 'inherit',
|
||||
to: 'orange',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(255, 255, 255)'},
|
||||
{at: 0, expect: 'rgb(255, 255, 255)'},
|
||||
{at: 0.3, expect: 'rgb(255, 228, 179)'},
|
||||
{at: 0.6, expect: 'rgb(255, 201, 102)'},
|
||||
{at: 1, expect: 'rgb(255, 165, 0)'},
|
||||
{at: 1.5, expect: 'rgb(255, 120, 0)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-color',
|
||||
from: 'unset',
|
||||
to: 'orange',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0)'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0)'},
|
||||
{at: 0.3, expect: 'rgb(77, 50, 0)'},
|
||||
{at: 0.6, expect: 'rgb(153, 99, 0)'},
|
||||
{at: 1, expect: 'rgb(255, 165, 0)'},
|
||||
{at: 1.5, expect: 'rgb(255, 248, 0)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-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)'},
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-outset composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset">
|
||||
<meta name="assert" content="border-image-outset supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '1 2 3 4',
|
||||
addFrom: '1 2 3 4',
|
||||
addTo: '101 102 103 104',
|
||||
}, [
|
||||
{at: -0.25, expect: '0'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6 8'},
|
||||
{at: 0.25, expect: '27 29 31 33'},
|
||||
{at: 0.5, expect: '52 54 56 58'},
|
||||
{at: 0.75, expect: '77 79 81 83'},
|
||||
{at: 1, expect: '102 104 106 108'},
|
||||
{at: 1.25, expect: '127 129 131 133'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '100 200 300 400',
|
||||
addFrom: '100',
|
||||
addTo: '200 300 500',
|
||||
}, [
|
||||
{at: -0.25, expect: '175 250 300 450'},
|
||||
{at: 0, expect: '200 300 400 500'},
|
||||
{at: 0.25, expect: '225 350 500 550'},
|
||||
{at: 0.5, expect: '250 400 600 600'},
|
||||
{at: 0.75, expect: '275 450 700 650'},
|
||||
{at: 1, expect: '300 500 800 700'},
|
||||
{at: 1.25, expect: '325 550 900 750'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '1 2 3px 4px',
|
||||
addFrom: '1 2 3px 4px',
|
||||
addTo: '101 102 103px 104px',
|
||||
}, [
|
||||
{at: -0.25, expect: '0 0 0px 0px'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6px 8px'},
|
||||
{at: 0.25, expect: '27 29 31px 33px'},
|
||||
{at: 0.5, expect: '52 54 56px 58px'},
|
||||
{at: 0.75, expect: '77 79 81px 83px'},
|
||||
{at: 1, expect: '102 104 106px 108px'},
|
||||
{at: 1.25, expect: '127 129 131px 133px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10px 20px',
|
||||
addFrom: '190px 180px 290px 280px',
|
||||
addTo: '90px 80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '225px 225px 350px 350px'},
|
||||
{at: 0, expect: '200px 200px 300px 300px'},
|
||||
{at: 0.25, expect: '175px 175px 250px 250px'},
|
||||
{at: 0.5, expect: '150px 150px 200px 200px'},
|
||||
{at: 0.75, expect: '125px 125px 150px 150px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 1.25, expect: '75px 75px 50px 50px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10 20px',
|
||||
replaceFrom: '100 100px',
|
||||
addTo: '190 180px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75 75px'},
|
||||
{at: 0, expect: '100 100px'},
|
||||
{at: 0.25, expect: '125 125px'},
|
||||
{at: 0.5, expect: '150 150px'},
|
||||
{at: 0.75, expect: '175 175px'},
|
||||
{at: 1, expect: '200 200px'},
|
||||
{at: 1.25, expect: '225 225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10px 20',
|
||||
addFrom: '90px 80',
|
||||
replaceTo: '0px 0 0px 0',
|
||||
}, [
|
||||
{at: -0.25, expect: '125px 125'},
|
||||
{at: 0, expect: '100px 100'},
|
||||
{at: 0.25, expect: '75px 75'},
|
||||
{at: 0.5, expect: '50px 50'},
|
||||
{at: 0.75, expect: '25px 25'},
|
||||
{at: 1, expect: '0px 0'},
|
||||
{at: 1.25, expect: '0px 0'}, // Non-negative.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10 20',
|
||||
addFrom: '100px 150px',
|
||||
addTo: '200px 250px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 125px'},
|
||||
{at: 0, expect: '100px 150px'},
|
||||
{at: 0.25, expect: '125px 175px'},
|
||||
{at: 0.5, expect: '150px 200px'},
|
||||
{at: 0.75, expect: '175px 225px'},
|
||||
{at: 1, expect: '200px 250px'},
|
||||
{at: 1.25, expect: '225px 275px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10 20',
|
||||
addFrom: '100 150px',
|
||||
addTo: '200px 250',
|
||||
}, [
|
||||
{at: -0.25, expect: '100 150px'},
|
||||
{at: 0, expect: '100 150px'},
|
||||
{at: 0.25, expect: '100 150px'},
|
||||
{at: 0.5, expect: '200px 250'},
|
||||
{at: 0.75, expect: '200px 250'},
|
||||
{at: 1, expect: '200px 250'},
|
||||
{at: 1.25, expect: '200px 250'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-outset interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset">
|
||||
<meta name="assert" content="border-image-outset supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
border-image-outset: 10px;
|
||||
}
|
||||
.target {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
border: 25px;
|
||||
margin-right: 50px;
|
||||
border-image-slice: 30%;
|
||||
background-clip: content-box;
|
||||
border-image-source: linear-gradient(45deg, pink, blue, white, black, green);
|
||||
border-image-outset: 1px;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'border-image-outset',
|
||||
from: neutralKeyframe,
|
||||
to: '2px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0.7px'},
|
||||
{at: 0, expect: '1px'},
|
||||
{at: 0.3, expect: '1.3px'},
|
||||
{at: 0.6, expect: '1.6px'},
|
||||
{at: 1, expect: '2px'},
|
||||
{at: 1.5, expect: '2.5px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-outset',
|
||||
from: 'initial',
|
||||
to: '2',
|
||||
}, [
|
||||
{at: -0.3, expect: '0'}, // Non-negative
|
||||
{at: 0, expect: '0'},
|
||||
{at: 0.3, expect: '0.6'},
|
||||
{at: 0.6, expect: '1.2'},
|
||||
{at: 1, expect: '2'},
|
||||
{at: 1.5, expect: '3'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-outset',
|
||||
from: 'inherit',
|
||||
to: '2px',
|
||||
}, [
|
||||
{at: -0.3, expect: '12.4px'},
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.3, expect: '7.6px'},
|
||||
{at: 0.6, expect: '5.2px'},
|
||||
{at: 1, expect: '2px'},
|
||||
{at: 1.5, expect: '0px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-outset',
|
||||
from: 'unset',
|
||||
to: '2',
|
||||
}, [
|
||||
{at: -0.3, expect: '0'}, // Non-negative
|
||||
{at: 0, expect: '0'},
|
||||
{at: 0.3, expect: '0.6'},
|
||||
{at: 0.6, expect: '1.2'},
|
||||
{at: 1, expect: '2'},
|
||||
{at: 1.5, expect: '3'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-outset',
|
||||
from: '0px',
|
||||
to: '5px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'}, // Non-negative
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '1.5px'},
|
||||
{at: 0.6, expect: '3px'},
|
||||
{at: 1, expect: '5px'},
|
||||
{at: 1.5, expect: '7.5px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-outset',
|
||||
from: '0',
|
||||
to: '1',
|
||||
}, [
|
||||
{at: -0.3, expect: '0'}, // Non-negative
|
||||
{at: 0, expect: '0'},
|
||||
{at: 0.3, expect: '0.3'},
|
||||
{at: 0.6, expect: '0.6'},
|
||||
{at: 1, expect: '1'},
|
||||
{at: 1.5, expect: '1.5'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-outset',
|
||||
from: '1 2 3px 4px',
|
||||
to: '101 102 103px 104px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0 0 0px 0px'}, // Non-negative
|
||||
{at: 0, expect: '1 2 3px 4px'},
|
||||
{at: 0.3, expect: '31 32 33px 34px'},
|
||||
{at: 0.6, expect: '61 62 63px 64px'},
|
||||
{at: 1, expect: '101 102 103px 104px'},
|
||||
{at: 1.5, expect: '151 152 153px 154px'},
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-slice composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice">
|
||||
<meta name="assert" content="border-image-slice supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '1 2 3 4',
|
||||
addFrom: '1 2 3 4',
|
||||
addTo: '101 102 103 104',
|
||||
}, [
|
||||
{at: -0.25, expect: '0'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6 8'},
|
||||
{at: 0.25, expect: '27 29 31 33'},
|
||||
{at: 0.5, expect: '52 54 56 58'},
|
||||
{at: 0.75, expect: '77 79 81 83'},
|
||||
{at: 1, expect: '102 104 106 108'},
|
||||
{at: 1.25, expect: '127 129 131 133'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '100 200 300 400 fill',
|
||||
addFrom: '100 fill',
|
||||
addTo: '200 300 500 fill',
|
||||
}, [
|
||||
{at: -0.25, expect: '175 250 300 450 fill'},
|
||||
{at: 0, expect: '200 300 400 500 fill'},
|
||||
{at: 0.25, expect: '225 350 500 550 fill'},
|
||||
{at: 0.5, expect: '250 400 600 600 fill'},
|
||||
{at: 0.75, expect: '275 450 700 650 fill'},
|
||||
{at: 1, expect: '300 500 800 700 fill'},
|
||||
{at: 1.25, expect: '325 550 900 750 fill'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '1 2 3% 4%',
|
||||
addFrom: '1 2 3% 4%',
|
||||
addTo: '101 102 103% 104%',
|
||||
}, [
|
||||
{at: -0.25, expect: '0 0 0% 0%'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6% 8%'},
|
||||
{at: 0.25, expect: '27 29 31% 33%'},
|
||||
{at: 0.5, expect: '52 54 56% 58%'},
|
||||
{at: 0.75, expect: '77 79 81% 83%'},
|
||||
{at: 1, expect: '102 104 106% 108%'},
|
||||
{at: 1.25, expect: '127 129 131% 133%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10% 20%',
|
||||
addFrom: '190% 180% 290% 280%',
|
||||
addTo: '90% 80%',
|
||||
}, [
|
||||
{at: -0.25, expect: '225% 225% 350% 350%'},
|
||||
{at: 0, expect: '200% 200% 300% 300%'},
|
||||
{at: 0.25, expect: '175% 175% 250% 250%'},
|
||||
{at: 0.5, expect: '150% 150% 200% 200%'},
|
||||
{at: 0.75, expect: '125% 125% 150% 150%'},
|
||||
{at: 1, expect: '100%'},
|
||||
{at: 1.25, expect: '75% 75% 50% 50%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10 20%',
|
||||
replaceFrom: '100 100%',
|
||||
addTo: '190 180%',
|
||||
}, [
|
||||
{at: -0.25, expect: '75 75%'},
|
||||
{at: 0, expect: '100 100%'},
|
||||
{at: 0.25, expect: '125 125%'},
|
||||
{at: 0.5, expect: '150 150%'},
|
||||
{at: 0.75, expect: '175 175%'},
|
||||
{at: 1, expect: '200 200%'},
|
||||
{at: 1.25, expect: '225 225%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10% 20',
|
||||
addFrom: '90% 80',
|
||||
replaceTo: '0% 0 0% 0',
|
||||
}, [
|
||||
{at: -0.25, expect: '125% 125'},
|
||||
{at: 0, expect: '100% 100'},
|
||||
{at: 0.25, expect: '75% 75'},
|
||||
{at: 0.5, expect: '50% 50'},
|
||||
{at: 0.75, expect: '25% 25'},
|
||||
{at: 1, expect: '0% 0'},
|
||||
{at: 1.25, expect: '0% 0'}, // Non-negative.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10 20',
|
||||
addFrom: '100% 150%',
|
||||
addTo: '200% 250% fill',
|
||||
}, [
|
||||
{at: -0.25, expect: '100% 150%'},
|
||||
{at: 0, expect: '100% 150%'},
|
||||
{at: 0.25, expect: '100% 150%'},
|
||||
{at: 0.5, expect: '200% 250% fill'},
|
||||
{at: 0.75, expect: '200% 250% fill'},
|
||||
{at: 1, expect: '200% 250% fill'},
|
||||
{at: 1.25, expect: '200% 250% fill'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10 20',
|
||||
addFrom: '100 150%',
|
||||
addTo: '200% 250',
|
||||
}, [
|
||||
{at: -0.25, expect: '100 150%'},
|
||||
{at: 0, expect: '100 150%'},
|
||||
{at: 0.25, expect: '100 150%'},
|
||||
{at: 0.5, expect: '200% 250'},
|
||||
{at: 0.75, expect: '200% 250'},
|
||||
{at: 1, expect: '200% 250'},
|
||||
{at: 1.25, expect: '200% 250'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-slice interpolation stability</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
var player = target.animate([
|
||||
{borderImageSlice: '50'},
|
||||
{borderImageSlice: '50'},
|
||||
], {
|
||||
duration: 1,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)',
|
||||
});
|
||||
player.pause();
|
||||
player.currentTime = 0.6345195996109396
|
||||
assert_equals(getComputedStyle(target).borderImageSlice, '50');
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-slice interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice">
|
||||
<meta name="assert" content="border-image-slice supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
border-image-slice: 50%;
|
||||
}
|
||||
.target {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
border: 25px;
|
||||
border-image-source: linear-gradient(45deg, red, blue, green);
|
||||
border-image-slice: 20%;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
margin-right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: neutralKeyframe,
|
||||
to: '10%',
|
||||
}, [
|
||||
{at: -0.3, expect: '23%'},
|
||||
{at: 0, expect: '20%'},
|
||||
{at: 0.3, expect: '17%'},
|
||||
{at: 0.5, expect: '15%'},
|
||||
{at: 0.6, expect: '14%'},
|
||||
{at: 1, expect: '10%'},
|
||||
{at: 1.5, expect: '5%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: 'initial',
|
||||
to: '10%',
|
||||
}, [
|
||||
{at: -0.3, expect: '127%'},
|
||||
{at: 0, expect: '100%'},
|
||||
{at: 0.3, expect: '73%'},
|
||||
{at: 0.5, expect: '55%'},
|
||||
{at: 0.6, expect: '46%'},
|
||||
{at: 1, expect: '10%'},
|
||||
{at: 1.5, expect: '0%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: 'inherit',
|
||||
to: '10%',
|
||||
}, [
|
||||
{at: -0.3, expect: '62%'},
|
||||
{at: 0, expect: '50%'},
|
||||
{at: 0.3, expect: '38%'},
|
||||
{at: 0.5, expect: '30%'},
|
||||
{at: 0.6, expect: '26%'},
|
||||
{at: 1, expect: '10%'},
|
||||
{at: 1.5, expect: '0%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: 'unset',
|
||||
to: '10%',
|
||||
}, [
|
||||
{at: -0.3, expect: '127%'},
|
||||
{at: 0, expect: '100%'},
|
||||
{at: 0.3, expect: '73%'},
|
||||
{at: 0.5, expect: '55%'},
|
||||
{at: 0.6, expect: '46%'},
|
||||
{at: 1, expect: '10%'},
|
||||
{at: 1.5, expect: '0%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '0%',
|
||||
to: '50%',
|
||||
}, [
|
||||
{at: -0.3, expect: '0%'}, // CSS border-image-slice can't be negative.
|
||||
{at: 0, expect: '0%'},
|
||||
{at: 0.3, expect: '15%'},
|
||||
{at: 0.5, expect: '25%'},
|
||||
{at: 0.6, expect: '30%'},
|
||||
{at: 1, expect: '50%'},
|
||||
{at: 1.5, expect: '75%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '0% 10% 20% 30%',
|
||||
to: '40% 50% 60% 70%',
|
||||
}, [
|
||||
{at: -0.5, expect: '0% 0% 0% 10%'},
|
||||
{at: 0, expect: '0% 10% 20% 30%'},
|
||||
{at: 0.3, expect: '12% 22% 32% 42%'},
|
||||
{at: 0.5, expect: '20% 30% 40% 50%'},
|
||||
{at: 0.6, expect: '24% 34% 44% 54%'},
|
||||
{at: 1, expect: '40% 50% 60% 70%'},
|
||||
{at: 1.5, expect: '60% 70% 80% 90%'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '0 10 20 30 fill',
|
||||
to: '40 50 60 70 fill',
|
||||
}, [
|
||||
{at: -0.5, expect: '0 0 0 10 fill'}, // CSS border-image-slice can't be negative.
|
||||
{at: 0, expect: '0 10 20 30 fill'},
|
||||
{at: 0.3, expect: '12 22 32 42 fill'},
|
||||
{at: 0.5, expect: '20 30 40 50 fill'},
|
||||
{at: 0.6, expect: '24 34 44 54 fill'},
|
||||
{at: 1, expect: '40 50 60 70 fill'},
|
||||
{at: 1.5, expect: '60 70 80 90 fill'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '0% 10 20% 30 fill',
|
||||
to: '40% 50 60% 70 fill',
|
||||
}, [
|
||||
{at: -0.5, expect: '0% 0 0% 10 fill'}, // CSS border-image-slice can't be negative.
|
||||
{at: 0, expect: '0% 10 20% 30 fill'},
|
||||
{at: 0.3, expect: '12% 22 32% 42 fill'},
|
||||
{at: 0.5, expect: '20% 30 40% 50 fill'},
|
||||
{at: 0.6, expect: '24% 34 44% 54 fill'},
|
||||
{at: 1, expect: '40% 50 60% 70 fill'},
|
||||
{at: 1.5, expect: '60% 70 80% 90 fill'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '0% fill',
|
||||
to: '50%',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '50%',
|
||||
to: '100',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '50% fill',
|
||||
to: '100 fill',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '0% 10 20% 30 fill',
|
||||
to: '40% 50 60% 70',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'border-image-slice',
|
||||
from: '0% 10 20 30 fill',
|
||||
to: '40 50 60% 70',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-source interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-source">
|
||||
<meta name="assert" content="border-image-source has discrete animation">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
border-image-source: url(../support/green.png);
|
||||
}
|
||||
.target {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
border: 5px solid aqua;
|
||||
border-image-source: url(../support/blue_color.png);
|
||||
border-image-slice: 10%;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
margin-right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
// initial
|
||||
test_no_interpolation({
|
||||
property: 'border-image-source',
|
||||
from: 'initial',
|
||||
to: 'url(../support/orange_color.png)',
|
||||
});
|
||||
|
||||
// inherit
|
||||
test_no_interpolation({
|
||||
property: 'border-image-source',
|
||||
from: 'inherit',
|
||||
to: 'url(../support/orange_color.png)',
|
||||
});
|
||||
|
||||
// unset
|
||||
test_no_interpolation({
|
||||
property: 'border-image-source',
|
||||
from: 'unset',
|
||||
to: 'url(../support/orange_color.png)',
|
||||
});
|
||||
|
||||
// None to image
|
||||
test_no_interpolation({
|
||||
property: 'border-image-source',
|
||||
from: 'none',
|
||||
to: 'url(../support/orange_color.png)',
|
||||
});
|
||||
|
||||
// Image to image
|
||||
test_no_interpolation({
|
||||
property: 'border-image-source',
|
||||
from: 'url(../support/aqua_color.png)',
|
||||
to: 'url(../support/orange_color.png)',
|
||||
});
|
||||
|
||||
// Image to gradient
|
||||
test_no_interpolation({
|
||||
property: 'border-image-source',
|
||||
from: 'url(../support/aqua_color.png)',
|
||||
to: 'linear-gradient(45deg, blue, orange)',
|
||||
});
|
||||
|
||||
// Gradient to gradient
|
||||
test_no_interpolation({
|
||||
property: 'border-image-source',
|
||||
from: 'linear-gradient(-45deg, red, yellow)',
|
||||
to: 'linear-gradient(45deg, blue, orange)',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-width composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-width">
|
||||
<meta name="assert" content="border-image-width supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '1 2 3 4',
|
||||
addFrom: '1 2 3 4',
|
||||
addTo: '101 102 103 104',
|
||||
}, [
|
||||
{at: -0.25, expect: '0'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6 8'},
|
||||
{at: 0.25, expect: '27 29 31 33'},
|
||||
{at: 0.5, expect: '52 54 56 58'},
|
||||
{at: 0.75, expect: '77 79 81 83'},
|
||||
{at: 1, expect: '102 104 106 108'},
|
||||
{at: 1.25, expect: '127 129 131 133'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '100 200 300 400',
|
||||
addFrom: '100',
|
||||
addTo: '200 300 500',
|
||||
}, [
|
||||
{at: -0.25, expect: '175 250 300 450'},
|
||||
{at: 0, expect: '200 300 400 500'},
|
||||
{at: 0.25, expect: '225 350 500 550'},
|
||||
{at: 0.5, expect: '250 400 600 600'},
|
||||
{at: 0.75, expect: '275 450 700 650'},
|
||||
{at: 1, expect: '300 500 800 700'},
|
||||
{at: 1.25, expect: '325 550 900 750'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '1 2 3px 4%',
|
||||
addFrom: '1 2 3px 4%',
|
||||
addTo: '101 102 103px 104%',
|
||||
}, [
|
||||
{at: -0.25, expect: '0 0 0px 0%'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6px 8%'},
|
||||
{at: 0.25, expect: '27 29 31px 33%'},
|
||||
{at: 0.5, expect: '52 54 56px 58%'},
|
||||
{at: 0.75, expect: '77 79 81px 83%'},
|
||||
{at: 1, expect: '102 104 106px 108%'},
|
||||
{at: 1.25, expect: '127 129 131px 133%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10px 20px',
|
||||
addFrom: '190px 180px 290px 280px',
|
||||
addTo: '90px 80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '225px 225px 350px 350px'},
|
||||
{at: 0, expect: '200px 200px 300px 300px'},
|
||||
{at: 0.25, expect: '175px 175px 250px 250px'},
|
||||
{at: 0.5, expect: '150px 150px 200px 200px'},
|
||||
{at: 0.75, expect: '125px 125px 150px 150px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 1.25, expect: '75px 75px 50px 50px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10 20px',
|
||||
replaceFrom: '100 100px',
|
||||
addTo: '190 180px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75 75px'},
|
||||
{at: 0, expect: '100 100px'},
|
||||
{at: 0.25, expect: '125 125px'},
|
||||
{at: 0.5, expect: '150 150px'},
|
||||
{at: 0.75, expect: '175 175px'},
|
||||
{at: 1, expect: '200 200px'},
|
||||
{at: 1.25, expect: '225 225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10px 20',
|
||||
addFrom: '90px 80',
|
||||
replaceTo: '0px 0 0px 0',
|
||||
}, [
|
||||
{at: -0.25, expect: '125px 125'},
|
||||
{at: 0, expect: '100px 100'},
|
||||
{at: 0.25, expect: '75px 75'},
|
||||
{at: 0.5, expect: '50px 50'},
|
||||
{at: 0.75, expect: '25px 25'},
|
||||
{at: 1, expect: '0px 0'},
|
||||
{at: 1.25, expect: '0px 0'}, // Non-negative.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10 20',
|
||||
addFrom: '100px 150px',
|
||||
addTo: '200px 250px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 125px'},
|
||||
{at: 0, expect: '100px 150px'},
|
||||
{at: 0.25, expect: '125px 175px'},
|
||||
{at: 0.5, expect: '150px 200px'},
|
||||
{at: 0.75, expect: '175px 225px'},
|
||||
{at: 1, expect: '200px 250px'},
|
||||
{at: 1.25, expect: '225px 275px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10 20',
|
||||
addFrom: '100 150px',
|
||||
addTo: '200% 250',
|
||||
}, [
|
||||
{at: -0.25, expect: '100 150px'},
|
||||
{at: 0, expect: '100 150px'},
|
||||
{at: 0.25, expect: '100 150px'},
|
||||
{at: 0.5, expect: '200% 250'},
|
||||
{at: 0.75, expect: '200% 250'},
|
||||
{at: 1, expect: '200% 250'},
|
||||
{at: 1.25, expect: '200% 250'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-width interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-width">
|
||||
<meta name="assert" content="border-image-width supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
border-image-width: 100px;
|
||||
}
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
border: 10px;
|
||||
border-image-source: linear-gradient(45deg, red, blue, green);
|
||||
border-image-width: 10px;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
margin-right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: neutralKeyframe,
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '7px'},
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.3, expect: '13px'},
|
||||
{at: 0.6, expect: '16px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '25px'},
|
||||
{at: 5, expect: '60px'},
|
||||
{at: 10, expect: '110px'},
|
||||
]);
|
||||
test_no_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: 'initial',
|
||||
to: '20px',
|
||||
});
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: 'inherit',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '124px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.3, expect: '76px'},
|
||||
{at: 0.6, expect: '52px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '0px'},
|
||||
{at: 5, expect: '0px'},
|
||||
{at: 10, expect: '0px'},
|
||||
]);
|
||||
test_no_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: 'unset',
|
||||
to: '20px',
|
||||
});
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '0px',
|
||||
to: '20px'
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'}, // CSS border-image-width can't be negative.
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '6px'},
|
||||
{at: 0.6, expect: '12px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '30px'},
|
||||
{at: 5, expect: '100px'},
|
||||
{at: 10, expect: '200px'}
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '0%',
|
||||
to: '20%'
|
||||
}, [
|
||||
{at: -0.3, expect: '0%'}, // CSS border-image-width can't be negative.
|
||||
{at: 0, expect: '0%'},
|
||||
{at: 0.3, expect: '6%'},
|
||||
{at: 0.6, expect: '12%'},
|
||||
{at: 1, expect: '20%'},
|
||||
{at: 1.5, expect: '30%'},
|
||||
{at: 5, expect: '100%'},
|
||||
{at: 10, expect: '200%'}
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '0',
|
||||
to: '20'
|
||||
}, [
|
||||
{at: -0.3, expect: '0'}, // CSS border-image-width can't be negative.
|
||||
{at: 0, expect: '0'},
|
||||
{at: 0.3, expect: '6'},
|
||||
{at: 0.6, expect: '12'},
|
||||
{at: 1, expect: '20'},
|
||||
{at: 1.5, expect: '30'},
|
||||
{at: 5, expect: '100'},
|
||||
{at: 10, expect: '200'}
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10px 20% 30 40px',
|
||||
to: '80px 70% 60 50px'
|
||||
}, [
|
||||
{at: -0.3, expect: '0px 5% 21 37px'}, // CSS border-image-width can't be negative.
|
||||
{at: 0, expect: '10px 20% 30 40px'},
|
||||
{at: 0.3, expect: '31px 35% 39 43px'},
|
||||
{at: 0.6, expect: '52px 50% 48 46px'},
|
||||
{at: 1, expect: '80px 70% 60 50px'},
|
||||
{at: 1.5, expect: '115px 95% 75 55px'},
|
||||
{at: 5, expect: '360px 270% 180 90px'},
|
||||
{at: 10, expect: '710px 520% 330 140px'}
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10%',
|
||||
to: '20px'
|
||||
}, [
|
||||
// Percentages are relative to the size of the border image area, which is 120px.
|
||||
{at: -0.3, expect: 'calc(13% + -6px)'}, // Should be parsed as 16px - 6px = 10px
|
||||
{at: 0, expect: '10%'}, // Should be parsed as 12px
|
||||
{at: 0.3, expect: 'calc(7% + 6px)'}, // Should be parsed as 8px + 6px = 14px
|
||||
{at: 0.6, expect: 'calc(4% + 12px)'}, // Should be parsed as 5px + 12px = 17px
|
||||
{at: 1, expect: 'calc(0% + 20px)'},
|
||||
{at: 1.5, expect: 'calc(-5% + 30px)'}, // Should be parsed as -6px + 30px = 24px
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10px',
|
||||
to: '20%'
|
||||
}, [
|
||||
// Percentages are relative to the size of the border image area, which is 120px.
|
||||
{at: -0.3, expect: 'calc(13px + -6%)'}, // Should be parsed as 13px - 7px = 6px
|
||||
{at: 0, expect: 'calc(0% + 10px)'},
|
||||
{at: 0.3, expect: 'calc(7px + 6%)'}, // Should be parsed as 7px + 7px = 14px
|
||||
{at: 0.6, expect: 'calc(4px + 12%)'}, // Should be parsed as 4px + 14px = 18px
|
||||
{at: 1, expect: '20%'}, // Should be parsed as 24px
|
||||
{at: 1.5, expect: 'calc(-5px + 30%)'}, // Should be parsed as -5px + 36px = 31px
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10px auto auto 20',
|
||||
to: '110px auto auto 120'
|
||||
}, [
|
||||
{at: -0.3, expect: ' 0px auto auto 0'},
|
||||
{at: 0, expect: ' 10px auto auto 20'},
|
||||
{at: 0.3, expect: ' 40px auto auto 50'},
|
||||
{at: 0.6, expect: ' 70px auto auto 80'},
|
||||
{at: 1, expect: '110px auto auto 120'},
|
||||
{at: 1.5, expect: '160px auto auto 170'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10px auto auto 20',
|
||||
to: '110px auto 120 auto'
|
||||
});
|
||||
test_no_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10px',
|
||||
to: '20'
|
||||
});
|
||||
test_no_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10',
|
||||
to: '20px'
|
||||
});
|
||||
test_no_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10%',
|
||||
to: '20'
|
||||
});
|
||||
test_no_interpolation({
|
||||
property: 'border-image-width',
|
||||
from: '10',
|
||||
to: '20%'
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-left-width composition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties">
|
||||
<meta name="assert" content="border-left-width supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-radius interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">
|
||||
<meta name="assert" content="border-radius supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
border-radius: 30px;
|
||||
}
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
background-color: black;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
// As per https://bugzilla.mozilla.org/show_bug.cgi?id=137688, Firefox does not
|
||||
// support getComputedStyle for shorthands. As such, we have one test for this
|
||||
// which explicitly checks the shorthand variant, but most tests use one of the
|
||||
// longhands instead.
|
||||
function compareNotEmpty(actual, expected) {
|
||||
assert_equals(actual, expected);
|
||||
assert_not_equals(actual, '');
|
||||
}
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-radius',
|
||||
from: '20px 40px 60px 80px / 120px 140px 160px 180px',
|
||||
to: '30px 50px 70px 90px / 130px 150px 170px 190px',
|
||||
comparisonFunction: compareNotEmpty,
|
||||
}, [
|
||||
{at: -0.3, expect: '17px 37px 57px 77px / 117px 137px 157px 177px'},
|
||||
{at: 0, expect: '20px 40px 60px 80px / 120px 140px 160px 180px'},
|
||||
{at: 0.3, expect: '23px 43px 63px 83px / 123px 143px 163px 183px'},
|
||||
{at: 0.6, expect: '26px 46px 66px 86px / 126px 146px 166px 186px'},
|
||||
{at: 1, expect: '30px 50px 70px 90px / 130px 150px 170px 190px'},
|
||||
{at: 1.5, expect: '35px 55px 75px 95px / 135px 155px 175px 195px'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-left-radius',
|
||||
from: neutralKeyframe,
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '7px'},
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.3, expect: '13px'},
|
||||
{at: 0.6, expect: '16px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '25px'},
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-top-left-radius',
|
||||
from: 'initial',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '6px'},
|
||||
{at: 0.6, expect: '12px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '30px'},
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-top-left-radius',
|
||||
from: 'inherit',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '33px'},
|
||||
{at: 0, expect: '30px'},
|
||||
{at: 0.3, expect: '27px'},
|
||||
{at: 0.6, expect: '24px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '15px'},
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-top-left-radius',
|
||||
from: 'unset',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '6px'},
|
||||
{at: 0.6, expect: '12px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '30px'},
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-top-left-radius',
|
||||
from: '10px',
|
||||
to: '50px'
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'}, // CSS border-top-left-radius can't be negative.
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.3, expect: '22px'},
|
||||
{at: 0.6, expect: '34px'},
|
||||
{at: 1, expect: '50px'},
|
||||
{at: 1.5, expect: '70px'},
|
||||
]);
|
||||
test_interpolation({
|
||||
property: 'border-top-left-radius',
|
||||
from: '10px',
|
||||
to: '100%'
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(13px + -30%)'},
|
||||
{at: 0, expect: 'calc(10px + 0%)'},
|
||||
{at: 0.3, expect: 'calc(7px + 30%)'},
|
||||
{at: 0.6, expect: 'calc(4px + 60%)'},
|
||||
{at: 1, expect: '100%'},
|
||||
{at: 1.5, expect: 'calc(-5px + 150%)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-left-radius',
|
||||
from: '20px',
|
||||
to: '10px 30px'
|
||||
}, [
|
||||
{at: -2, expect: '40px 0px'},
|
||||
{at: -0.3, expect: '23px 17px'},
|
||||
{at: 0, expect: '20px'},
|
||||
{at: 0.3, expect: '17px 23px'},
|
||||
{at: 0.6, expect: '14px 26px'},
|
||||
{at: 1, expect: '10px 30px'},
|
||||
{at: 1.5, expect: '5px 35px'}
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-right-width composition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties">
|
||||
<meta name="assert" content="border-right-width supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-top-left-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-top-left-radius supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-top-left-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-left-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-left-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-top-right-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-top-right-radius supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-top-right-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-right-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-right-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-top-width composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width">
|
||||
<meta name="assert" content="border-top-width supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-width interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width">
|
||||
<meta name="assert" content="border-width supports animation by computed value">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
border-width: 30px;
|
||||
}
|
||||
.target {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
border: 2px solid orange;
|
||||
margin: 18px;
|
||||
border-width: 10px;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
// As per https://bugzilla.mozilla.org/show_bug.cgi?id=137688, Firefox does not
|
||||
// support getComputedStyle for shorthands. As such, we have one test for this
|
||||
// which explicitly checks the shorthand variant, but most tests use one of the
|
||||
// longhands instead.
|
||||
function compareNotEmpty(actual, expected) {
|
||||
assert_equals(actual, expected);
|
||||
assert_not_equals(actual, '');
|
||||
}
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-width',
|
||||
from: '20px 40px 60px 80px',
|
||||
to: '30px 50px 70px 90px',
|
||||
comparisonFunction: compareNotEmpty,
|
||||
}, [
|
||||
{at: -0.3, expect: '17px 37px 57px 77px'},
|
||||
{at: 0, expect: '20px 40px 60px 80px'},
|
||||
{at: 0.3, expect: '23px 43px 63px 83px'},
|
||||
{at: 0.6, expect: '26px 46px 66px 86px'},
|
||||
{at: 1, expect: '30px 50px 70px 90px'},
|
||||
{at: 1.5, expect: '35px 55px 75px 95px'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-left-width',
|
||||
from: neutralKeyframe,
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '7px'},
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.3, expect: '13px'},
|
||||
{at: 0.6, expect: '16px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '25px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-left-width',
|
||||
from: 'initial',
|
||||
to: '23px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'},
|
||||
{at: 0, expect: '3px'},
|
||||
{at: 0.3, expect: '9px'},
|
||||
{at: 0.6, expect: '15px'},
|
||||
{at: 1, expect: '23px'},
|
||||
{at: 1.5, expect: '33px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-left-width',
|
||||
from: 'inherit',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '6px'},
|
||||
{at: 0.6, expect: '12px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '30px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-left-width',
|
||||
from: 'unset',
|
||||
to: '23px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'},
|
||||
{at: 0, expect: '3px'},
|
||||
{at: 0.3, expect: '9px'},
|
||||
{at: 0.6, expect: '15px'},
|
||||
{at: 1, expect: '23px'},
|
||||
{at: 1.5, expect: '33px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-left-width',
|
||||
from: '0px',
|
||||
to: '10px'
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'}, // CSS border-left-width can't be negative.
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '3px'},
|
||||
{at: 0.6, expect: '6px'},
|
||||
{at: 1, expect: '10px'},
|
||||
{at: 1.5, expect: '15px'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-bottom-width',
|
||||
from: 'thick',
|
||||
to: '15px'
|
||||
}, [
|
||||
{at: -2, expect: '0px'}, // CSS border-bottom-width can't be negative.
|
||||
{at: -0.3, expect: '2px'},
|
||||
{at: 0, expect: '5px'},
|
||||
{at: 0.3, expect: '8px'},
|
||||
{at: 0.6, expect: '11px'},
|
||||
{at: 1, expect: '15px'},
|
||||
{at: 1.5, expect: '20px'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-left-width',
|
||||
from: 'medium',
|
||||
to: '13px'
|
||||
}, [
|
||||
{at: -2, expect: '0px'}, // CSS border-left-width can't be negative.
|
||||
{at: -0.25, expect: '0.5px'},
|
||||
{at: 0, expect: '3px'},
|
||||
{at: 0.3, expect: '6px'},
|
||||
{at: 0.6, expect: '9px'},
|
||||
{at: 1, expect: '13px'},
|
||||
{at: 1.5, expect: '18px'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-right-width',
|
||||
from: 'thin',
|
||||
to: '11px'
|
||||
}, [
|
||||
{at: -2, expect: '0px'}, // CSS border-right-width can't be negative.
|
||||
{at: -0.3, expect: '0px'}, // CSS border-right-width can't be negative.
|
||||
{at: 0, expect: '1px'},
|
||||
{at: 0.3, expect: '4px'},
|
||||
{at: 0.6, expect: '7px'},
|
||||
{at: 1, expect: '11px'},
|
||||
{at: 1.5, expect: '16px'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'border-top-width',
|
||||
from: '15px',
|
||||
to: 'thick'
|
||||
}, [
|
||||
{at: -2, expect: '35px'},
|
||||
{at: -0.3, expect: '18px'},
|
||||
{at: 0, expect: '15px'},
|
||||
{at: 0.3, expect: '12px'},
|
||||
{at: 0.6, expect: '9px'},
|
||||
{at: 1, expect: '5px'},
|
||||
{at: 1.5, expect: '0px'}
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>box-shadow composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">
|
||||
<meta name="test" content="box-shadow supports animation">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
<style>
|
||||
.target {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: black;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
|
||||
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(70, 70, 70 ) 7px 14px 21px 28px'},
|
||||
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px'},
|
||||
{at: 0.5, expect: 'rgb(150, 150, 150) 15px 30px 45px 60px'},
|
||||
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
|
||||
{at: 1.5, expect: 'rgb(250, 250, 250) 25px 50px 75px 100px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
|
||||
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
|
||||
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px'},
|
||||
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px'},
|
||||
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px'},
|
||||
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px'},
|
||||
]);
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
|
||||
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px inset',
|
||||
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px inset',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
|
||||
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
|
||||
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
|
||||
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
|
||||
]);
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
|
||||
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
|
||||
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(70, 70, 70) 7px 14px 21px 28px'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
|
||||
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(150, 150, 150) 15px 30px 45px 60px'},
|
||||
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
|
||||
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(250, 250, 250) 25px 50px 75px 100px'},
|
||||
]);
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
|
||||
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset',
|
||||
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
|
||||
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
|
||||
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
|
||||
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
|
||||
]);
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
|
||||
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
|
||||
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(130, 130, 130) 13px 26px 39px 52px'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
|
||||
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px'},
|
||||
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'},
|
||||
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -5px -10px 0px -20px'},
|
||||
]);
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
|
||||
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
|
||||
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px 50.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px, rgba(0, 0, 0, 0) -6px -12px 0px -24px'},
|
||||
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'},
|
||||
{at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px 22px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
|
||||
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px -14px, rgb(30, 60, 90) 3px 6px 9px 12px, rgb(255, 255, 255) 30px 60px 90px 120px'},
|
||||
]);
|
||||
test_composition({
|
||||
property: 'box-shadow',
|
||||
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px',
|
||||
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px',
|
||||
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px, rgb(130, 130, 130) 13px 26px 39px 52px, rgb(255, 255, 255) 26px 52px 78px 104px'},
|
||||
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px'},
|
||||
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
|
||||
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'},
|
||||
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -2px -4px 0px -8px, rgba(0, 0, 0, 0) -5px -10px 0px -20px, rgba(0, 0, 0, 0) -10px -20px 0px -40px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">
|
||||
<meta name="test" content="box-shadow supports animation">
|
||||
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
box-shadow: 30px 10px 30px 10px black;
|
||||
}
|
||||
.target {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 3px;
|
||||
border: 2px solid;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 30px;
|
||||
color: green;
|
||||
box-shadow: 10px 30px 10px 30px black;
|
||||
}
|
||||
.expected {
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: neutralKeyframe,
|
||||
to: '20px 20px 20px 20px black',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 7px 33px 7px 33px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 10px 30px 10px 30px'},
|
||||
{at: 0.3, expect: 'rgb(0, 0, 0) 13px 27px 13px 27px'},
|
||||
{at: 0.6, expect: 'rgb(0, 0, 0) 16px 24px 16px 24px'},
|
||||
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) 25px 15px 25px 15px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: 'initial',
|
||||
to: '20px 20px 20px 20px black',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'},
|
||||
{at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'},
|
||||
{at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'},
|
||||
{at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'},
|
||||
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: 'inherit',
|
||||
to: '20px 20px 20px 20px black',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 33px 7px 33px 7px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 30px 10px 30px 10px'},
|
||||
{at: 0.3, expect: 'rgb(0, 0, 0) 27px 13px 27px 13px'},
|
||||
{at: 0.6, expect: 'rgb(0, 0, 0) 24px 16px 24px 16px'},
|
||||
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) 15px 25px 15px 25px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: 'unset',
|
||||
to: '20px 20px 20px 20px black',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'},
|
||||
{at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'},
|
||||
{at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'},
|
||||
{at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'},
|
||||
{at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'},
|
||||
]);
|
||||
|
||||
// Test basic functionality, and clipping blur at 0
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '15px 10px 5px 6px black',
|
||||
to: '-15px -10px 25px -4px orange',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
|
||||
{at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'},
|
||||
{at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'},
|
||||
{at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'},
|
||||
{at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '0px 0px 0px 0px black',
|
||||
to: '1px 1px 1px 1px black',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) -0.3px -0.3px 0px -0.3px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px 0px'},
|
||||
{at: 0.3, expect: 'rgb(0, 0, 0) 0.3px 0.3px 0.3px 0.3px'},
|
||||
{at: 0.6, expect: 'rgb(0, 0, 0) 0.6px 0.6px 0.6px 0.6px'},
|
||||
{at: 1, expect: 'rgb(0, 0, 0) 1px 1px 1px 1px'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) 1.5px 1.5px 1.5px 1.5px'},
|
||||
]);
|
||||
|
||||
// Test with color as first value.
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: 'black 15px 10px 5px 6px',
|
||||
to: 'orange -15px -10px 25px -4px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
|
||||
{at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'},
|
||||
{at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'},
|
||||
{at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'},
|
||||
{at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '15px 10px 5px 6px black inset',
|
||||
to: '-15px -10px 25px -4px orange inset',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px inset'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px inset'},
|
||||
{at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px inset'},
|
||||
{at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px inset'},
|
||||
{at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px inset'},
|
||||
{at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px inset'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '15px 10px 5px 6px black',
|
||||
to: '-15px -10px 25px -4px',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
|
||||
{at: 0.3, expect: 'rgb(0, 38, 0) 6px 4px 11px 3px'},
|
||||
{at: 0.6, expect: 'rgb(0, 77, 0) -3px -2px 17px 0px'},
|
||||
{at: 1, expect: 'rgb(0, 128, 0) -15px -10px 25px -4px'},
|
||||
{at: 1.5, expect: 'rgb(0, 192, 0) -30px -20px 35px -9px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '10px 10px 10px 10px black',
|
||||
to: '10px 10px 10px 10px currentColor',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'},
|
||||
{at: 0.3, expect: 'rgb(0, 38, 0) 10px 10px 10px 10px'},
|
||||
{at: 0.6, expect: 'rgb(0, 77, 0) 10px 10px 10px 10px'},
|
||||
{at: 1, expect: 'rgb(0, 128, 0) 10px 10px 10px 10px'},
|
||||
{at: 1.5, expect: 'rgb(0, 192, 0) 10px 10px 10px 10px'},
|
||||
]);
|
||||
|
||||
// Test padding shorter lists
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000',
|
||||
to: 'none',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgba(255, 255, 0, 0.65) 13px 26px 0px 0px, rgb(0, 166, 0) 6.5px 39px 0px 0px inset'},
|
||||
{at: 0, expect: 'rgba(255, 255, 0, 0.5) 10px 20px 0px 0px, rgb(0, 128, 0) 5px 30px 0px 0px inset'},
|
||||
{at: 0.3, expect: 'rgba(255, 255, 0, 0.353) 7px 14px 0px 0px, rgba(0, 128, 0, 0.7) 3.5px 21px 0px 0px inset'},
|
||||
{at: 0.6, expect: 'rgba(255, 255, 0, 0.2) 4px 8px 0px 0px, rgba(0, 128, 0, 0.4) 2px 12px 0px 0px inset'},
|
||||
{at: 1, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset'},
|
||||
{at: 1.5, expect: 'rgba(0, 0, 0, 0) -5px -10px 0px 0px, rgba(0, 0, 0, 0) -2.5px -15px 0px 0px inset'},
|
||||
]);
|
||||
|
||||
// Test calc with comparison functions
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: 'inset 0 0 0 0 black',
|
||||
to: 'inset 0 0 0 calc(max(10em, 20px) / 2) black',
|
||||
}, [
|
||||
{at: -0.3, expect: 'rgb(0, 0, 0) 0px 0px 0px -4.5px inset'},
|
||||
{at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px 0px inset'},
|
||||
{at: 0.3, expect: 'rgb(0, 0, 0) 0px 0px 0px 4.5px inset'},
|
||||
{at: 0.6, expect: 'rgb(0, 0, 0) 0px 0px 0px 9px inset'},
|
||||
{at: 1, expect: 'rgb(0, 0, 0) 0px 0px 0px 15px inset'},
|
||||
{at: 1.5, expect: 'rgb(0, 0, 0) 0px 0px 0px 22.5px inset'},
|
||||
]);
|
||||
|
||||
// Test unmatched inset
|
||||
test_no_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '10px 20px yellow, 5px 10px green',
|
||||
to: 'inset 5px 10px green, 15px 20px blue'
|
||||
});
|
||||
|
||||
// Test CSS color 4 color types
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '10px 10px 10px 10px rgb(0 0 0)',
|
||||
to: '10px 10px 10px 10px color(srgb 1 1 1)',
|
||||
}, [
|
||||
{at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'},
|
||||
{at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'},
|
||||
{at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'},
|
||||
{at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'},
|
||||
{at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'},
|
||||
{at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '10px 10px 10px 10px color(srgb 0 0 0)',
|
||||
to: '10px 10px 10px 10px rgb(255 255 255)',
|
||||
}, [
|
||||
{at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'},
|
||||
{at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'},
|
||||
{at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'},
|
||||
{at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'},
|
||||
{at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'},
|
||||
{at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'box-shadow',
|
||||
from: '10px 10px 10px 10px color(srgb 0 0 0)',
|
||||
to: '10px 10px 10px 10px color(srgb 1 1 1)',
|
||||
}, [
|
||||
{at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'},
|
||||
{at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'},
|
||||
{at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'},
|
||||
{at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'},
|
||||
{at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'},
|
||||
{at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_no_interpolation({
|
||||
property: 'background-attachment',
|
||||
from: 'initial',
|
||||
to: 'fixed'
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'background-blend-mode',
|
||||
from: 'initial',
|
||||
to: 'overlay'
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'background-clip',
|
||||
from: 'initial',
|
||||
to: 'content-box'
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'background-origin',
|
||||
from: 'initial',
|
||||
to: 'border-box'
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'background-repeat',
|
||||
from: 'initial',
|
||||
to: 'round'
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'border-image-repeat',
|
||||
from: 'initial',
|
||||
to: 'round'
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue