reflow-on-minimum-scale-size.html (1194B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <style> 6 html { 7 background: red; 8 overflow-y: scroll; 9 overflow-x: hidden; 10 max-width: 100vw; 11 scrollbar-width: none; 12 } 13 body { margin: 0; } 14 #headerChild { 15 position: absolute; 16 width: 100%; 17 height: 50px; 18 transform: translate3d(180px, 0, 0); 19 } 20 #filler { 21 width: 100%; 22 height: 150vh; 23 background-color: white; 24 } 25 </style> 26 <body> 27 <div id="headerChild"></div> 28 <div id="filler"></div> 29 <script> 30 let counter = 180; 31 function tick() { 32 if (counter >= 0) { 33 headerChild.style.transform = `translate3d(${counter}px, 0, 0)`; 34 counter--; 35 requestAnimationFrame(tick); 36 } else { 37 headerChild.style.transform = "translate(0,0)"; 38 requestAnimationFrame(() => { 39 // Try to do visual-scroll horizontally if it's possible. 40 const utils = SpecialPowers.DOMWindowUtils; 41 utils.scrollToVisual(180, 0, 42 utils.UPDATE_TYPE_MAIN_THREAD, 43 utils.SCROLL_MODE_INSTANT); 44 document.documentElement.classList.remove("reftest-wait"); 45 }); 46 } 47 } 48 document.addEventListener("MozReftestInvalidate", tick); 49 </script> 50 </html>