blob: de4df63bdc29584fba1b8bcde3758237838b52f2 [file] [log] [blame]
<!DOCTYPE html>
<meta charset="utf-8">
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
#box {
position: absolute;
height: 100px;
width: 100px;
left: 0px;
background-color: blue;
transition-duration: 1s;
transition-delay: -0.75s;
transition-timing-function: linear;
transition-property: left;
<div id="box"></div>
'use strict';
async_test(t => {
t.step_func(() => {
box.offsetTop; // Force style recalc = '400px';
assert_equals(getComputedStyle(box).left, '300px', 'The transition progresses 75% immediately due to negative transition-delay'); = '7.5s';
assert_equals(getComputedStyle(box).left, '300px', 'Changing the duration does not affect the current transition');
box.addEventListener('transitionend', t.step_func_done(() => {
assert_equals(getComputedStyle(box).left, '400px', 'The final value has been reached when transitionend fires'); = '1400px';
assert_equals(getComputedStyle(box).left, '500px', 'With the new duration taking effect, the transition progresses 10% immediately');
}, 'Transition duration change should not affect transition in progress');