blob: 8eca8e37e2aec1a0ae939f80518c15624eb9e7a9 [file] [log] [blame]
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
border-image-source: url(../resources/blue-100.png);
}
.target {
width: 50px;
height: 50px;
background-color: black;
display: inline-block;
border: 25px;
border-image-source: url(../resources/stripes-100.png);
}
.expected {
background-color: green;
margin-right: 2px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
function assertCrossfadeInterpolation(options) {
var fromComputed = options.fromComputed || options.from;
assertInterpolation({
property: 'border-image-source',
from: options.from,
to: options.to,
}, [
{at: -0.3, is: fromComputed},
{at: 0, is: fromComputed},
{at: 0.3, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ', 0.3)'},
{at: 0.5, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ', 0.5)'},
{at: 0.6, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ', 0.6)'},
{at: 1, is: options.to},
{at: 1.5, is: options.to},
]);
}
// neutral
assertCrossfadeInterpolation({
from: neutralKeyframe,
fromComputed: 'url(../resources/stripes-100.png)',
to: 'url(../resources/green-100.png)',
});
// initial
assertNoInterpolation({
property: 'border-image-source',
from: 'initial',
to: 'url(../resources/green-100.png)',
});
// inherit
assertCrossfadeInterpolation({
from: 'inherit',
fromComputed: 'url(../resources/blue-100.png)',
to: 'url(../resources/green-100.png)',
});
// unset
assertNoInterpolation({
property: 'border-image-source',
from: 'unset',
to: 'url(../resources/stripes-100.png)',
});
// None to image
assertNoInterpolation({
property: 'border-image-source',
from: 'none',
to: 'url(../resources/stripes-100.png)',
});
// Image to image
assertCrossfadeInterpolation({
from: 'url(../resources/green-100.png)',
to: 'url(../resources/stripes-100.png)',
});
// Image to gradient
assertCrossfadeInterpolation({
from: 'url(../resources/green-100.png)',
to: 'linear-gradient(45deg, blue, orange)',
});
// Gradient to gradient
assertCrossfadeInterpolation({
from: 'linear-gradient(-45deg, red, yellow)',
to: 'linear-gradient(45deg, blue, orange)',
});
</script>
</body>