display-inline.html (943B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Scoped VT on display:inline element</title> 7 </head> 8 <style> 9 #scope { 10 view-transition-name: scope; 11 } 12 </style> 13 <body> 14 <p><span id="scope">Hello</span> world</p> 15 </body> 16 <script> 17 async function testDisplayProperty(type) { 18 scope.style = `display: ${type}`; 19 const vt = scope.startViewTransition(); 20 await vt.finished; 21 } 22 23 async function runTests() { 24 const tests = [ 25 // Inline display types: 26 'inline', 27 'inline-flex', 28 'inline flow', 29 'math', 30 'ruby', 31 // No box, and children are inline: 32 'ruby-text', 33 'content' 34 ]; 35 tests.forEach(async display => { 36 await testDisplayProperty(display); 37 }); 38 document.documentElement.classList.remove('test-wait'); 39 } 40 41 window.onload = runTests; 42 </script> 43 </html>