auto-name-from-id.html (1086B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: cross-document navigation with auto name (new page)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="auto-name-from-id-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 @view-transition { navigation: auto; } 9 10 body { 11 margin: 0; 12 padding: 0; 13 background: grey; 14 } 15 16 html::view-transition { 17 background: rebeccapurple; 18 position: absolute; 19 inset: 0; 20 } 21 22 html::view-transition-group(root) { 23 display: none; 24 } 25 26 html::view-transition-group(*) { 27 animation-play-state: paused; 28 animation-duration: 3s; 29 animation-timing-function: steps(2, start); 30 } 31 32 /* Make test fail if ID matches */ 33 ::view-transition-group(green) { 34 border: 2px solid red; 35 } 36 37 #green { 38 background: green; 39 width: 100px; 40 height: 100px; 41 left: 200px; 42 position: absolute; 43 view-transition-name: auto; 44 } 45 46 </style> 47 <body> 48 <div id="green"></div> 49 </body> 50 <script> 51 onpagereveal = event => { 52 event.viewTransition.ready.then(takeScreenshot); 53 } 54 </script> 55 56 </html>