auto-name.html (1439B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: using auto names</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="auto-name-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 } 12 13 main { 14 display: flex; 15 flex-direction: column; 16 } 17 18 .item { 19 view-transition-name: auto; 20 view-transition-class: item; 21 } 22 23 main.switch .item1 { 24 order: 2; 25 } 26 27 .item1 { 28 background: green; 29 } 30 31 .item2 { 32 background: yellow; 33 position: relative; 34 left: 100px; 35 } 36 37 html::view-transition { 38 background: rebeccapurple; 39 } 40 41 :root { view-transition-name: none; } 42 html::view-transition-group(.item) { 43 animation-timing-function: steps(2, start); 44 animation-play-state: paused; 45 } 46 html::view-transition-old(*), 47 html::view-transition-new(*) 48 { animation-play-state: paused; } 49 html::view-transition-old(*) { animation: unset; opacity: 0 } 50 html::view-transition-new(*) { animation: unset; opacity: 1 } 51 52 </style> 53 54 <main> 55 <div class="item item1"></div> 56 <div class="item item2"></div> 57 </main> 58 59 <script> 60 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 61 62 function runTest() { 63 document.startViewTransition(() => { 64 document.querySelector("main").classList.toggle("switch"); 65 }).ready.then(takeScreenshot); 66 } 67 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 68 </script> 69 70 </body>