transition-end-event-shorthands.html (2049B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>transition end event with shorthand property</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property"> 7 <style> 8 #box { 9 transition: padding 1s; 10 padding: 0px 1px 2px 3px; // top right bottom left 11 } 12 </style> 13 </head> 14 <body> 15 <div id="container"> 16 <div id="box"></div> 17 </div> 18 </body> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 <script src="/css/css-transitions/support/helper.js"></script> 22 <script> 23 window.onload = () => { 24 function timeoutPromise() { 25 return waitForAnimationFrames(5); 26 } 27 28 promise_test(async t => { 29 // Make sure we have rendered the page before making the style change 30 // to ensure we get transitions. 31 await waitForAnimationFrames(2); 32 33 // Change three padding properties, but preserve padding-bottom. 34 // This should trigger 3 transitions. 35 box.style.padding = "8px 7px 2px 5px"; 36 37 const animations = document.getAnimations(); 38 const properties = 39 animations.map(anim => anim.transitionProperty).sort(); 40 assert_array_equals(properties, 41 ['padding-left', 'padding-right', 'padding-top']); 42 43 // Expect a transitionend event for each of the CSSTransitions. 44 const eventWatcher = 45 new EventWatcher(t, box, 'transitionend', timeoutPromise); 46 47 const eventsPromise = 48 eventWatcher.wait_for( 49 ['transitionend', 'transitionend', 'transitionend'], 50 { record: 'all' }).then(events => { 51 events.forEach(event => { 52 assert_times_equal(event.elapsedTime, 1); 53 }) 54 }); 55 animations.forEach(anim => { 56 anim.finish(); 57 }); 58 await eventsPromise; 59 60 // Ensure no unexpected events are received. 61 await waitForAnimationFrames(2); 62 }, 'Transition end events generated for transition on shorthand property'); 63 }; 64 </script> 65 </html>