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