fragmented-during-transition-skips.html (1379B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: fragmented elements skipped</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="fragmented-during-transition-skips-ref.html"> 7 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 #spacer { 11 width: 100px; 12 height: 950px; 13 background: lightgreen; 14 } 15 #container { 16 width: 500px; 17 height: 500px; 18 } 19 .fragment { 20 columns: 2; 21 } 22 #target { 23 width: 200px; 24 height: 200px; 25 background: green; 26 view-transition-name: target; 27 } 28 #unrelated { 29 width: 100px; 30 height: 100px; 31 background: lightblue; 32 view-transition-name: unrelated; 33 } 34 35 ::view-transition { 36 background: pink; 37 } 38 ::view-transition-group(root) { 39 animation-duration: 500s; 40 visibility: hidden; 41 } 42 ::view-transition-group(target) { 43 border: 1px solid black; 44 } 45 </style> 46 <div id=container> 47 <div id=spacer></div> 48 <div id=target></div> 49 </div> 50 <div id=unrelated></div> 51 52 <script> 53 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 54 55 function runTransition() { 56 let t = document.startViewTransition(); 57 t.ready.then(() => { 58 requestAnimationFrame(() => container.classList.add("fragment")) 59 }); 60 t.finished.then(takeScreenshot); 61 } 62 63 requestAnimationFrame(() => requestAnimationFrame(runTransition)) 64 </script>