new-content-from-root-display-none.html (1386B)
1 <!DOCTYPE html> 2 <html class=reftest-wait style="display: none"> 3 <title>View transitions: capture starts with root being display none</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="new-content-from-root-display-none-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 .tb { writing-mode: horizontal-tb; } 10 .lr { writing-mode: vertical-lr; } 11 .rl { writing-mode: vertical-rl; } 12 .shared { 13 margin: 2px; 14 width: 100px; 15 height: 50px; 16 background: green; 17 contain: paint; 18 border: 1px solid black; 19 } 20 21 html::view-transition-group(root) { animation-duration: 500s; } 22 html::view-transition-new(root) { 23 animation: unset; 24 opacity: 1; 25 } 26 html::view-transition-old(root) { 27 animation: unset; 28 opacity: 0; 29 } 30 31 </style> 32 33 <div class=tb><div id=one class=shared>T</div></div> 34 <div class=lr><div id=two class=shared>T</div></div> 35 <div class=rl><div id=three class=shared>T</div></div> 36 37 <script> 38 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 39 40 async function runTest() { 41 let transition = document.startViewTransition(() => { 42 document.documentElement.style = ""; 43 }); 44 transition.ready.then(() => requestAnimationFrame(takeScreenshot)); 45 } 46 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 47 </script>