root-and-nested-element-transition.html (1594B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: basic cross-document navigation with nested element (new page)</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-element-transition-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <script> 9 onload = takeScreenshot; 10 </script> 11 <style> 12 @view-transition { navigation: auto; } 13 14 html { 15 background: orange; 16 } 17 .hidden { 18 width: 10px; 19 height: 10px; 20 view-transition-name: hidden; 21 background: green; 22 contain: layout; 23 } 24 .target { 25 width: 100px; 26 height: 100px; 27 background: lightgreen; 28 contain: layout; 29 view-transition-name: target; 30 overflow: visible; 31 } 32 .inner { 33 width: 100px; 34 height: 100px; 35 position: relative; 36 top: 50px; 37 left: 50px; 38 border: 5px solid blue; 39 } 40 html::view-transition-group(hidden) { animation-duration: 300s; } 41 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } 42 html::view-transition-new(*), html::view-transition-old(*) { 43 opacity: 1; 44 animation: unset; 45 } 46 html::view-transition-old(root) { 47 width: 50vw; 48 height: 100vh; 49 position: fixed; 50 left: 0px; 51 top: 0px; 52 } 53 html::view-transition-new(root) { 54 width: 50vw; 55 height: 100vh; 56 position: fixed; 57 left: 50vw; 58 top: 0px; 59 } 60 html::view-transition-old(target) { 61 top: 0px; 62 left: 0px; 63 } 64 html::view-transition-new(target) { 65 top: 200px; 66 left: 0px; 67 } 68 </style> 69 <div class="target"> 70 This is new element 71 <div class="inner"></div> 72 </div> 73 <div class="hidden"></div> 74 </html>