display-inline-block.html (1261B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- TODO update link --> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Scoped view transition with inline block</title> 9 </head> 10 <style> 11 #target { 12 display: inline-block; 13 view-transition-name: target; 14 } 15 16 ::view-transition-group(target), 17 ::view-transition-old(target) { 18 animation: unset; 19 } 20 21 @keyframes colorize { 22 to { opacity: 0.5; } 23 } 24 25 ::view-transition-new(target) { 26 animation: colorize 1s paused steps(1, jump-start); 27 } 28 </style> 29 <script src="/web-animations/testcommon.js"></script> 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <body> 33 <p><span id="target">Hello</span> World</p> 34 </body> 35 <script> 36 promise_test(async t => { 37 const vt = target.startViewTransition(); 38 await vt.ready; 39 await Promise.all(document.getAnimations().map(a => a.ready)); 40 const style = 41 getComputedStyle(target, '::view-transition-new(target)'); 42 assert_equals(style.opacity, '0.5', 'Opacity animation is in effect'); 43 }, 'Scoped view transition on an inline-block element'); 44 </script> 45 </html>