<!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>