64 lines
2.9 KiB
HTML
64 lines
2.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<script>
|
|
// Account for scrollbar buttons on Windows
|
|
const hasScrollbarButtons = navigator.platform.indexOf("Win") >= 0;
|
|
const scrollbarButtonSize = 16;
|
|
|
|
function assignMarks()
|
|
{
|
|
let frame0 = document.getElementById('frame0');
|
|
let width = frame0.getBoundingClientRect().width;
|
|
|
|
let innerRect0 = frame0.contentDocument.documentElement.getBoundingClientRect();
|
|
let markWidth = width - innerRect0.width - 2;
|
|
|
|
let scrollButtonHeight = hasScrollbarButtons ? scrollbarButtonSize : 0;
|
|
let sliderHeight = 200 - scrollButtonHeight * 2;
|
|
|
|
let one = document.getElementById('one');
|
|
one.style.width = markWidth + "px";
|
|
one.style.top = (Math.floor(30 / frames[0].scrollMaxY * sliderHeight) + scrollButtonHeight) + "px";
|
|
|
|
let two = document.getElementById('two');
|
|
two.style.width = markWidth + "px";
|
|
two.style.top = (Math.floor(70 / frames[0].scrollMaxY * sliderHeight) + scrollButtonHeight) + "px";
|
|
|
|
let three = document.getElementById('three');
|
|
three.style.width = markWidth + "px";
|
|
three.style.top = (Math.floor(110 / frames[0].scrollMaxY * sliderHeight) + scrollButtonHeight) + "px";
|
|
|
|
let frame1 = document.getElementById('frame1');
|
|
let height = frame1.getBoundingClientRect().height;
|
|
|
|
let innerRect1 = frame1.contentDocument.documentElement.getBoundingClientRect();
|
|
let markHeight = height - innerRect1.height - 2;
|
|
|
|
let scrollButtonWidth = hasScrollbarButtons ? scrollbarButtonSize : 0;
|
|
let sliderWidth = 300 - scrollButtonWidth * 2;
|
|
|
|
let four = document.getElementById('four');
|
|
four.style.height = markHeight + "px";
|
|
four.style.left = (Math.floor(45 / frames[1].scrollMaxX * sliderWidth) + scrollButtonWidth) + "px";
|
|
|
|
let five = document.getElementById('five');
|
|
five.style.height = markHeight + "px";
|
|
five.style.left = (Math.floor(165 / frames[1].scrollMaxX * sliderWidth) + scrollButtonWidth) + "px";
|
|
|
|
document.documentElement.removeAttribute("class");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="assignMarks()">
|
|
<div style='border: 1px solid red; position: absolute; width: 300px; padding: 0;'>
|
|
<iframe id='frame0' style='position: relative; border: none; height: 200px; vertical-align: middle;' src='data:text/html,<p style="height: 400px;"></p>'></iframe>
|
|
<div id='one' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; right: 0px;'></div>
|
|
<div id='two' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; right: 0px;'></div>
|
|
<div id='three' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; right: 0px;'></div>
|
|
<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>
|
|
<div id='four' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; bottom: 0px;'></div>
|
|
<div id='five' style='border: 1px solid #ef0fff; opacity: 0.3; position: absolute; bottom: 0px;'></div>
|
|
</div>
|
|
</body>
|
|
</html>
|