events-004.html (2120B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: transitionend event with non matching lists</title> 6 <meta name="assert" content="Test checks that non-matching lists are properly resolved"> 7 <link rel="help" title="2. Transitions - Example 3" href="http://www.w3.org/TR/css3-transitions/#list-matching"> 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: 'padding: 1px' }); 23 getComputedStyle(div).paddingLeft; 24 25 div.style.transitionProperty = 26 'padding-top, padding-right, padding-bottom, padding-left'; 27 div.style.transitionDuration = '0.02s, 0.01s'; 28 div.style.transitionTimingFunction = 'linear, ease-in'; 29 div.style.transitionDelay = '0.01s, 0.02s'; 30 div.style.padding = '10px'; 31 32 const watcher = new EventWatcher(t, div, ['transitionend']); 33 return watcher 34 .wait_for(Array(4).fill('transitionend'), { record: 'all' }) 35 .then(evts => { 36 assert_end_event_batch_equal( 37 evts, 38 [ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ], 39 [ 0.02, 0.01, 0.02, 0.01 ] 40 ); 41 }); 42 }, 'repeating lists'); 43 44 promise_test(t => { 45 const div = addDiv(t, { style: 'padding: 1px' }); 46 getComputedStyle(div).paddingLeft; 47 48 div.style.transitionProperty = 'padding-top'; 49 div.style.transitionDuration = '0.02s, 0.01s'; 50 div.style.transitionTimingFunction = 'linear, ease-in'; 51 div.style.transitionDelay = '0.01s, 0.02s'; 52 div.style.padding = '10px'; 53 54 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 55 return watcher.wait_for('transitionend').then(evt => { 56 assert_end_events_equal(evt, 'padding-top', 0.02); 57 }); 58 }, 'truncating lists'); 59 </script> 60 </body> 61 </html>