blob: 299c5eb56828f5452025d7f9bb4342f5c3d84b73 [file] [log] [blame]
<!DOCTYPE><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<html>
<head>
<style>
.box {
height: 100px;
width: 100px;
margin: 10px;
background: url('../fast/backgrounds/repeat/resources/gradient.gif') repeat 0 0;
transition-duration: 1s;
transition-timing-function: linear;
transition-property: background-position;
}
#box1 {
background-position: 10px 20px;
}
body.final #box1 {
background-position: left 80px top 100px;
}
#box2 {
background-position: right 10px bottom 20px;
}
body.final #box2 {
background-position: right 80px bottom 100px;
}
#box3 {
background-position: 10px 20px;
}
body.final #box3 {
background-position: right 80px bottom 100px;
}
</style>
<script src="resources/transition-test-helpers.js" type="text/javascript"></script>
<script>
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
[0.5, 'box1', 'background-position', [45, 60], 2],
[0.5, 'box2', 'background-position', [45, 60], 2],
[0.5, 'box3', 'background-position', [10,0.5,100,80,0,0.5,20,0.5,100,100,0,0.5], 2], // Numbers extracted from a calc() expression.
];
function setupTest()
{
document.body.classList.add('final');
}
runTransitionTest(expectedValues, setupTest, usePauseAPI);
</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<pre id="result"></pre>
</body>
</html>