scrollbar-marks-overlay-ref.html (2979B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <script> 5 // Account for scrollbar buttons on Windows 6 const hasScrollbarButtons = navigator.platform.indexOf("Win") >= 0; 7 const scrollbarButtonSize = 16; 8 9 function assignMarks() 10 { 11 let frame0 = document.getElementById('frame0'); 12 let width = frame0.getBoundingClientRect().width; 13 14 let innerRect0 = frame0.contentDocument.documentElement.getBoundingClientRect(); 15 let markWidth = width - innerRect0.width - 2; 16 17 let scrollButtonHeight = hasScrollbarButtons ? scrollbarButtonSize : 0; 18 let sliderHeight = 200 - scrollButtonHeight * 2; 19 20 let one = document.getElementById('one'); 21 one.style.width = markWidth + "px"; 22 one.style.top = (Math.floor(30 / frames[0].scrollMaxY * sliderHeight) + scrollButtonHeight) + "px"; 23 24 let two = document.getElementById('two'); 25 two.style.width = markWidth + "px"; 26 two.style.top = (Math.floor(70 / frames[0].scrollMaxY * sliderHeight) + scrollButtonHeight) + "px"; 27 28 let three = document.getElementById('three'); 29 three.style.width = markWidth + "px"; 30 three.style.top = (Math.floor(110 / frames[0].scrollMaxY * sliderHeight) + scrollButtonHeight) + "px"; 31 32 let frame1 = document.getElementById('frame1'); 33 let height = frame1.getBoundingClientRect().height; 34 35 let innerRect1 = frame1.contentDocument.documentElement.getBoundingClientRect(); 36 let markHeight = height - innerRect1.height - 2; 37 38 let scrollButtonWidth = hasScrollbarButtons ? scrollbarButtonSize : 0; 39 let sliderWidth = 300 - scrollButtonWidth * 2; 40 41 let four = document.getElementById('four'); 42 four.style.height = markHeight + "px"; 43 four.style.left = (Math.floor(45 / frames[1].scrollMaxX * sliderWidth) + scrollButtonWidth) + "px"; 44 45 let five = document.getElementById('five'); 46 five.style.height = markHeight + "px"; 47 five.style.left = (Math.floor(165 / frames[1].scrollMaxX * sliderWidth) + scrollButtonWidth) + "px"; 48 49 document.documentElement.removeAttribute("class"); 50 } 51 </script> 52 </head> 53 <body onload="assignMarks()"> 54 <div style='border: 1px solid red; position: absolute; width: 300px; padding: 0;'> 55 <iframe id='frame0' style='position: relative; border: none; height: 200px; vertical-align: middle;' src='data:text/html,<p style="height: 400px;"></p>'></iframe> 56 <div id='one' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; right: 0px;'></div> 57 <div id='two' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; right: 0px;'></div> 58 <div id='three' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; right: 0px;'></div> 59 <iframe id='frame1' style='position: relative; border: none; height: 200px; vertical-align: middle;' src='data:text/html,<p style="height: 100%; width: 600px;"></p>'></iframe> 60 <div id='four' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; bottom: 0px;'></div> 61 <div id='five' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; bottom: 0px;'></div> 62 </div> 63 </body> 64 </html>