scrollbars.html (1294B)
1 <!DOCTYPE html> 2 <title>ResizeObserver content-box size and scrollbars</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1733042"> 6 <style> 7 #outer { 8 position: relative; 9 width: 100px; 10 height: 200px; 11 overflow: auto; 12 background: #818182; 13 } 14 15 #inner { 16 position: absolute; 17 top: 0; 18 left: 0; 19 width: 10px; 20 height: 10px; 21 background: #0a6fc0; 22 } 23 </style> 24 <div id="outer"> 25 <div id="inner"></div> 26 </div> 27 <script> 28 async function animationFrame() { 29 return new Promise(r => requestAnimationFrame(r)); 30 } 31 32 // This test is expected to fail with overlay scrollbars. 33 promise_test(async function() { 34 let count = 0; 35 36 const outer = document.getElementById('outer'); 37 const inner = document.getElementById('inner'); 38 const observer = new ResizeObserver(entries => { 39 count++; 40 }); 41 42 observer.observe(outer); 43 44 inner.style.top = '1000px'; 45 46 await animationFrame(); 47 await animationFrame(); 48 49 inner.style.top = 0; 50 51 await animationFrame(); 52 await animationFrame(); 53 54 assert_equals(count, 2, "ResizeObserver should subtract scrollbar sizes from content-box rect"); 55 }); 56 </script>