1 files changed, 64 insertions, 0 deletions
diff --git a/layout/xul/reftest/scrollbar-marks-overlay-ref.html b/layout/xul/reftest/scrollbar-marks-overlay-ref.html
new file mode 100644
index 0000000000..8d940c64d6
--- /dev/null
+++ b/layout/xul/reftest/scrollbar-marks-overlay-ref.html
@@ -0,0 +1,64 @@
+<!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>