events-003.html (1313B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: transitionend event with negative delay</title> 6 <meta name="assert" content="Test checks that transitionend event is triggered for duration time being canceled out by negative delay"> 7 <link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> 8 <link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events"> 9 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> 10 11 <script src="/resources/testharness.js" type="text/javascript"></script> 12 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 13 <script src="./support/helper.js" type="text/javascript"></script> 14 15 </head> 16 <body> 17 18 <div id="log"></div> 19 20 <script> 21 promise_test(t => { 22 const div = addDiv(t, { style: 'transition: all .02s -.01s; ' + 23 'padding-left: 1px' }); 24 getComputedStyle(div).paddingLeft; 25 div.style.paddingLeft = '10px'; 26 27 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 28 return watcher.wait_for('transitionend').then(evt => { 29 assert_end_events_equal(evt, 'padding-left', 0.02); 30 }); 31 }, 'duration: 0.02s, delay: -0.01s'); 32 </script> 33 </body> 34 </html>