blob: 5c0db00e83899e7ad5bb9c7120e1620ed24d35d5 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
margin: 0;
}
.box {
position: relative;
width: 100px;
height: 100px;
left: 0;
background-color: green;
}
.indicator {
position: absolute;
width: 100px;
height: 100px;
left: 100px;
background-color: red;
}
#indicator1 {
top: 0;
}
#indicator2 {
top: 100px;
}
#box1 {
left: 200px;
-webkit-animation: move-left 2s linear;
}
#box2 {
-webkit-transform: translateX(200px);
-webkit-animation: move-transform 2s linear;
}
@-webkit-keyframes move-left {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
50% {
left: 0;
opacity: 1;
}
100% {
left: 0;
opacity: 0;
}
}
@-webkit-keyframes move-transform {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
50% {
-webkit-transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(0);
opacity: 0;
}
}
</style>
<script src="resources/animation-test-helpers.js" type="text/javascript"></script>
<script type="text/javascript">
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
[0.5, "box1", "left", 100, 15],
[0.5, "box2", "webkitTransform.4", 100, 15],
];
var doPixelTest = true;
var disablePauseAPI = false;
runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
</script>
</head>
<body>
<!-- In the pixel result, you should see two vertically adjacent green squares. There should be no red.
Test is only reliable when run in DRT. -->
<div class="indicator" id="indicator1"></div>
<div class="indicator" id="indicator2"></div>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div id="result"></div>
</body>
</html>