transform-scroll-child-tweak-crash.html (1275B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <style> 4 * { 5 pointer-events: none; 6 } 7 .transformed { 8 width: 200px; 9 height: 200px; 10 transform: translate(10px, 10px); 11 } 12 .scrollcontainer { 13 width: 150px; 14 height: 150px; 15 overflow: auto; 16 scrollbar-width: none; 17 } 18 #container { 19 width: 10px; 20 height: 200px; 21 } 22 #thediv1 { 23 width: 2px; height: 2px; 24 background: green; 25 } 26 27 </style> 28 <div class="transformed"> 29 <div class="scrollcontainer" id="scrollcontainer"> 30 <div id="container"> 31 <div id="thediv1"></div> 32 </div> 33 </div> 34 </div> 35 36 <script> 37 function promiseFrame() { 38 return new Promise(resolve => window.requestAnimationFrame(resolve)); 39 } 40 function finish() { 41 document.documentElement.className = ""; 42 } 43 44 function tweak2() { 45 document.getElementById("container").style.height = "100px"; 46 document.getElementById("scrollcontainer").style.overflow = "visible"; 47 requestAnimationFrame(finish); 48 } 49 50 function tweak() { 51 document.getElementById("thediv1").style.background = "red"; 52 requestAnimationFrame(tweak2); 53 } 54 55 async function start() { 56 await promiseFrame(); 57 await promiseFrame(); 58 tweak(); 59 await promiseFrame(); 60 await promiseFrame(); 61 tweak2(); 62 await promiseFrame(); 63 await promiseFrame(); 64 finish(); 65 } 66 67 window.onload = () => { 68 requestAnimationFrame(start); 69 }; 70 71 </script> 72 </html>