new-content-container-writing-modes.html (2655B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: container of shared element writing-modes</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-container-writing-modes-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 #hidden { 10 width: 100px; 11 height: 100px; 12 background: red; 13 position: absolute; 14 top: 0; 15 left: 0; 16 contain: paint; 17 view-transition-name: hidden; 18 } 19 .tb { writing-mode: horizontal-tb; } 20 .lr { writing-mode: vertical-lr; } 21 .rl { writing-mode: vertical-rl; } 22 .shared { 23 margin: 2px; 24 width: 100px; 25 height: 50px; 26 background: green; 27 contain: paint; 28 border: 1px solid black; 29 } 30 .source { 31 background: red; 32 position: absolute; 33 top: 50px; 34 left: 50px; 35 width: 100px; 36 height: 500px; 37 contain: paint; 38 } 39 html::view-transition-group(hidden) { animation-duration: 300s; } 40 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } 41 42 html::view-transition-group(s1), 43 html::view-transition-group(s2), 44 html::view-transition-group(s3) { animation-duration: 0s; } 45 46 html::view-transition-new(s1), 47 html::view-transition-new(s2), 48 html::view-transition-new(s3) { animation: unset; opacity: 1; } 49 50 html::view-transition-old(s1), 51 html::view-transition-old(s2), 52 html::view-transition-old(s3) { animation: unset; opacity: 0; } 53 54 /* hide the root so we show transition background to ensure we're in a transition */ 55 html::view-transition-group(root) { animation: unset; opacity: 0; } 56 html::view-transition { background: lightpink; } 57 58 </style> 59 60 <div id=hidden>Should not be visible</div> 61 <div id=s1 class=source>Should not be visible</div> 62 <div id=s2 class=source>Should not be visible</div> 63 <div id=s3 class=source>Should not be visible</div> 64 <div class=tb><div id=one class=shared>T</div></div> 65 <div class=lr><div id=two class=shared>T</div></div> 66 <div class=rl><div id=three class=shared>T</div></div> 67 68 <script> 69 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 70 71 async function runTest() { 72 s1.style = "view-transition-name: s1"; 73 s2.style = "view-transition-name: s2"; 74 s3.style = "view-transition-name: s3"; 75 document.startViewTransition(() => { 76 s1.remove(); 77 s2.remove(); 78 s3.remove(); 79 hidden.style.left = "200px"; 80 one.style = "view-transition-name: s1"; 81 two.style = "view-transition-name: s2"; 82 three.style = "view-transition-name: s3"; 83 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 84 }); 85 } 86 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 87 </script>