events-002.html (1810B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: transitionend event for implied property value</title> 6 <meta name="assert" content="Test checks that all transitionend events are triggered for implied property value"> 7 <link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events"> 8 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> 9 10 <script src="/resources/testharness.js" type="text/javascript"></script> 11 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 12 <script src="./support/helper.js" type="text/javascript"></script> 13 14 </head> 15 <body> 16 17 <div id="log"></div> 18 19 <script> 20 promise_test(t => { 21 const div = addDiv(t, { style: 'transition: all .01s linear' }); 22 getComputedStyle(div).paddingLeft; 23 div.style.paddingLeft = '10px'; 24 25 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 26 return watcher.wait_for('transitionend').then(evt => { 27 assert_end_events_equal(evt, 'padding-left', 0.01); 28 }); 29 }, 'transition:all changing padding-left from nothing'); 30 31 promise_test(t => { 32 const div = addDiv(t, { style: 'transition: all .01s linear' }); 33 getComputedStyle(div).paddingLeft; 34 div.style.padding = '10px'; 35 36 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 37 return watcher.wait_for(Array(4).fill('transitionend'), 38 { record: 'all' }).then(evts => { 39 assert_end_event_batch_equal(evts, 40 [ 'padding-bottom', 41 'padding-left', 42 'padding-right', 43 'padding-top' ], 44 0.01); 45 }); 46 }, 'transition:all changing padding from nothing'); 47 </script> 48 </body> 49 </html>