blob: d914fcbbe81d47cdbb1aeebacb795a37931a4a1b [file] [log] [blame]
<!DOCTYPE>
<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-x', "45px"],
[0.5, 'box1', 'background-position-y', "60px"],
[0.5, 'box2', 'background-position-x', "45px"],
[0.5, 'box2', 'background-position-y', "60px"],
[0.5, 'box3', 'background-position-x', "calc((10px * 0.5) + ((100% - 80px) * 0.5))"],
[0.5, 'box3', 'background-position-y', "calc((20px * 0.5) + ((100% - 100px) * 0.5))"],
];
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>