view-transition-name-on-document-root.html (861B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: view-transition-name is limited to document root</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="view-transition-name-on-document-root-ref.html"> 7 <head> 8 <style> 9 .foo { 10 position: fixed; 11 left: 0; 12 top: 0; 13 background: red; 14 width: 100px; 15 height: 100px; 16 z-index: 1000; 17 } 18 19 .bar { 20 position: fixed; 21 left: 50px; 22 top: 50px; 23 background: green; 24 width: 100px; 25 height: 100px; 26 } 27 </style> 28 </head> 29 <body> 30 <script> 31 const extraHTML = document.createElement('html'); 32 33 const foo = document.createElement('div'); 34 foo.className = 'foo'; 35 36 const bar = document.createElement('div'); 37 bar.className = 'bar'; 38 39 extraHTML.append(foo); 40 document.body.append(extraHTML, bar); 41 </script> 42 </body> 43 </html>