blob: 1450ca8307fb7257ccb8bef628aeec54f462ebf1 [file] [log] [blame]
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
@keyframes anim {
from { background-color: blue; }
to { background-color: red; }
#target {
animation: anim 20s 10s paused linear;
width: 100px;
height: 100px;
position: relative;
background-color: green;
<div id="target"></div>
test(function() {
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color'); = '0s'; // Animation should start
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)', 'background color'); = '-10s'; // Animation should be halfway between blue and red
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(128, 0, 128)', 'background color');
}, "Check that changes to animation delay only applies before the animation has started");