events-006.html (1903B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: transitionend event for pseudo elements</title> 6 <meta name="assert" content="Test checks that TransitionEnd events are fired for pseudo-elements"> 7 <link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events"> 8 <link rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"> 9 <link rel="help" title="CSS3 Generated and Replaced Content Module" href="http://www.w3.org/TR/css3-content/"> 10 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> 11 12 <script src="/resources/testharness.js" type="text/javascript"></script> 13 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 14 <script src="./support/helper.js" type="text/javascript"></script> 15 16 <style> 17 .before::before, 18 .after:after { 19 content: ''; 20 transition: padding-left .01s; 21 padding-left: 1px; 22 } 23 .before.active::before, 24 .after.active:after { 25 padding-left: 10px; 26 } 27 </style> 28 29 </head> 30 <body> 31 32 <div id="log"></div> 33 34 <script> 35 promise_test(t => { 36 const div = addDiv(t, { 'class': 'before' }); 37 getComputedStyle(div).paddingLeft; 38 div.classList.add('active'); 39 40 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 41 return watcher.wait_for('transitionend').then(evt => { 42 assert_end_events_equal(evt, 'padding-left', 0.01, '::before'); 43 }); 44 }, 'transition padding-left on ::before'); 45 46 promise_test(t => { 47 const div = addDiv(t, { 'class': 'after' }); 48 getComputedStyle(div).paddingLeft; 49 div.classList.add('active'); 50 51 const watcher = new EventWatcher(t, div, [ 'transitionend' ]); 52 return watcher.wait_for('transitionend').then(evt => { 53 assert_end_events_equal(evt, 'padding-left', 0.01, '::after'); 54 }); 55 }, 'transition padding-left on ::after'); 56 </script> 57 </body> 58 </html>