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