nested-parent-changes-transform-twice.html (1561B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <title>Nested View Transitions: child only has old and parent changes transform (twice)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="green-rect-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="resources/compute-test.js"></script> 8 <script src="/dom/events/scrolling/scroll_support.js"></script> 9 10 <style> 11 :root { view-transition-name: none; } 12 13 .container { 14 width: 100px; 15 height: 100px; 16 position: relative; 17 background: red; 18 19 view-transition-name: container; 20 view-transition-group: contain; 21 } 22 23 .container.shifted { 24 top: 150px; 25 } 26 .container.shifted_again { 27 left: 150px; 28 } 29 30 .contained { 31 width: 100px; 32 height: 100px; 33 background: green; 34 35 view-transition-name: contained; 36 } 37 38 .hidden { 39 display: none; 40 } 41 42 ::view-transition-group(*) { 43 animation-play-state: paused; 44 } 45 46 ::view-transition-old(*) { 47 animation: unset; 48 opacity: 1; 49 } 50 51 ::view-transition-new(*) { 52 animation: unset; 53 opacity: 0; 54 } 55 56 </style> 57 58 <div id=container class=container> 59 <div id=contained class=contained></div> 60 </div> 61 62 <script> 63 function runTest() { 64 const transition = document.startViewTransition(() => { 65 container.classList.add("shifted"); 66 contained.classList.add("hidden"); 67 }); 68 69 transition.ready.then(() => requestAnimationFrame(() => requestAnimationFrame(() => { 70 container.classList.add("shifted_again"); 71 requestAnimationFrame(takeScreenshot); 72 }))); 73 } 74 75 onload = () => waitForCompositorReady().then(runTest); 76 </script>