nested-parent-changes-transform.html (1331B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <title>Nested View Transitions: child only has old and parent changes transform</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 27 .contained { 28 width: 100px; 29 height: 100px; 30 background: green; 31 32 view-transition-name: contained; 33 } 34 35 .hidden { 36 display: none; 37 } 38 39 ::view-transition-group(*) { 40 animation-play-state: paused; 41 } 42 43 ::view-transition-old(*) { 44 animation: unset; 45 opacity: 1; 46 } 47 48 ::view-transition-new(*) { 49 animation: unset; 50 opacity: 0; 51 } 52 53 </style> 54 55 <div id=container class=container> 56 <div id=contained class=contained></div> 57 </div> 58 59 <script> 60 function runTest() { 61 document.startViewTransition(() => { 62 container.classList.add("shifted"); 63 contained.classList.add("hidden"); 64 }).ready.then(takeScreenshot); 65 } 66 67 onload = () => waitForCompositorReady().then(runTest); 68 </script>