update-callback-called-once.html (1368B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Update callback should only be called once</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/#call-dom-update-callback-algorithm"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500"> 8 <style> 9 #target { 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 } 14 15 ::view-transition-group(*), 16 ::view-transition-image-pair(*), 17 ::view-transition-old(*), 18 ::view-transition-new(*) { 19 animation-play-state: paused; 20 } 21 </style> 22 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 23 <div id="target"></div> 24 <script> 25 addEventListener("load", () => { 26 let updateCallbackCalled = false; 27 document.startViewTransition(function() { 28 target.style.backgroundColor = updateCallbackCalled ? "red" : "green"; 29 updateCallbackCalled = true; 30 document.startViewTransition(() => {}); 31 requestAnimationFrame(() => { 32 requestAnimationFrame(() => { 33 document.documentElement.classList.remove("reftest-wait"); 34 }); 35 }); 36 }); 37 }); 38 </script> 39 </html>