inline-with-offset-from-containing-block.html (1481B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: inline with offset from containing block</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="inline-with-offset-from-containing-block-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-1633"> 8 9 <script src="/common/reftest-wait.js"></script> 10 <script src="/common/rendering-utils.js"></script> 11 <style> 12 :root { 13 scrollbar-width: none; 14 } 15 .outer { 16 transform: scale(2); 17 width: 100vw; 18 text-align: center; 19 } 20 .inner { 21 padding: 10px; 22 transform: translate(20px); 23 view-transition-name: text; 24 } 25 :root { 26 view-transition-name: none; 27 } 28 29 html::view-transition { 30 background: pink; 31 } 32 html::view-transition-group(text) { 33 border: 10px solid black; 34 margin: -10px 0 0 -10px; 35 animation-play-state: paused; 36 } 37 html::view-transition-image-pair(text), 38 html::view-transition-old(text), 39 html::view-transition-new(text) { 40 animation-play-state: paused; 41 } 42 43 </style> 44 45 <div class="outer"> 46 <a class="inner">Some text</a> 47 </div> 48 49 <script> 50 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 51 52 async function runTest() { 53 let transition = document.startViewTransition(); 54 transition.ready.then(takeScreenshot); 55 } 56 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 57 </script>