root-and-nested-element-transition.html (1286B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: basic cross-document navigation with nested element</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="root-and-nested-element-transition-ref.html"> 7 <meta name="fuzzy" content="root-and-nested-element-transition-ref.html:0-2;0-2000"> 8 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 @view-transition { navigation: auto; } 12 html { 13 background: grey; 14 } 15 .hidden { 16 width: 10px; 17 height: 10px; 18 view-transition-name: hidden; 19 background: green; 20 contain: layout; 21 } 22 .target { 23 width: 100px; 24 height: 100px; 25 background: lightblue; 26 contain: layout; 27 view-transition-name: target; 28 overflow: visible; 29 } 30 .inner { 31 width: 100px; 32 height: 100px; 33 position: relative; 34 top: 50px; 35 left: 50px; 36 border: 5px solid black; 37 } 38 </style> 39 <div class="target"> 40 This is old element 41 <div class="inner"></div> 42 </div> 43 <div class="hidden"></div> 44 45 <script> 46 function runTest() { 47 const url = "resources/root-and-nested-element-transition.html"; 48 window.location.replace(new URL(url, window.location)); 49 } 50 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 51 </script> 52 </html>