blob: 155f3164ff1837b964b8b5720944ec3c1a128dbf [file] [log] [blame]
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
body {
margin-top: 20px;
}
.layer-reference {
position: fixed;
top: 0px;
height: 100vh;
width: 50px;
background-color: rgba(255, 255, 255, 0.75);
font-family: sans-serif;
text-align: center;
padding-top: 5px;
border: 1px solid;
}
.parent {
z-index: 15;
}
.target {
position: relative;
width: 350px;
height: 10px;
z-index: -2;
}
.actual {
background-color: black;
}
.expected {
background-color: green;
}
</style>
<script src="resources/interpolation-test.js"></script>
<body></body>
<script>
[-8, -5, -2, 1, 5, 10, 12].forEach(function(zIndex, i) {
var layerReference = document.createElement('div');
layerReference.classList.add('layer-reference');
layerReference.style.zIndex = zIndex;
layerReference.style.left = 7 + (i * 50) + 'px';
layerReference.textContent = 'Z=' + zIndex;
document.body.appendChild(layerReference);
});
assertInterpolation({
property: 'z-index',
from: neutralKeyframe,
to: '5',
}, [
{at: -0.3, is: '-4'},
{at: 0, is: '-2'},
{at: 0.3, is: '0'},
{at: 0.6, is: '2'},
{at: 1, is: '5'},
{at: 1.5, is: '9'},
]);
assertNoInterpolation({
property: 'z-index',
from: 'initial',
to: '5',
});
// We fail to inherit correctly due to style overadjustment: crbug.com/375982
assertInterpolation({
property: 'z-index',
from: 'inherit',
to: '5',
}, [
{at: -0.3, is: '18'},
{at: 0, is: '15'},
{at: 0.3, is: '12'},
{at: 0.6, is: '9'},
{at: 1, is: '5'},
{at: 1.5, is: '0'},
]);
assertNoInterpolation({
property: 'z-index',
from: 'unset',
to: '5',
});
assertInterpolation({
property: 'z-index',
from: '-5',
to: '5'
}, [
{at: -0.3, is: '-8'},
{at: 0, is: '-5'},
{at: 0.3, is: '-2'},
{at: 0.6, is: '1'},
{at: 1, is: '5'},
{at: 1.5, is: '10'},
]);
assertInterpolation({
property: 'z-index',
from: '2',
to: '4'
}, [
{at: -0.3, is: '1'},
{at: 0, is: '2'},
{at: 0.3, is: '3'},
{at: 0.6, is: '3'},
{at: 1, is: '4'},
{at: 1.5, is: '5'},
]);
assertInterpolation({
property: 'z-index',
from: '-2',
to: '-4'
}, [
{at: -0.3, is: '-1'},
{at: 0, is: '-2'},
{at: 0.1, is: '-2'},
{at: 0.3, is: '-3'},
{at: 0.6, is: '-3'},
{at: 1, is: '-4'},
{at: 1.5, is: '-5'},
]);
assertNoInterpolation({
property: 'z-index',
from: 'auto',
to: '10',
});
afterTest(function() {
if (window.testRunner) {
[].forEach.call(document.querySelectorAll('.layer-reference'), function(element) {
element.remove();
});
}
});
</script>