events-001.html (5867B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: transitionend event for shorthand property</title> 6 <meta name="assert" content="This test checks that all transitionend events are triggered for shorthand property"> 7 <link rel="help" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> 8 <link rel="help" 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"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="./support/helper.js"></script> 14 15 </head> 16 <body> 17 18 <script> 19 promise_test(t => { 20 const div = addDiv(t, { style: 'transition: all .01s linear; ' + 21 'padding-left: 1px' }); 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'); 30 31 promise_test(t => { 32 const div = addDiv(t, { style: 'transition: all .01s linear; ' + 33 'padding: 1px' }); 34 getComputedStyle(div).paddingLeft; 35 div.style.padding = '10px'; 36 37 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 38 return watcher.wait_for(Array(4).fill('transitionend'), 39 { record: 'all' }).then(evts => { 40 assert_end_event_batch_equal(evts, 41 [ 'padding-bottom', 42 'padding-left', 43 'padding-right', 44 'padding-top' ], 45 0.01); 46 }); 47 }, 'transition:all changing padding'); 48 49 promise_test(t => { 50 const div = addDiv(t, { style: 'transition: all .01s linear; ' + 51 'padding: 1px' }); 52 getComputedStyle(div).paddingLeft; 53 div.style.padding = '10px 10px 1px 10px'; 54 55 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 56 return watcher.wait_for(Array(3).fill('transitionend'), 57 { record: 'all' }).then(evts => { 58 assert_end_event_batch_equal(evts, 59 [ 'padding-left', 60 'padding-right', 61 'padding-top' ], 62 0.01); 63 }); 64 }, 'transition:all changing padding but not padding-bottom'); 65 66 promise_test(t => { 67 const div = addDiv(t, { style: 'transition: padding .01s linear; ' + 68 'padding-left: 1px' }); 69 getComputedStyle(div).paddingLeft; 70 div.style.paddingLeft = '10px'; 71 72 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 73 return watcher.wait_for('transitionend').then(evt => { 74 assert_end_events_equal(evt, 'padding-left', 0.01); 75 }); 76 }, 'transition:padding changing padding-left'); 77 78 promise_test(t => { 79 const div = addDiv(t, { style: 'transition: padding .01s linear; ' + 80 'padding: 1px' }); 81 getComputedStyle(div).paddingLeft; 82 div.style.padding = '10px'; 83 84 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 85 return watcher.wait_for(Array(4).fill('transitionend'), 86 { record: 'all' }).then(evts => { 87 assert_end_event_batch_equal(evts, 88 [ 'padding-bottom', 89 'padding-left', 90 'padding-right', 91 'padding-top' ], 92 0.01); 93 }); 94 }, 'transition:padding changing padding'); 95 96 promise_test(t => { 97 const div = addDiv(t, { style: 'transition: padding .01s linear; ' + 98 'padding: 1px' }); 99 getComputedStyle(div).paddingLeft; 100 div.style.padding = '10px 10px 1px 10px'; 101 102 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 103 return watcher.wait_for(Array(3).fill('transitionend'), 104 { record: 'all' }).then(evts => { 105 assert_end_event_batch_equal(evts, 106 [ 'padding-left', 107 'padding-right', 108 'padding-top' ], 109 0.01); 110 }); 111 }, 'transition:padding changing padding but not padding-bottom'); 112 113 promise_test(t => { 114 const div = addDiv(t, { style: 'transition: padding-left .01s linear; ' + 115 'padding-left: 1px' }); 116 getComputedStyle(div).paddingLeft; 117 div.style.paddingLeft = '10px'; 118 119 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 120 return watcher.wait_for('transitionend').then(evt => { 121 assert_end_events_equal(evt, 'padding-left', 0.01); 122 }); 123 }, 'transition:padding-left changing padding-left'); 124 125 promise_test(t => { 126 const div = addDiv(t, { style: 'transition: padding-left .01s linear; ' + 127 'padding: 1px' }); 128 getComputedStyle(div).paddingLeft; 129 div.style.padding = '10px'; 130 131 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 132 return watcher.wait_for('transitionend').then(evt => { 133 assert_end_events_equal(evt, 'padding-left', 0.01); 134 }); 135 }, 'transition:padding-left changing padding'); 136 137 promise_test(t => { 138 const div = addDiv(t, { style: 'transition: padding-left .01s linear; ' + 139 'padding: 1px' }); 140 getComputedStyle(div).paddingLeft; 141 div.style.padding = '10px 10px 1px 10px'; 142 143 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 144 return watcher.wait_for('transitionend').then(evt => { 145 assert_end_events_equal(evt, 'padding-left', 0.01); 146 }); 147 }, 'transition:padding-left changing padding but not padding-bottom'); 148 </script> 149 </body> 150 </html>