new-content-escapes-clip-with-abspos-child.html (1291B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: view-transition-name element, when captured escapes its clips even if it has an abspos child</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 6 <link rel="match" href="content-escapes-clip-with-abspos-child-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 9 <style> 10 #clipper { 11 border-radius: 20px; 12 overflow: hidden; 13 width: max-content; 14 } 15 #target { 16 width: 100px; 17 height: 100px; 18 background: lightblue; 19 view-transition-name: target; 20 } 21 #abspos { 22 position: absolute; 23 left: 0; 24 width: 50px; 25 height: 50px; 26 background: pink; 27 } 28 29 :root { view-transition-name: none } 30 31 ::view-transition { 32 background: rebeccapurple; 33 } 34 35 ::view-transition-old(*) { 36 animation: unset; 37 opacity: 0; 38 } 39 ::view-transition-new(*) { 40 animation: unset; 41 opacity: 1; 42 } 43 ::view-transition-group(*) { 44 animation-play-state: paused; 45 } 46 </style> 47 48 49 <div id=clipper> 50 <div id=target> 51 <div id=abspos></div> 52 </div> 53 </div> 54 55 <script> 56 function runTest() { 57 document.startViewTransition().ready.then(takeScreenshot); 58 } 59 60 requestAnimationFrame(() => requestAnimationFrame(() => { 61 requestAnimationFrame(runTest); 62 })); 63 </script>