scrollbars-2.html (1126B)
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 #scrollContainer { 8 width: 100px; 9 height: 100px; 10 /* Should be bigger than any reasonable scrollbar */ 11 padding: 30px; 12 border: 10px solid blue; 13 overflow: scroll; 14 background: #818182; 15 } 16 17 </style> 18 <div id="scrollContainer"></div> 19 <script> 20 promise_test(async function() { 21 let count = 0; 22 23 const scrollContainer = document.getElementById('scrollContainer'); 24 // 20 to account for the border. 25 const scrollbarSize = scrollContainer.offsetWidth - scrollContainer.clientWidth - 20; 26 let size = await new Promise(resolve => { 27 const observer = new ResizeObserver(entries => { 28 resolve(entries[0].contentBoxSize[0]); 29 }); 30 observer.observe(scrollContainer); 31 }); 32 33 assert_equals(size.inlineSize, 100 - scrollbarSize); 34 assert_equals(size.blockSize, 100 - scrollbarSize); 35 }); 36 </script>