Adding upstream version 115.7.0esr.upstream/115.7.0esr upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/scrolling
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
76 files changed, 2672 insertions, 0 deletions
diff --git a/layout/reftests/scrolling/deferred-anchor-ref.xhtml b/layout/reftests/scrolling/deferred-anchor-ref.xhtml
new file mode 100644
index 0000000000..8256cf0e9a
--- /dev/null
+++ b/layout/reftests/scrolling/deferred-anchor-ref.xhtml
@@ -0,0 +1,12 @@
+<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; overflow: hidden;">
+<head>
+</head>
+<body style="margin: 0;">
+<div style="height: 50px; width: 50px; background-color: red;"/>
+<div style="height: 1000px;"/>
+<div id="d" style="height: 50px; width: 50px; background-color: green;"/>
+<div style="height: 1000px;"/>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/deferred-anchor.xhtml b/layout/reftests/scrolling/deferred-anchor.xhtml
new file mode 100644
index 0000000000..1cb3f54091
--- /dev/null
+++ b/layout/reftests/scrolling/deferred-anchor.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; overflow: hidden;">
+<head>
+<script>
+var xhr = new XMLHttpRequest();
+xhr.onprogress = function() {
+};
+xhr.onload = function() {
+  document.documentElement.innerHTML = this.responseXML.documentElement.innerHTML;
+};
+xhr.open("get", "deferred-anchor-ref.xhtml");
+xhr.send();
+</script>
+</head>
+</html>
diff --git a/layout/reftests/scrolling/deferred-anchor2.xhtml b/layout/reftests/scrolling/deferred-anchor2.xhtml
new file mode 100644
index 0000000000..7cc9b72617
--- /dev/null
+++ b/layout/reftests/scrolling/deferred-anchor2.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; overflow: hidden;">
+<head/>
+<body style="margin: 0; height: 100%;">
+<iframe style="width: 100%; height: 100%; border: none; background-color: -moz-Dialog;" src="iframe-deferred-anchor.xhtml"/>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fixed-1.html b/layout/reftests/scrolling/fixed-1.html
new file mode 100644
index 0000000000..d68582e14c
--- /dev/null
+++ b/layout/reftests/scrolling/fixed-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="height:2000px; overflow:hidden">
+<script src="scrolling.js"></script>
+<div style="height:300px; background:url(repeatable-diagonal-gradient.png) fixed;"></div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fixed-opacity-1.html b/layout/reftests/scrolling/fixed-opacity-1.html
new file mode 100644
index 0000000000..8f22427b41
--- /dev/null
+++ b/layout/reftests/scrolling/fixed-opacity-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="height:2000px; overflow:hidden; margin:0;">
+<div style="height:1000px; background:url(repeatable-diagonal-gradient.png) fixed repeat-x; opacity:0.5"></div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fixed-opacity-2.html b/layout/reftests/scrolling/fixed-opacity-2.html
new file mode 100644
index 0000000000..c0ac519350
--- /dev/null
+++ b/layout/reftests/scrolling/fixed-opacity-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<body style="height:2000px; margin:0; overflow:hidden">
+<div style="height:1000px; background:url(repeatable-diagonal-gradient.png) fixed repeat-x; opacity:0.5"></div>
+<script type="application/javascript">
+var topElements = document.getElementsByClassName("scrollTop");
+if (!topElements.length) {
+  topElements = [document.documentElement];
+}
+
+var failed = false;
+
+function doScroll(d)
+{
+  if (failed)
+    return;
+  for (var i = 0; i < topElements.length; ++i) {
+    var e = topElements[i];
+    e.scrollTop = d;
+    if (e.scrollTop != d) {
+      document.documentElement.textContent =
+          "Scrolling failed on " + e.tagName + " element, " +
+          "tried to scroll to " + d + ", got " + e.scrollTop +
+          " (Random number: " + Math.random() + ")";
+      failed = true;
+    }
+  }
+}
+
+if (document.location.search == '?ref') {
+  doScroll(700);
+} else {
+  doScroll(800);
+  document.documentElement.setAttribute("class", "reftest-wait");
+  window.addEventListener("MozReftestInvalidate", function() {
+    document.documentElement.removeAttribute("class");
+    doScroll(700);
+  });
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fixed-table-1.html b/layout/reftests/scrolling/fixed-table-1.html
new file mode 100644
index 0000000000..8ce846cd5a
--- /dev/null
+++ b/layout/reftests/scrolling/fixed-table-1.html
@@ -0,0 +1,48 @@
+<!-- This needs to be quirks mode -->
+<html>
+<style>
+table { display:inline-table; caption-side:bottom; border-collapse:collapse; border:2px solid black; }
+td { width:100px; height:100px; }
+</style>
+<body style="height:2000px; overflow:hidden" class="scrollTop">
+<script src="scrolling.js"></script>
+<p><table style="background:url(repeatable-diagonal-gradient.png) fixed;">
+  <td>&nbsp;
+</table>
+<table>
+  <tbody style="background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
+</table>
+<table>
+  <tr style="background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
+</table>
+<table>
+  <td style="background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;
+</table>
+<p><table>
+  <colgroup style="background:url(repeatable-diagonal-gradient.png) fixed;"></colgroup>
+  <td>&nbsp;
+</table>
+<table>
+  <col style="background:url(repeatable-diagonal-gradient.png) fixed;"></col>
+  <td>&nbsp;
+</table>
+<table>
+  <td>&nbsp;
+  <caption style="background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;</caption>
+</table>
+
+<p><table>
+  <tbody style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
+</table>
+<table>
+  <tr style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
+</table>
+<table>
+  <td style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;
+</table>
+<p><table>
+  <td>&nbsp;
+  <caption style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;</caption>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fixed-text-1.html b/layout/reftests/scrolling/fixed-text-1.html
new file mode 100644
index 0000000000..c8df76d2fe
--- /dev/null
+++ b/layout/reftests/scrolling/fixed-text-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="height:2000px; overflow:hidden; background:url(repeatable-diagonal-gradient.png) fixed;">
+<script src="scrolling.js"></script>
+<p style="padding:2px;">Hello Kitty</p>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fixed-text-2.html b/layout/reftests/scrolling/fixed-text-2.html
new file mode 100644
index 0000000000..4c72e6970b
--- /dev/null
+++ b/layout/reftests/scrolling/fixed-text-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+p { margin:0; }
+</style>
+</head>
+<body style="overflow:hidden;">
+<div style="position: fixed; bottom: 0; z-index: 1; width: 100%; height: 50px; background-color: black;"></div>
+<div style="-moz-transform: scale(1);">
+<script>
+for (var i = 1; i <= 100; ++i) {
+  document.write("<p>This is some text: " + i + "\n");
+}
+</script>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fractional-scroll-area-invalidation.html b/layout/reftests/scrolling/fractional-scroll-area-invalidation.html
new file mode 100644
index 0000000000..2b20f160cd
--- /dev/null
+++ b/layout/reftests/scrolling/fractional-scroll-area-invalidation.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Make sure the scrolled layer is not invalidated when you scroll all the way to the bottom</title>
+
+<style>
+
+body {
+  margin: 0;
+}
+
+.scrollbox {
+  margin: 50px;
+  width: 200px;
+  height: 200px;
+  overflow: auto;
+}
+
+.scrolled-contents {
+  height: 150.2px;
+  padding-top: 150px;
+}
+
+.reftest-no-paint {
+  margin: 0 20px;
+  border: 1px solid blue;
+  height: 25px;
+}
+
+</style>
+
+<body>
+
+<div class="scrollbox"
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="200" reftest-displayport-h="200"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="0">
+  <div class="scrolled-contents">
+    <div class="reftest-no-paint">
+      <!-- This element has the magic "reftest-no-paint" class which
+           constitutes the actual test here. -->
+    </div>
+  </div>
+</div>
+
+<script>
+
+var scrollbox = document.querySelector(".scrollbox");
+scrollbox.scrollTop = 2;
+scrollbox.scrollTop = 1;
+scrollbox.scrollTop = 0;
+
+function doTest() {
+  scrollbox.scrollTop = 999;
+  document.documentElement.removeAttribute("class");
+}
+document.addEventListener("MozReftestInvalidate", doTest);
+
+</script>
diff --git a/layout/reftests/scrolling/fractional-scroll-area.html b/layout/reftests/scrolling/fractional-scroll-area.html
new file mode 100644
index 0000000000..cba421499c
--- /dev/null
+++ b/layout/reftests/scrolling/fractional-scroll-area.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Fractional scroll area position / size</title>
+
+<style>
+
+body {
+  margin: 0;
+}
+
+#scrollbox {
+  width: 200px;
+  overflow: hidden;
+  background: red;
+}
+
+#scrolled-content {
+  background: lime;
+  box-sizing: border-box;
+  border: solid black;
+  border-width: 1px 0;
+}
+
+</style>
+
+<div id="scrollbox">
+  <div id="scrolled-content"></div>
+</div>
+
+<script>
+
+function getFloatQueryParams(defaultValues) {
+  let result = Object.assign({}, defaultValues);
+  for (let chunk of location.search.substr(1).split("&")) {
+    let parts = chunk.split("=");
+    result[parts[0]] = parseFloat(parts[1]);
+  }
+  return result;
+}
+
+let params = getFloatQueryParams({
+  top: 0,
+  outerBottom: 100,
+  innerBottom: 100,
+  borderTop: 0,
+  borderBottom: 0,
+  scrollBefore: 0,
+  scrollAfter: undefined,
+  offsetAfter: undefined,
+});
+
+let scrollArea = document.getElementById("scrollbox");
+let scrolledContent = document.getElementById("scrolled-content");
+
+scrollArea.style.marginTop = params.top + "px";
+scrollArea.style.height = (params.outerBottom - params.top) + "px";
+scrolledContent.style.height =  (params.innerBottom - params.top) + "px";
+
+scrollArea.scrollTop = 1;
+scrollArea.scrollTop = 2;
+scrollArea.scrollTop = params.scrollBefore;
+
+window.addEventListener("MozReftestInvalidate", function () {
+  if (params.scrollAfter !== undefined) {
+    scrollArea.scrollTop = params.scrollAfter;
+  }
+  if (params.offsetAfter !== undefined) {
+    document.body.style.marginTop = params.offsetAfter + "px";
+  }
+  document.documentElement.className = "";
+});
+
+</script>
diff --git a/layout/reftests/scrolling/frame-scrolling-attr-1.html b/layout/reftests/scrolling/frame-scrolling-attr-1.html
new file mode 100644
index 0000000000..2fabcf302c
--- /dev/null
+++ b/layout/reftests/scrolling/frame-scrolling-attr-1.html
@@ -0,0 +1,17 @@
+<frameset cols="50%,50%">
+<frameset rows="20%,20%,20%,20%,20%">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+</frameset>
+
+<frameset rows="20%,20%,20%,20%,20%">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+</frameset>
+</frameset>
diff --git a/layout/reftests/scrolling/frame-scrolling-attr-2.html b/layout/reftests/scrolling/frame-scrolling-attr-2.html
new file mode 100644
index 0000000000..37faaff37c
--- /dev/null
+++ b/layout/reftests/scrolling/frame-scrolling-attr-2.html
@@ -0,0 +1,30 @@
+<script>
+function test() {
+  var yes = document.querySelectorAll('frame[scrolling="yes"]');
+  var no = document.querySelectorAll('frame[scrolling="no"]');
+  for (i = 0; i < no.length; ++i) {
+    no[i].setAttribute('scrolling','yes');
+  }
+  for (i = 0; i < yes.length; ++i) {
+    yes[i].setAttribute('scrolling','no');
+  }
+  document.documentElement.className='';
+}
+
+</script>
+<frameset cols="50%,50%" class="reftest-wait" onload="setTimeout(test,0)">
+<frameset rows="20%,20%,20%,20%,20%">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+</frameset>
+<frameset rows="20%,20%,20%,20%,20%">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+</frameset>
+</frameset>
diff --git a/layout/reftests/scrolling/frame-scrolling-attr-ref.html b/layout/reftests/scrolling/frame-scrolling-attr-ref.html
new file mode 100644
index 0000000000..3d866c49b6
--- /dev/null
+++ b/layout/reftests/scrolling/frame-scrolling-attr-ref.html
@@ -0,0 +1,17 @@
+<frameset cols="50%,50%">
+<frameset rows="20%,20%,20%,20%,20%">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+</frameset>
+
+<frameset rows="20%,20%,20%,20%,20%">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+    <frame frameborder="0" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>">
+</frameset>
+</frameset>
diff --git a/layout/reftests/scrolling/huge-horizontal-overflow-ref.html b/layout/reftests/scrolling/huge-horizontal-overflow-ref.html
new file mode 100644
index 0000000000..e9028e334d
--- /dev/null
+++ b/layout/reftests/scrolling/huge-horizontal-overflow-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head><title>Testcase for bug 751278</title>
+<style>
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+
+span { display:inline-block; min-width:300px;}
+</style>
+</head>
+<body>
+	<h1>Test</h1>
+	<div>
+	<div>
+	<table cellspacing='0' cellpadding='0'>
+			<tr>
+							<th><span>Col 0</span></th>
+							<th><span>Col 1</span></th>
+							<th><span>Col 2</span></th>
+							<th><span>Col 3</span></th>
+							<th><span>Col 4</span></th>
+							<th><span>Col 5</span></th>
+							<th><span>Col 6</span></th>
+							<th><span>Col 7</span></th>
+							<th><span>Col 8</span></th>
+							
+							
+						</tr>
+					<tr>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							
+						</tr>
+					
+			</table>
+	</div>
+	</div>
+<div class="ui-helper-clearfix ui-helper-hidden-accessible"></div>
+</body>
+</html>
+
diff --git a/layout/reftests/scrolling/huge-horizontal-overflow.html b/layout/reftests/scrolling/huge-horizontal-overflow.html
new file mode 100644
index 0000000000..17519b5a7b
--- /dev/null
+++ b/layout/reftests/scrolling/huge-horizontal-overflow.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head><title>Testcase for bug 751278</title>
+<style>
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+
+span { display:inline-block; min-width:300px;}
+</style>
+</head>
+<body>
+	<h1>Test</h1>
+	<div>
+	<div>
+	<table cellspacing='0' cellpadding='0'>
+			<tr>
+							<th><span>Col 0</span></th>
+							<th><span>Col 1</span></th>
+							<th><span>Col 2</span></th>
+							<th><span>Col 3</span></th>
+							<th><span>Col 4</span></th>
+							<th><span>Col 5</span></th>
+							<th><span>Col 6</span></th>
+							<th><span>Col 7</span></th>
+							<th><span>Col 8</span></th>
+							
+							
+						</tr>
+					<tr>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							<td>alskjdfas</td>
+							
+						</tr>
+					
+			</table>
+	</div>
+	</div>
+<div class="ui-helper-clearfix ui-helper-hidden-accessible"></div>
+</body>
+</html>
+
diff --git a/layout/reftests/scrolling/huge-vertical-overflow-ref.html b/layout/reftests/scrolling/huge-vertical-overflow-ref.html
new file mode 100644
index 0000000000..56633c19ab
--- /dev/null
+++ b/layout/reftests/scrolling/huge-vertical-overflow-ref.html
@@ -0,0 +1,16 @@
+<html lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<style type="text/css">
+.hide { position: absolute; left: -99em; top: -99em; }
+#body { min-height: 3000px;}
+</style>
+
+</head>
+<body>
+  <div id="body">
+    <h1 class="hide">Microsoft Learning:</h1>
+    blah blah
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/huge-vertical-overflow.html b/layout/reftests/scrolling/huge-vertical-overflow.html
new file mode 100644
index 0000000000..2589b467f4
--- /dev/null
+++ b/layout/reftests/scrolling/huge-vertical-overflow.html
@@ -0,0 +1,16 @@
+<html lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<style type="text/css">
+.hide { position: absolute; left: -999999em; top: -999999em; }
+#body { min-height: 3000px;}
+</style>
+
+</head>
+<body>
+  <div id="body">
+    <h1 class="hide">Microsoft Learning:</h1>
+    blah blah
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/iframe-border-radius-frame.html b/layout/reftests/scrolling/iframe-border-radius-frame.html
new file mode 100644
index 0000000000..05a60efa13
--- /dev/null
+++ b/layout/reftests/scrolling/iframe-border-radius-frame.html
@@ -0,0 +1 @@
+<body style='font-size:100px; overflow:hidden; background:white;'><p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty
diff --git a/layout/reftests/scrolling/iframe-border-radius-ref.html b/layout/reftests/scrolling/iframe-border-radius-ref.html
new file mode 100644
index 0000000000..814bcd3c14
--- /dev/null
+++ b/layout/reftests/scrolling/iframe-border-radius-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<iframe src="iframe-border-radius-frame.html" id="f" style="width:500px; height:500px; border-radius:100px; border:none;"></iframe>
+<script>
+var f = document.getElementById("f");
+function doTest() {
+  f.contentWindow.scrollTo(0, 80);
+  document.documentElement.removeAttribute('class');
+}
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/iframe-border-radius.html b/layout/reftests/scrolling/iframe-border-radius.html
new file mode 100644
index 0000000000..31aa8ed880
--- /dev/null
+++ b/layout/reftests/scrolling/iframe-border-radius.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<iframe src="iframe-border-radius-frame.html" id="f" style="width:500px; height:500px; border-radius:100px; border:none;"></iframe>
+<script>
+var f = document.getElementById("f");
+var count = 0;
+function doTest() {
+  ++count;
+  f.contentWindow.scrollTo(0, count*20);
+  if (count == 4) {
+    document.documentElement.removeAttribute("class");
+  } else {
+    setTimeout(doTest, 20);
+  }
+}
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/iframe-deferred-anchor.xhtml b/layout/reftests/scrolling/iframe-deferred-anchor.xhtml
new file mode 100644
index 0000000000..f47d0bf010
--- /dev/null
+++ b/layout/reftests/scrolling/iframe-deferred-anchor.xhtml
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden">
+<head>
+<script>document.location.hash = "#d";</script>
+</head>
+<body style="margin: 0; background-color: white;">
+<div style="height: 50px; width: 50px; background-color: red;"/>
+<div style="height: 1000px;"/>
+<div id="d" style="height: 50px; width: 50px; background-color: green;"/>
+<div style="height: 1000px;"/>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/iframe-scrolling-attr-1.html b/layout/reftests/scrolling/iframe-scrolling-attr-1.html
new file mode 100644
index 0000000000..6732ac96a4
--- /dev/null
+++ b/layout/reftests/scrolling/iframe-scrolling-attr-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 943249</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+iframe { height: 80px; border:0; padding:0; margin:0; }
+
+    </style>
+</head>
+
+<body>
+<div style="float:left">
+scrolling="no", overflow:scroll<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:auto<br>
+    <iframe scrolling="noscroll" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:hidden<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:visible<br>
+    <iframe scrolling="off" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:inherit<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+<div style="float:left">
+scrolling="yes", overflow:scroll<br>
+    <iframe scrolling="on" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:auto<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:hidden<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:visible<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:inherit<br>
+    <iframe scrolling="scroll" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+<div style="float:left">
+overflow:hidden<br>
+    <iframe style="overflow:hidden" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+overflow:scroll, overflow:hidden<br>
+    <iframe style="overflow:scroll" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+overflow:scroll<br>
+    <iframe style="overflow:scroll" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+</body></html>
diff --git a/layout/reftests/scrolling/iframe-scrolling-attr-2.html b/layout/reftests/scrolling/iframe-scrolling-attr-2.html
new file mode 100644
index 0000000000..c72ac37402
--- /dev/null
+++ b/layout/reftests/scrolling/iframe-scrolling-attr-2.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 943249</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+iframe { height: 80px; border:0; padding:0; margin:0; }
+
+    </style>
+<script>
+function doTest() {
+  var no = document.querySelectorAll('iframe[scrolling="no"]');
+  var yes = document.querySelectorAll('iframe[scrolling="yes"]');
+  for (i = 0; i < no.length; ++i) {
+    no[i].setAttribute('scrolling','yes');
+  }
+  for (i = 0; i < yes.length; ++i) {
+    yes[i].setAttribute('scrolling','no');
+  }
+  document.documentElement.className='';
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+<div style="float:left">
+scrolling="no", overflow:scroll<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:auto<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:hidden<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:visible<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:inherit<br>
+    <iframe scrolling="yes" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+<div style="float:left">
+scrolling="yes", overflow:scroll<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:auto<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:hidden<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:visible<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:inherit<br>
+    <iframe scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+<div style="float:left">
+overflow:hidden<br>
+    <iframe style="overflow:hidden" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+overflow:scroll, overflow:hidden<br>
+    <iframe style="overflow:scroll" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+overflow:scroll<br>
+    <iframe style="overflow:scroll" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+</body></html>
diff --git a/layout/reftests/scrolling/iframe-scrolling-attr-ref.html b/layout/reftests/scrolling/iframe-scrolling-attr-ref.html
new file mode 100644
index 0000000000..6c065ba270
--- /dev/null
+++ b/layout/reftests/scrolling/iframe-scrolling-attr-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 943249</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+iframe { height: 80px; border:0; padding:0; margin:0; }
+
+    </style>
+</head>
+<body>
+<div style="float:left">
+scrolling="no", overflow:scroll<br>
+    <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:auto<br>
+    <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:hidden<br>
+    <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:visible<br>
+    <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="no", overflow:inherit<br>
+    <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+<div style="float:left">
+scrolling="yes", overflow:scroll<br>
+    <iframe src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:auto<br>
+    <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:hidden<br>
+    <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:visible<br>
+    <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+scrolling="yes", overflow:inherit<br>
+    <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+<div style="float:left">
+overflow:hidden<br>
+    <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+overflow:scroll, overflow:hidden<br>
+    <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+overflow:scroll<br>
+    <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br>
+</div>
+
+</body></html>
diff --git a/layout/reftests/scrolling/image-1.html b/layout/reftests/scrolling/image-1.html
new file mode 100644
index 0000000000..d929c20f3e
--- /dev/null
+++ b/layout/reftests/scrolling/image-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="height:300px; overflow:hidden" class="scrollTop">
+  <div style="height:5px; background:yellow;"></div>
+  <img style="display:block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAMgAQMAAACj7s1kAAAAA1BMVEWAAABGTyZaAAAANElEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfBl54AAB4qBHuAAAAABJRU5ErkJggg==">
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/layer-change-1-frame.html b/layout/reftests/scrolling/layer-change-1-frame.html
new file mode 100644
index 0000000000..3e97d3c1ec
--- /dev/null
+++ b/layout/reftests/scrolling/layer-change-1-frame.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAJ0lEQVRIx%2B3NMQEAAAgDoPUvrSnmIxQgOTA1AoFAIBAIBALBt6BqAZbsggsDjv9PAAAAAElFTkSuQmCC') fixed;}
+#header {
+	background: rgba(50,50,50,0.8);
+	position: fixed;
+	left: 0px;
+	top: 0px;
+	width: 500px;
+    height: 200px;
+	z-index: 1000;
+}
+#floaty_right {
+	position: fixed;
+	left: 600px;
+	top: 0px;
+    z-index: 0;
+}
+#floaty_left {
+	width: 500px;
+    border:1px solid black;
+}
+li {
+    margin-left: 100px;
+	position: relative;
+    background: yellow;
+    padding: 2px;
+}
+</style>
+<body>
+<div id="header">Android Gripes</div>
+<div id="floaty_right">dddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
+<div id="floaty_left">
+  <li>
+    When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+    When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+When I use an iPhone and an Android phone at the same time, I 
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+  </li>
+  <div style="height:10000px;"></div>
+  <script>
+  window.scrollTo(0,0);
+  </script>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/layer-change-1-ref.html b/layout/reftests/scrolling/layer-change-1-ref.html
new file mode 100644
index 0000000000..d2cb43491c
--- /dev/null
+++ b/layout/reftests/scrolling/layer-change-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head>
+<body>
+<iframe style="margin-top:100px; width:100%; height:600px;" src="layer-change-1-frame.html"></iframe>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/layer-change-1.html b/layout/reftests/scrolling/layer-change-1.html
new file mode 100644
index 0000000000..09bfe9716a
--- /dev/null
+++ b/layout/reftests/scrolling/layer-change-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<body onload="start()">
+<iframe id="i" style="margin-top:100px; width:100%; height:600px;" src="layer-change-1-frame.html"></iframe>
+<script>
+var subw = document.getElementById("i").contentWindow;
+function doTest() {
+  subw.scrollTo(0,0);
+  document.documentElement.removeAttribute("class");
+}
+function start() {
+  subw.scrollTo(0,2000);
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/less-than-scrollbar-height-ref.html b/layout/reftests/scrolling/less-than-scrollbar-height-ref.html
new file mode 100644
index 0000000000..a0c9a4e2c4
--- /dev/null
+++ b/layout/reftests/scrolling/less-than-scrollbar-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html><head>
+<title>Testcase for bug 726258</title>
+  <style>
+    html,body{ overflow:hidden; margin:0; padding:0; }
+    p { overflow: auto; white-space: nowrap; font-size: 13px; padding-top:100px; margin-top:-100px; }
+  </style>
+</head>
+  <p>
+1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
+</p>
diff --git a/layout/reftests/scrolling/less-than-scrollbar-height.html b/layout/reftests/scrolling/less-than-scrollbar-height.html
new file mode 100644
index 0000000000..e4a8aa77ee
--- /dev/null
+++ b/layout/reftests/scrolling/less-than-scrollbar-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html><head>
+<title>Testcase for bug 726258</title>
+  <style>
+    html,body{ overflow:hidden; margin:0; padding:0; }
+    p { overflow: auto; white-space: nowrap; font-size: 13px; margin-top:0; }
+  </style>
+</head>
+  <p>
+1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
+</p>
diff --git a/layout/reftests/scrolling/move-item-ref.html b/layout/reftests/scrolling/move-item-ref.html
new file mode 100644
index 0000000000..613fd5c243
--- /dev/null
+++ b/layout/reftests/scrolling/move-item-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      #a_box {
+        overflow:auto;
+        width:100px;
+        height:100px;
+        border:1px solid black;
+      }
+      #item {
+        transform: translate(80px, 80px);
+        width:40px;
+        height:40px;
+        position:relative;
+        background-color:#666;
+      }
+    </style>
+</head>
+<body>
+  <div id="a_box">
+    <div id="item"></div>
+  </div>
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/move-item.html b/layout/reftests/scrolling/move-item.html
new file mode 100644
index 0000000000..774db68560
--- /dev/null
+++ b/layout/reftests/scrolling/move-item.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      #a_box {
+        overflow:auto;
+        width:100px;
+        height:100px;
+        border:1px solid black;
+      }
+      #item {
+        width:40px;
+        height:40px;
+        position:relative;
+        background-color:#666;
+      }
+    </style>
+</head>
+<body onload="runTest();">
+  <div id="a_box">
+    <div id="item"></div>
+  </div>
+<script>
+  function runTest() {
+    document.getElementById("item").style.transform = "translate(80px, 80px)";
+    document.documentElement.removeAttribute("class");
+  }
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/opacity-mixed-scrolling-1.html b/layout/reftests/scrolling/opacity-mixed-scrolling-1.html
new file mode 100644
index 0000000000..da4227c331
--- /dev/null
+++ b/layout/reftests/scrolling/opacity-mixed-scrolling-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div class="scrollTop" style="overflow:hidden; width:200px; height:200px;">
+  <div style="margin:70px 20px; opacity:0.5; height:400px; background:yellow;">
+    <div style="position:absolute; background:yellow; width:50px; height:100px; top: 0; left:50px;">
+    </div>
+  </div>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/opacity-mixed-scrolling-2.html b/layout/reftests/scrolling/opacity-mixed-scrolling-2.html
new file mode 100644
index 0000000000..e97ad6ac54
--- /dev/null
+++ b/layout/reftests/scrolling/opacity-mixed-scrolling-2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<style>
+#scrollbox {
+  margin: 20px;
+  width: 300px;
+  height: 400px;
+  overflow-y: auto;
+  background: linear-gradient(#444, #555);
+}
+.opacityBox {
+  opacity: 0.999;
+  border: 1px solid black;
+  margin: 20px;
+  padding: 20px;
+}
+#inner {
+  background-image: linear-gradient(white, rgba(255,255,255,0));
+}
+</style>
+
+<div id="scrollbox" class="scrollTop">
+  <div id="inner">
+    outside
+    <div class="opacityBox">in opacity box</div>
+    outside
+    <div class="opacityBox">in opacity box</div>
+
+    outside
+    <div class="opacityBox">in opacity box</div>
+    outside
+    <div class="opacityBox">in opacity box</div>
+    outside
+    <div class="opacityBox">in opacity box</div>
+    outside
+    <div class="opacityBox">in opacity box</div>
+    outside
+    <div class="opacityBox">in opacity box</div>
+
+    outside
+    <div class="opacityBox">in opacity box</div>
+    outside
+    <div class="opacityBox">in opacity box</div>
+    outside
+  </div>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/percent-height-overflowing-image-1-ref.html b/layout/reftests/scrolling/percent-height-overflowing-image-1-ref.html
new file mode 100644
index 0000000000..f12e566cc1
--- /dev/null
+++ b/layout/reftests/scrolling/percent-height-overflowing-image-1-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>Reference case for %-height potentially-overflowing images</title>
+  <style>
+    .container {
+      height: 80px;
+      border: 2px solid purple;
+      margin: 1px;
+      display: inline-block;
+    }
+    .percent-size {
+      display: block;
+      height: 100%;
+      border: 2px solid black;
+      box-sizing: border-box;
+    }
+    .scrollX {
+      overflow-x: scroll;
+    }
+    .scrollBoth {
+      overflow: scroll;
+    }
+  </style>
+</head>
+<body>
+  <div class="container scrollX" style="width: 50px; height: 120px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <div class="container scrollX" style="width: 60px; height: 120px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <br>
+
+  <div class="container scrollBoth" style="width: 78px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <div class="container scrollBoth" style="width: 79px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <br>
+
+  <div class="container" style="width: 80px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <div class="container" style="width: 90px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+</body>
diff --git a/layout/reftests/scrolling/percent-height-overflowing-image-1.html b/layout/reftests/scrolling/percent-height-overflowing-image-1.html
new file mode 100644
index 0000000000..fbb9b12154
--- /dev/null
+++ b/layout/reftests/scrolling/percent-height-overflowing-image-1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for %-height potentially-overflowing images</title>
+  <!-- This test exercises a series of scenarios where the presence of
+       scrollbars affects the layout in a way that may make those scrollbars
+       unnecessary. Specifically, we have a series of examples here
+       with a scrollable div, where...
+         - The child's width depends on its container's height, via
+           its aspect ratio and via having a percent-height.
+         - *Without* scrollbars, the child is too wide and causes horizontal
+           overflow.
+         - If we *add* a horizontal scrollbar (which occupies vertical space),
+           the child's height is reduced (on platforms where scrollbars take up
+           space) and so its width is reduced as well, and it might not
+           cause horizontal overflow beyond its parent's border-box anymore.
+       This creates a bit of a paradox.  We resolve it by opting to show
+       scrollbars, to be on the safe side & to make sure that we don't
+       have any unreachable content.
+    -->
+  <style>
+    .container {
+      overflow: auto;
+      height: 80px;
+      border: 2px solid purple;
+      margin: 1px;
+      display: inline-block;
+    }
+    .percent-size {
+      display: block;
+      height: 100%;
+      border: 2px solid black;
+      box-sizing: border-box;
+    }
+  </style>
+</head>
+<body>
+  <!-- Here, the div is extremely skinny; there'll definitely be horizontal
+       overflow (but not vertical), so we should just show the horizontal
+       scrollbar: -->
+  <div class="container" style="width: 50px; height: 120px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <div class="container" style="width: 60px; height: 120px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <br>
+
+  <!-- Here, the div is nearly wide enough to avoid overflow, but not quite. On
+       platforms where scrollbars occupy layout-space, the presence of any
+       horizontal scrollbar here will reduce the height of the child, and (via
+       the child's aspect ratio) reduce the width of the child, such that the
+       child ends up skinnier than the parent's width and won't overflow the
+       parent's border-box anymore. We resolve this by just throwing up our
+       hands and showing *both* scrollbars (horizontal and vertical). -->
+  <div class="container" style="width: 78px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <div class="container" style="width: 79px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <br>
+
+  <!-- Here, the div is wide enough so that no scrollbars are needed. -->
+  <div class="container" style="width: 80px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+  <div class="container" style="width: 90px">
+    <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+  </div>
+</body>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1-ref.html b/layout/reftests/scrolling/propagated-overflow-style-1-ref.html
new file mode 100644
index 0000000000..7c2b1b3150
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Reference case with body and html *independently* scrollable.
+  </title>
+  <style>
+    html {
+      overflow: scroll;
+    }
+    body {
+      overflow: scroll;
+    }
+  </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1a.html b/layout/reftests/scrolling/propagated-overflow-style-1a.html
new file mode 100644
index 0000000000..b5115d36fe
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>
+    Testcase with body and html *independently* scrollable,
+    with body's "overflow" set dynamically.
+  </title>
+  <style>
+    html {
+      overflow: scroll;
+    }
+  </style>
+  <script>
+    function doTest() {
+      document.body.style.overflow = "scroll";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1b.html b/layout/reftests/scrolling/propagated-overflow-style-1b.html
new file mode 100644
index 0000000000..4608b87d62
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>
+    Testcase with body and html *independently* scrollable,
+    with html's "overflow" set dynamically.
+  </title>
+  <style>
+    body {
+      overflow: scroll;
+    }
+  </style>
+  <script>
+    function doTest() {
+      document.documentElement.style.overflow = "scroll";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-1c.html b/layout/reftests/scrolling/propagated-overflow-style-1c.html
new file mode 100644
index 0000000000..11809915a0
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-1c.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>
+    Testcase with body and html *independently* scrollable,
+    with both html & body's "overflow" set dynamically.
+  </title>
+  <script>
+    function doTest() {
+      document.documentElement.style.overflow = "scroll";
+      document.body.style.overflow = "scroll";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2-ref.html b/layout/reftests/scrolling/propagated-overflow-style-2-ref.html
new file mode 100644
index 0000000000..20c3b8ae5b
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Reference case with the root viewport scrollable, via styles on html node.
+  </title>
+  <style>
+    html {
+      overflow: scroll;
+    }
+  </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2a.html b/layout/reftests/scrolling/propagated-overflow-style-2a.html
new file mode 100644
index 0000000000..250bedd6c6
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>
+    Testcase with only one of [html,body] being scrollable,
+    after body's "overflow" is reset dynamically.
+  </title>
+  <style>
+    html {
+      overflow: scroll;
+    }
+    body {
+      overflow: scroll;
+    }
+  </style>
+  <script>
+    function doTest() {
+      document.body.style.overflow = "visible";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2b.html b/layout/reftests/scrolling/propagated-overflow-style-2b.html
new file mode 100644
index 0000000000..c94ddedb26
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>
+    Testcase with only one of [html,body] being scrollable,
+    after html's "overflow" is reset dynamically.
+  </title>
+  <style>
+    html {
+      overflow: scroll;
+    }
+    body {
+      overflow: scroll;
+    }
+  </style>
+  <script>
+    function doTest() {
+      document.documentElement.style.overflow = "visible";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2c.html b/layout/reftests/scrolling/propagated-overflow-style-2c.html
new file mode 100644
index 0000000000..0ceb1f21ab
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2c.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>
+    Testcase with only one of [html,body] being scrollable,
+    with their "overflow" styles being dynamically swapped.
+  </title>
+  <style>
+    html {
+      overflow: scroll;
+    }
+  </style>
+  <script>
+    function doTest() {
+      document.documentElement.style.overflow = "visible";
+      document.body.style.overflow = "scroll";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2d.html b/layout/reftests/scrolling/propagated-overflow-style-2d.html
new file mode 100644
index 0000000000..3353a33744
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2d.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>
+    Testcase with only one of [html,body] being scrollable,
+    with their "overflow" styles being dynamically swapped.
+  </title>
+  <style>
+    body {
+      overflow: scroll;
+    }
+  </style>
+  <script>
+    function doTest() {
+      document.documentElement.style.overflow = "scroll";
+      document.body.style.overflow = "visible";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/propagated-overflow-style-2e.html b/layout/reftests/scrolling/propagated-overflow-style-2e.html
new file mode 100644
index 0000000000..f9105185b1
--- /dev/null
+++ b/layout/reftests/scrolling/propagated-overflow-style-2e.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Testcase with the root viewport scrollable, via styles on body node.
+  </title>
+  <style>
+    body {
+      overflow: scroll;
+    }
+  </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/reftest.list b/layout/reftests/scrolling/reftest.list
new file mode 100644
index 0000000000..f631654250
--- /dev/null
+++ b/layout/reftests/scrolling/reftest.list
@@ -0,0 +1,103 @@
+HTTP == deferred-anchor.xhtml#d deferred-anchor-ref.xhtml#d
+fuzzy-if(xulRuntime.widgetToolkit=="gtk",0-1,0-23) fails-if(useDrawSnapshot) == deferred-anchor2.xhtml deferred-anchor-ref.xhtml#d # bug 1182632
+HTTP == fixed-1.html fixed-1.html?ref
+fuzzy(0-1,0-32200) HTTP == fixed-table-1.html fixed-table-1.html?ref
+HTTP == fixed-opacity-1.html fixed-opacity-1.html?ref
+HTTP == fixed-opacity-2.html fixed-opacity-2.html?ref
+random-if(gtkWidget) fuzzy-if(Android,0-3,0-60) HTTP == fixed-text-1.html fixed-text-1.html?ref
+HTTP == fixed-text-2.html fixed-text-2.html?ref
+random-if(Android) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-12) fuzzy-if(winWidget,0-1,0-31) == iframe-border-radius.html iframe-border-radius-ref.html # bug 760269
+random-if(Android) HTTP == image-1.html image-1.html?ref
+random-if(Android) HTTP == opacity-mixed-scrolling-1.html opacity-mixed-scrolling-1.html?ref # bug 760269
+random-if(cocoaWidget) HTTP == opacity-mixed-scrolling-2.html opacity-mixed-scrolling-2.html?ref # see bug 625357
+fails-if(Android) == percent-height-overflowing-image-1.html percent-height-overflowing-image-1-ref.html # bug 1494132
+
+== scroll-behavior-1.html scroll-behavior-1.html?ref
+== scroll-behavior-2.html scroll-behavior-2.html?ref
+== scroll-behavior-3.html scroll-behavior-3.html?ref
+== scroll-behavior-4.html scroll-behavior-4.html?ref
+== scroll-behavior-5.html scroll-behavior-5.html?ref
+== scroll-behavior-6.html scroll-behavior-6.html?ref
+== scroll-behavior-7.html scroll-behavior-7.html?ref
+== scroll-behavior-8.html scroll-behavior-8.html?ref
+== scroll-behavior-9.html scroll-behavior-9.html?ref
+== scroll-behavior-10.html scroll-behavior-10.html?ref
+== scroll-behavior-textarea.html scroll-behavior-textarea.html?ref
+HTTP == simple-1.html simple-1.html?ref
+HTTP == subpixel-1.html#d subpixel-1-ref.html#d
+fuzzy-if(Android,0-4,0-120) HTTP == text-1.html text-1.html?ref
+fuzzy-if(Android,0-4,0-120) HTTP == text-2.html?up text-2.html?ref
+fuzzy(0-1,0-42) HTTP == transformed-1.html transformed-1.html?ref
+fuzzy(0-1,0-43) HTTP == transformed-1.html?up transformed-1.html?ref
+fuzzy-if(Android,0-5,0-20000) == uncovering-1.html uncovering-1-ref.html
+fuzzy-if(Android,0-5,0-20000) == uncovering-2.html uncovering-2-ref.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,0-149,0-4520) == less-than-scrollbar-height.html less-than-scrollbar-height-ref.html
+== huge-horizontal-overflow.html huge-horizontal-overflow-ref.html
+== huge-vertical-overflow.html huge-vertical-overflow-ref.html
+pref(apz.allow_zooming,true) fuzzy-if(gtkWidget,0-1,0-80) fuzzy-if(winWidget,0-4,0-170) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-102,0-6818) fuzzy-if(winWidget&&browserIsFission,0-96,0-1109) == iframe-scrolling-attr-1.html iframe-scrolling-attr-ref.html # fission: Bug 1717856
+pref(apz.allow_zooming,true) fuzzy-if(gtkWidget,0-1,0-80) fuzzy-if(winWidget,0-4,0-170) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-140,0-6818) fuzzy-if(winWidget&&browserIsFission,0-96,0-1109) == iframe-scrolling-attr-2.html iframe-scrolling-attr-ref.html # fission: Bug 1717856
+pref(apz.allow_zooming,true) fuzzy(0-1,0-2) fuzzy-if(geckoview,0-1,0-15) fuzzy-if(gtkWidget,0-1,0-48) fuzzy-if(winWidget,0-4,0-108) fuzzy-if(winWidget&&fission,0-92,0-1280) == frame-scrolling-attr-1.html frame-scrolling-attr-ref.html
+pref(apz.allow_zooming,true) fuzzy(0-1,0-2) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-102,0-2420) fuzzy-if(geckoview,0-1,0-88) fuzzy-if(gtkWidget,0-1,0-48) fuzzy-if(winWidget,0-4,0-108) fuzzy-if(winWidget&&fission,0-92,0-1920) == frame-scrolling-attr-2.html frame-scrolling-attr-ref.html
+== move-item.html move-item-ref.html # bug 1125750
+== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200
+== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999
+!= fractional-scroll-area-invalidation.html about:blank
+
+# Tests for "overflow" styles that may be propagated to the viewport:
+== propagated-overflow-style-1a.html propagated-overflow-style-1-ref.html
+== propagated-overflow-style-1b.html propagated-overflow-style-1-ref.html
+== propagated-overflow-style-1c.html propagated-overflow-style-1-ref.html
+== propagated-overflow-style-2a.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2b.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2c.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2d.html propagated-overflow-style-2-ref.html
+== propagated-overflow-style-2e.html propagated-overflow-style-2-ref.html
+
+fuzzy-if(Android,54-54,8-29) == xul-scrollbar-iterate.html xul-scrollbar-iterate-ref.html
+== scrollbars-area-in-iframe.html scrollbars-area-in-iframe-ref.html
diff --git a/layout/reftests/scrolling/repeatable-diagonal-gradient.png b/layout/reftests/scrolling/repeatable-diagonal-gradient.png
new file mode 100644
index 0000000000..d114e100d3
--- /dev/null
+++ b/layout/reftests/scrolling/repeatable-diagonal-gradient.png
diff --git a/layout/reftests/scrolling/scroll-behavior-1.html b/layout/reftests/scrolling/scroll-behavior-1.html
new file mode 100644
index 0000000000..5f845aa191
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-1.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538, smooth scrolling expected</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
+        #a_box {
+            position: relative;
+            left: 10px;
+            top: 10px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        #another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="a_box"></div>
+  <div id="another_box"></div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      window.scrollTo({left: 500, top: 500});
+      window.scrollTo({left: window.scrollX, top: window.scrollY});
+    }
+    document.documentElement.removeAttribute("class");
+  }
+  window.scrollTo({left: 0, top: 0, behavior: "instant"});
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-10.html b/layout/reftests/scrolling/scroll-behavior-10.html
new file mode 100644
index 0000000000..81716ccd6c
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-10.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1104356 smooth scrolling expected</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        #parent {
+            overflow: hidden;
+            width: 100px;
+            height: 100px;
+        }
+
+        #a_box {
+            position: relative;
+            left: 10px;
+            top: 10px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        #another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="parent">
+   <div id="a_box"></div>
+   <div id="another_box"></div>
+  </div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      document.getElementById('parent').scrollTo({left: 10, top: 10, behavior: 'smooth'});
+    } else {
+      document.getElementById('parent').scrollLeft = 10;
+      document.getElementById('parent').scrollTop = 10;
+    }
+
+    // Allow smooth scrolling to complete before testing result
+    setTimeout(function() {
+      document.documentElement.removeAttribute("class");
+    }, 500);
+  }
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-2.html b/layout/reftests/scrolling/scroll-behavior-2.html
new file mode 100644
index 0000000000..224cc56831
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-2.html
@@ -0,0 +1,104 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538, smooth scrolling expected</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .a_box {
+            position: relative;
+            left: 0px;
+            top: 0px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        .another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+        .scroll_box {
+            width: 50px;
+            height: 50px;
+            overflow: scroll;
+            will-change: scroll-position;
+        }
+
+        #scroll_1, #scroll_2, #scroll_3, #scroll_6 {
+            scroll-behavior: smooth;
+        }
+
+        #scroll_4 {
+            scroll-behavior: auto;
+        }
+	}
+
+    </style>
+</head>
+<body>
+  <div id="scroll_1" class="scroll_box">
+    <div id="box1a" class="a_box"></div>
+    <div id="box1b" class="another_box"></div>
+  </div>
+  <div id="scroll_2" class="scroll_box">
+    <div id="box2a" class="a_box"></div>
+    <div id="box2b" class="another_box"></div>
+  </div>
+  <div id="scroll_3" class="scroll_box">
+    <div id="box3a" class="a_box"></div>
+    <div id="box3b" class="another_box"></div>
+  </div>
+  <div id="scroll_4" class="scroll_box">
+    <div id="box4a" class="a_box"></div>
+    <div id="box4b" class="another_box"></div>
+  </div>
+  <div id="scroll_5" class="scroll_box">
+    <div id="box5a" class="a_box"></div>
+    <div id="box5b" class="another_box"></div>
+  </div>
+  <div id="scroll_6" class="scroll_box">
+    <div id="box6a" class="a_box"></div>
+    <div id="box6b" class="another_box"></div>
+  </div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      document.getElementById("box1b").scrollIntoView({block: "end"});
+      document.getElementById("box2b").scrollIntoView({block: "end", behavior: "auto"});
+      document.getElementById("box3b").scrollIntoView({block: "end", behavior: "smooth"});
+      document.getElementById("box4b").scrollIntoView({block: "end", behavior: "smooth"});
+      document.getElementById("box5b").scrollIntoView({block: "end", behavior: "smooth"});
+      document.getElementById("box6b").scrollIntoView(false);
+
+      // Interrupt any smooth scrolling
+      for (var i=1; i <= 6; i++) {
+        document.getElementById("scroll_" + i).scrollLeft
+          = document.getElementById("scroll_" + i).scrollLeft;
+        document.getElementById("scroll_" + i).scrollTop
+          = document.getElementById("scroll_" + i).scrollTop;
+      }
+    }
+    document.documentElement.removeAttribute("class");
+  }
+  for (var i=1; i <= 6; i++) {
+    document.getElementById("box" + i + "a")
+      .scrollIntoView({block: "start", behavior: "instant"});
+  }
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-3.html b/layout/reftests/scrolling/scroll-behavior-3.html
new file mode 100644
index 0000000000..cc2da36132
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-3.html
@@ -0,0 +1,132 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538, instant scrolling expected</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .a_box {
+            position: relative;
+            left: 0px;
+            top: 0px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        .another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+        .scroll_box {
+            width: 50px;
+            height: 50px;
+            overflow: scroll;
+            will-change: scroll-position;
+        }
+
+        #scroll_1, #scroll_4, #scroll_6, #scroll_8 {
+            scroll-behavior: auto;
+        }
+
+        #scroll_3 {
+            scroll-behavior: smooth;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="scroll_1" class="scroll_box">
+    <div id="box1a" class="a_box"></div>
+    <div id="box1b" class="another_box"></div>
+  </div>
+  <div id="scroll_2" class="scroll_box">
+    <div id="box2a" class="a_box"></div>
+    <div id="box2b" class="another_box"></div>
+  </div>
+  <div id="scroll_3" class="scroll_box">
+    <div id="box3a" class="a_box"></div>
+    <div id="box3b" class="another_box"></div>
+  </div>
+  <div id="scroll_4" class="scroll_box">
+    <div id="box4a" class="a_box"></div>
+    <div id="box4b" class="another_box"></div>
+  </div>
+  <div id="scroll_5" class="scroll_box">
+    <div id="box5a" class="a_box"></div>
+    <div id="box5b" class="another_box"></div>
+  </div>
+  <div id="scroll_6" class="scroll_box">
+    <div id="box6a" class="a_box"></div>
+    <div id="box6b" class="another_box"></div>
+  </div>
+  <div id="scroll_7" class="scroll_box">
+    <div id="box7a" class="a_box"></div>
+    <div id="box7b" class="another_box"></div>
+  </div>
+  <div id="scroll_8" class="scroll_box">
+    <div id="box8a" class="a_box"></div>
+    <div id="box8b" class="another_box"></div>
+  </div>
+  <div id="scroll_9" class="scroll_box">
+    <div id="box9a" class="a_box"></div>
+    <div id="box9b" class="another_box"></div>
+  </div>
+  <div id="scroll_10" class="scroll_box">
+    <div id="box10a" class="a_box"></div>
+    <div id="box10b" class="another_box"></div>
+  </div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      document.getElementById("box1b").scrollIntoView({block: "end"});
+      document.getElementById("box2b").scrollIntoView({block: "end"});
+      document.getElementById("box3b").scrollIntoView({block: "end", behavior: "instant"});
+      document.getElementById("box4b").scrollIntoView({block: "end", behavior: "instant"});
+      document.getElementById("box5b").scrollIntoView({block: "end", behavior: "instant"});
+      document.getElementById("box6b").scrollIntoView({block: "end", behavior: "auto"});
+      document.getElementById("box7b").scrollIntoView({block: "end", behavior: "auto"});
+      document.getElementById("box8b").scrollIntoView(false);
+      document.getElementById("box9b").scrollIntoView(false);
+
+      // Scroll_10 is a control, expected to scroll smoothly
+      document.getElementById("box10b").scrollIntoView({block: "end", behavior: "smooth"});
+
+      // Interrupt any smooth scrolling
+      for (var i=1; i <= 10; i++) {
+        document.getElementById("scroll_" + i).scrollLeft
+          = document.getElementById("scroll_" + i).scrollLeft;
+        document.getElementById("scroll_" + i).scrollTop
+          = document.getElementById("scroll_" + i).scrollTop;
+      }
+    } else {
+      // Scroll all boxes except box 10
+      for (var i=1; i <= 9; i++) {
+        document.getElementById("box" + i + "b").scrollIntoView({block: "end", behavior: "instant"});
+      }
+    }
+    document.documentElement.removeAttribute("class");
+  }
+
+  for (var i=1; i <= 10; i++) {
+    document.getElementById("box" + i + "a")
+      .scrollIntoView({block: "start", behavior: "instant"});
+  }
+
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-4.html b/layout/reftests/scrolling/scroll-behavior-4.html
new file mode 100644
index 0000000000..65c39cdcce
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-4.html
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538 - Anchor Link Scrolling</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .a_box {
+            position: relative;
+            left: 0px;
+            top: 0px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        .another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+            display: inline-block;
+        }
+
+        .scroll_box {
+            width: 50px;
+            height: 50px;
+            overflow: scroll;
+            will-change: scroll-position;
+        }
+
+        #scroll_1 {
+            scroll-behavior: auto;
+        }
+
+        #scroll_3 {
+            scroll-behavior: smooth;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="scroll_1" class="scroll_box">
+    <div id="box1a" class="a_box"></div>
+    <a name="test_anchor_1" id="box1b" class="another_box"></a>
+  </div>
+  <div id="scroll_2" class="scroll_box">
+    <div id="box2a" class="a_box"></div>
+    <a name="test_anchor_2" id="box2b" class="another_box"></a>
+  </div>
+  <div id="scroll_3" class="scroll_box">
+    <div id="box3a" class="a_box"></div>
+    <a name="test_anchor_3" id="box3b" class="another_box"></a>
+  </div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      // Scroll_1 to Scroll_2 are expected to scroll instantly
+      window.location.hash = "test_anchor_1";
+      window.location.hash = "test_anchor_2";
+
+      // Scroll_3 is expected to scroll smoothly
+      document.getElementById("box3b").scrollIntoView({block: "end", behavior: "smooth"});
+
+      // Interrupt any smooth scrolling
+      for (var i=1; i <= 3; i++) {
+        document.getElementById("scroll_" + i).scrollLeft
+          = document.getElementById("scroll_" + i).scrollLeft;
+        document.getElementById("scroll_" + i).scrollTop
+          = document.getElementById("scroll_" + i).scrollTop;
+      }
+    } else {
+      // Scroll all boxes except for Scroll_3
+      for (var i=1; i <= 2; i++) {
+        document.getElementById("box" + i + "b").scrollIntoView({block: "end", behavior: "instant"});
+      }
+    }
+    document.documentElement.removeAttribute("class");
+  }
+
+  for (var i=1; i <= 3; i++) {
+    document.getElementById("box" + i + "a")
+      .scrollIntoView({block: "start", behavior: "instant"});
+  }
+
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-5.html b/layout/reftests/scrolling/scroll-behavior-5.html
new file mode 100644
index 0000000000..e866e6905f
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-5.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538 - Element.ScrollLeft and Element.ScrollTop scroll-behavior</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .a_box {
+            position: relative;
+            left: 0px;
+            top: 0px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        .another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+        .scroll_box {
+            width: 50px;
+            height: 50px;
+            overflow: scroll;
+        }
+
+        #scroll_2, #scroll_4 {
+            scroll-behavior: auto;
+        }
+
+        #scroll_5, #scroll_6 {
+            scroll-behavior: smooth;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="scroll_1" class="scroll_box">
+    <div id="box1a" class="a_box"></div>
+    <div id="box1b" class="another_box"></div>
+  </div>
+  <div id="scroll_2" class="scroll_box">
+    <div id="box2a" class="a_box"></div>
+    <div id="box2b" class="another_box"></div>
+  </div>
+  <div id="scroll_3" class="scroll_box">
+    <div id="box3a" class="a_box"></div>
+    <div id="box3b" class="another_box"></div>
+  </div>
+  <div id="scroll_4" class="scroll_box">
+    <div id="box4a" class="a_box"></div>
+    <div id="box4b" class="another_box"></div>
+  </div>
+  <div id="scroll_5" class="scroll_box">
+    <div id="box5a" class="a_box"></div>
+    <div id="box5b" class="another_box"></div>
+  </div>
+  <div id="scroll_6" class="scroll_box">
+    <div id="box6a" class="a_box"></div>
+   <div id="box6b" class="another_box"></div>
+  </div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      // Expect instantaneous scroll:
+      document.getElementById("scroll_1").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_2").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_3").scrollTo(0, 0);
+      document.getElementById("scroll_4").scrollTo(0, 0);
+
+      // Expect smooth scroll:
+      document.getElementById("scroll_5").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_6").scrollTo(0, 0);
+
+      // Interrupt any smooth scrolling
+      for (var i=1; i <= 6; i++) {
+        document.getElementById("scroll_" + i).scrollTo();
+      }
+    } else {
+      // Scroll all boxes except for box5a and box6a
+      for (var i=1; i <= 4; i++) {
+        document.getElementById("box" + i + "a").scrollIntoView({block: "end", behavior: "instant"});
+      }
+    }
+    document.documentElement.removeAttribute("class");
+  }
+
+  for (var i=1; i <= 6; i++) {
+    document.getElementById("box" + i + "b")
+      .scrollIntoView({block: "start", behavior: "instant"});
+  }
+
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-6.html b/layout/reftests/scrolling/scroll-behavior-6.html
new file mode 100644
index 0000000000..5c211b8c3c
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-6.html
@@ -0,0 +1,146 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538 - Element.ScrollBy and Element.ScrollTo</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .a_box {
+            position: relative;
+            left: 0px;
+            top: 0px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        .another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+        .scroll_box {
+            width: 50px;
+            height: 50px;
+            overflow: scroll;
+            will-change: scroll-position;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="scroll_1" class="scroll_box">
+    <div id="box1a" class="a_box"></div>
+    <div id="box1b" class="another_box"></div>
+  </div>
+  <div id="scroll_2" class="scroll_box">
+    <div id="box2a" class="a_box"></div>
+    <div id="box2b" class="another_box"></div>
+  </div>
+  <div id="scroll_3" class="scroll_box">
+    <div id="box3a" class="a_box"></div>
+    <div id="box3b" class="another_box"></div>
+  </div>
+  <div id="scroll_4" class="scroll_box">
+    <div id="box4a" class="a_box"></div>
+    <div id="box4b" class="another_box"></div>
+  </div>
+  <div id="scroll_5" class="scroll_box">
+    <div id="box5a" class="a_box"></div>
+    <div id="box5b" class="another_box"></div>
+  </div>
+  <div id="scroll_6" class="scroll_box">
+    <div id="box6a" class="a_box"></div>
+    <div id="box6b" class="another_box"></div>
+  </div>
+  <div id="scroll_7" class="scroll_box">
+    <div id="box7a" class="a_box"></div>
+    <div id="box7b" class="another_box"></div>
+  </div>
+  <div id="scroll_8" class="scroll_box">
+    <div id="box8a" class="a_box"></div>
+    <div id="box8b" class="another_box"></div>
+  </div>
+  <div id="scroll_9" class="scroll_box">
+    <div id="box9a" class="a_box"></div>
+    <div id="box9b" class="another_box"></div>
+  </div>
+  <div id="scroll_10" class="scroll_box">
+    <div id="box10a" class="a_box"></div>
+    <div id="box10b" class="another_box"></div>
+  </div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      document.getElementById("scroll_1").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_1").scrollBy({left: 5, top: 0});
+      
+      document.getElementById("scroll_2").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_2").scrollBy({left: 0, top: 5});
+      
+      document.getElementById("scroll_3").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_3").scrollBy({left: 5, top: 5});
+      
+      document.getElementById("scroll_4").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_4").scrollBy({left: 5});
+      document.getElementById("scroll_4").scrollBy({top: 5});
+      
+      document.getElementById("scroll_5").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_5").scrollBy({left: 5, top: 5, behavior: "smooth"});
+      // Expected to NOT interrupt smooth scrolling
+      document.getElementById("scroll_5").scrollBy({});
+      
+      document.getElementById("scroll_6").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_6").scrollBy({left: 5, behavior: "smooth"});
+      // Expected to interrupt smooth scrolling and use the current position
+      // As the default for the axis that are not specified in the target
+      document.getElementById("scroll_6").scrollBy({top: 5, behavior: "smooth"});
+      
+      document.getElementById("scroll_7").scrollTo(0, 0);
+      document.getElementById("scroll_7").scrollBy(5, 0);
+      
+      document.getElementById("scroll_8").scrollTo(0, 0);
+      document.getElementById("scroll_8").scrollBy(0, 5);
+      
+      document.getElementById("scroll_9").scrollTo(0, 0);
+      document.getElementById("scroll_9").scrollBy(5, 5);
+      
+      document.getElementById("scroll_10").scrollTo(0, 0);
+      document.getElementById("scroll_10").scrollBy({left: 5, top: 5, behavior: "smooth"});
+      // Expected to NOT interrupt smooth scrolling
+      document.getElementById("scroll_10").scrollBy(0, 0);
+    } else {
+      document.getElementById("scroll_1").scrollTo({left: 5, top: 0});
+      document.getElementById("scroll_2").scrollTo({left: 0, top: 5});
+      document.getElementById("scroll_3").scrollTo({left: 5, top: 5});
+      document.getElementById("scroll_4").scrollTo({left: 5, top: 5});
+      document.getElementById("scroll_5").scrollTo({left: 5, top: 5});
+      document.getElementById("scroll_6").scrollTo(0, 5);
+      document.getElementById("scroll_7").scrollTo(5, 0);
+      document.getElementById("scroll_8").scrollTo(0, 5);
+      document.getElementById("scroll_9").scrollTo(5, 5);
+      document.getElementById("scroll_10").scrollTo(5, 5);
+    }
+    
+    // Allow smooth scrolling to complete before testing result
+    setTimeout(function() {
+      document.documentElement.removeAttribute("class");
+    }, 500);
+  }
+
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-7.html b/layout/reftests/scrolling/scroll-behavior-7.html
new file mode 100644
index 0000000000..3e18da1caa
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-7.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538, smooth scrolling expected</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
+        #a_box {
+            position: relative;
+            left: 10px;
+            top: 10px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        #another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="a_box"></div>
+  <div id="another_box"></div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      window.scrollTo(500, 500);
+      window.scrollTo(window.scrollX, window.scrollY);
+    }
+    document.documentElement.removeAttribute("class");
+  }
+  window.scrollTo({left: 0, top: 0, behavior: "instant"});
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-8.html b/layout/reftests/scrolling/scroll-behavior-8.html
new file mode 100644
index 0000000000..6a16002256
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-8.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1010538 - Dynamically change scroll-behavior</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .a_box {
+            position: relative;
+            left: 0px;
+            top: 0px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        .another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+        .scroll_box {
+            width: 150px;
+            height: 150px;
+            overflow: scroll;
+        }
+
+        #scroll_2 {
+            scroll-behavior: auto;
+        }
+
+        #scroll_3 {
+            scroll-behavior: smooth;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="scroll_1" class="scroll_box">
+    <div id="box1a" class="a_box"></div>
+    <div id="box1b" class="another_box"></div>
+  </div>
+  <div id="scroll_2" class="scroll_box">
+    <div id="box2a" class="a_box"></div>
+    <div id="box2b" class="another_box"></div>
+  </div>
+  <div id="scroll_3" class="scroll_box">
+    <div id="box3a" class="a_box"></div>
+    <div id="box3b" class="another_box"></div>
+  </div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      // Expect smooth scroll:
+      document.getElementById("scroll_1").style.scrollBehavior = "smooth";
+      document.getElementById("scroll_1").scrollTo({left: 0, top: 0});
+      document.getElementById("scroll_2").style.scrollBehavior = "smooth";
+      document.getElementById("scroll_2").scrollTo({left: 0, top: 0});
+
+      // Expect instant scroll:
+      document.getElementById("scroll_3").style.scrollBehavior = "auto";
+      document.getElementById("scroll_3").scrollTo({left: 0, top: 0});
+    } else {
+      document.getElementById("scroll_1").scrollTo({left: 0, top: 0, behavior: "smooth"});
+      document.getElementById("scroll_2").scrollTo({left: 0, top: 0, behavior: "smooth"});
+      document.getElementById("scroll_3").scrollTo({left: 0, top: 0, behavior: "instant"});
+    }
+
+    // Interrupt any smooth scrolling
+    for (var i=1; i <= 3; i++) {
+      document.getElementById("scroll_" + i).scrollTo();
+    }
+
+    document.documentElement.removeAttribute("class");
+  }
+
+  for (var i=1; i <= 3; i++) {
+    document.getElementById("box" + i + "b")
+      .scrollIntoView({block: "start", behavior: "instant"});
+  }
+
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-9.html b/layout/reftests/scrolling/scroll-behavior-9.html
new file mode 100644
index 0000000000..37b3bf0c02
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-9.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1082098, smooth scrolling expected after dynamically setting scroll-behavior on body</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        #a_box {
+            position: relative;
+            left: 10px;
+            top: 10px;
+            width: 20px;
+            height: 20px;
+            background: blue;
+        }
+
+        #another_box {
+            position: relative;
+            left: 2000px;
+            top: 2000px;
+            width: 20px;
+            height: 20px;
+            background: green;
+        }
+
+    </style>
+</head>
+<body>
+  <div id="a_box"></div>
+  <div id="another_box"></div>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      // Scroll - expected to be smooth
+      window.scrollTo({left: 500, top: 500});
+      // Interrupt smooth scrolling
+      window.scrollTo({left: window.scrollX, top: window.scrollY});
+      // If scroll was not performed smoothly, we would be at 500,500 now
+    }
+    document.documentElement.removeAttribute("class");
+  }
+  window.scrollTo({left: 0, top: 0, behavior: "instant"});
+  document.documentElement.style.scrollBehavior = "smooth";
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scroll-behavior-textarea.html b/layout/reftests/scrolling/scroll-behavior-textarea.html
new file mode 100644
index 0000000000..964719c137
--- /dev/null
+++ b/layout/reftests/scrolling/scroll-behavior-textarea.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1320200, smooth scrolling in textarea</title>
+    <style type="text/css">
+
+        html,body {
+            color: black;
+            background-color: white;
+            font-size: 16px;
+            padding: 0;
+            margin: 0;
+        }
+
+        #text {
+            width: 50px;
+            height: 50px;
+            overflow: scroll;
+            will-change: scroll-position;
+            scroll-behavior: smooth;
+        }
+
+    </style>
+</head>
+<body>
+  <textarea id="text">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida.
+  </textarea>
+<script>
+  function doTest() {
+    if (document.location.search != '?ref') {
+      var e = document.getElementById("text");
+      e.scrollTop = e.scrollHeight;
+
+      // Interrupt any smooth scrolling
+      e.scrollLeft = e.scrollLeft;
+      e.scrollTop = e.scrollTop;
+    }
+    document.documentElement.removeAttribute("class");
+  }
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/scrollbars-area-in-iframe-ref-child.html b/layout/reftests/scrolling/scrollbars-area-in-iframe-ref-child.html
new file mode 100644
index 0000000000..6eed6f6b09
--- /dev/null
+++ b/layout/reftests/scrolling/scrollbars-area-in-iframe-ref-child.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<meta charset='utf-8'>
+<style>
+html {
+    border: 5px solid lime;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow-y: scroll;
+}
+</style>
+</html>
diff --git a/layout/reftests/scrolling/scrollbars-area-in-iframe-ref.html b/layout/reftests/scrolling/scrollbars-area-in-iframe-ref.html
new file mode 100644
index 0000000000..1360f1f017
--- /dev/null
+++ b/layout/reftests/scrolling/scrollbars-area-in-iframe-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<html>
+<iframe style="width:300px; height:300px; border:2px solid blue"
+        src="scrollbars-area-in-iframe-ref-child.html">
+</html>
diff --git a/layout/reftests/scrolling/scrollbars-area-in-iframe.html b/layout/reftests/scrolling/scrollbars-area-in-iframe.html
new file mode 100644
index 0000000000..cfed66910b
--- /dev/null
+++ b/layout/reftests/scrolling/scrollbars-area-in-iframe.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<iframe style="width:300px; height:300px; border:2px solid blue"
+        src="data:text/html,<!DOCTYPE HTML>
+                <html>
+                <meta charset='utf-8'>
+                <style>
+                html {
+                    border: 5px solid lime;
+                    height: 100vh;
+                    box-sizing: border-box;
+                    overflow-y: scroll;
+                }
+                </style>"></iframe>
+</html>
diff --git a/layout/reftests/scrolling/scrolling.js b/layout/reftests/scrolling/scrolling.js
new file mode 100644
index 0000000000..2176c90d8d
--- /dev/null
+++ b/layout/reftests/scrolling/scrolling.js
@@ -0,0 +1,46 @@
+var topElements;
+var failed = false;
+
+function doScroll(d)
+{
+  if (failed)
+    return;
+  for (var i = 0; i < topElements.length; ++i) {
+    var e = topElements[i];
+    e.scrollTop = d;
+    if (e.scrollTop != d) {
+      document.documentElement.textContent =
+          "Scrolling failed on " + e.tagName + " element, " +
+          "tried to scroll to " + d + ", got " + e.scrollTop +
+          " (Random number: " + Math.random() + ")";
+      failed = true;
+    }
+  }
+}
+
+// bug 1134459, images are decoded off main thread
+// Wait for the load event so we know all images have loaded
+document.onload = function() {
+  topElements = document.getElementsByClassName("scrollTop");
+  if (!topElements.length) {
+    topElements = [document.documentElement];
+  }
+
+  if (document.location.search == '?ref') {
+    doScroll(20);
+  } else if (document.location.search == '?up') {
+    doScroll(40);
+    document.documentElement.setAttribute("class", "reftest-wait");
+    window.addEventListener("MozReftestInvalidate", function() {
+        document.documentElement.removeAttribute("class");
+        doScroll(20);
+        });
+  } else {
+    doScroll(1);
+    document.documentElement.setAttribute("class", "reftest-wait");
+    window.addEventListener("MozReftestInvalidate", function() {
+        document.documentElement.removeAttribute("class");
+        doScroll(20);
+        });
+  }
+}
diff --git a/layout/reftests/scrolling/simple-1.html b/layout/reftests/scrolling/simple-1.html
new file mode 100644
index 0000000000..761f67c0fb
--- /dev/null
+++ b/layout/reftests/scrolling/simple-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="height:2000px; overflow:hidden">
+<script src="scrolling.js"></script>
+<div style="height:300px; background:url(repeatable-diagonal-gradient.png);"></div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/subpixel-1-ref.html b/layout/reftests/scrolling/subpixel-1-ref.html
new file mode 100644
index 0000000000..52ec2c54a5
--- /dev/null
+++ b/layout/reftests/scrolling/subpixel-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="margin:0">
+<div style="height:1205.6px"></div>
+<div id="d" style="height:0.6px; background:red"></div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/subpixel-1.html b/layout/reftests/scrolling/subpixel-1.html
new file mode 100644
index 0000000000..a0bac5f6a6
--- /dev/null
+++ b/layout/reftests/scrolling/subpixel-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body style="margin:0" onload="doTest()">
+<div style="height:1205.6px"></div>
+<div id="d" style="height:0.6px; background:red"></div>
+<script>
+function doTest() {
+  window.scrollTo(0, document.documentElement.scrollTop);
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/text-1.html b/layout/reftests/scrolling/text-1.html
new file mode 100644
index 0000000000..23afe84ce4
--- /dev/null
+++ b/layout/reftests/scrolling/text-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div class="scrollTop" style="height:100px; overflow:hidden;">
+  <div style="margin-top:30px;">Hello Kitty</div>
+  <div style="height:400px;"></div>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/text-2.html b/layout/reftests/scrolling/text-2.html
new file mode 100644
index 0000000000..46cc041aba
--- /dev/null
+++ b/layout/reftests/scrolling/text-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div class="scrollTop" style="width:400px; height:400px; margin-top:10.5px; font-size:21px; white-space:pre; overflow:hidden;">Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  Hello Kitty
+  <div style="height:800px;"></div>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/transformed-1.html b/layout/reftests/scrolling/transformed-1.html
new file mode 100644
index 0000000000..cbc9b7ad4a
--- /dev/null
+++ b/layout/reftests/scrolling/transformed-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div class="scrollTop" style="height:100px; width:100px; overflow:hidden;
+                              -moz-transform:scale(2.7); transform:scale(2.7); -moz-transform-origin:top left; transform-origin:top left;">
+  <div style="background:yellow;">
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+    <div>Hello Kitty</div>
+  </div>
+</div>
+<script>document.body.getBoundingClientRect();</script>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/uncovering-1-ref.html b/layout/reftests/scrolling/uncovering-1-ref.html
new file mode 100644
index 0000000000..52d7a1463c
--- /dev/null
+++ b/layout/reftests/scrolling/uncovering-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+body {
+  width: 1500px;
+  overflow: hidden;
+}
+div#bottom {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 200px;
+  width: 200px;
+  background: green;
+}
+</style>
+</head>
+<body>
+<div id="bottom"></div>
+<div style="width:600px; height:100px; background:pink;"></div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/uncovering-1.html b/layout/reftests/scrolling/uncovering-1.html
new file mode 100644
index 0000000000..511892049d
--- /dev/null
+++ b/layout/reftests/scrolling/uncovering-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+<style>
+body {
+  width: 1500px;
+  overflow: hidden;
+}
+div#bottom {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 200px;
+  width: 200px;
+  background: green;
+}
+</style>
+</head>
+<body>
+<div id="bottom"></div>
+<div style="width:600px; height:100px; background:pink;"></div>
+<script>
+document.documentElement.scrollLeft = 200;
+function doTest() {
+  document.documentElement.removeAttribute("class");
+  document.documentElement.scrollLeft = 0;
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/uncovering-2-ref.html b/layout/reftests/scrolling/uncovering-2-ref.html
new file mode 100644
index 0000000000..5e0e97c825
--- /dev/null
+++ b/layout/reftests/scrolling/uncovering-2-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+body {
+  width: 1500px;
+  overflow: hidden;
+}
+div#bottom {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 200px;
+  width: 200px;
+  background: green;
+}
+</style>
+</head>
+<body>
+<div style="margin-left:200px; left:200px; width:100px; height:100px; background:pink;"></div>
+<div style="left:0; width:500px; height:20px; background:blue;"></div>
+<div id="bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/uncovering-2.html b/layout/reftests/scrolling/uncovering-2.html
new file mode 100644
index 0000000000..f0d9a39675
--- /dev/null
+++ b/layout/reftests/scrolling/uncovering-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+<style>
+body {
+  width: 1500px;
+  overflow: hidden;
+}
+div#bottom {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 200px;
+  width: 200px;
+  background: green;
+}
+</style>
+</head>
+<body>
+<div style="margin-left:200px; left:200px; width:100px; height:100px; background:pink;"></div>
+<div style="left:0; width:500px; height:20px; background:blue;"></div>
+<div id="bottom"></div>
+<script>
+document.documentElement.scrollLeft = 200;
+function doTest() {
+  document.documentElement.removeAttribute("class");
+  document.documentElement.scrollLeft = 0;
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/xul-scrollbar-iterate-ref.html b/layout/reftests/scrolling/xul-scrollbar-iterate-ref.html
new file mode 100644
index 0000000000..784661e1de
--- /dev/null
+++ b/layout/reftests/scrolling/xul-scrollbar-iterate-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>XUL scrollbar testcase</title>
+<style>
+
+html { overflow: hidden }
+
+div.outer {
+  display: -moz-box;
+  overflow: scroll;
+  width: 200px;
+  height: 100px;
+  background: yellow;
+}
+
+div.inner {
+  width: 300px;
+  height: 100px;
+  min-width: 300px;
+  min-height: 100px;
+  background: aqua;
+}
+</style>
+
+<div class="outer">
+  <div class="inner">
+  </div>
+</div>
diff --git a/layout/reftests/scrolling/xul-scrollbar-iterate.html b/layout/reftests/scrolling/xul-scrollbar-iterate.html
new file mode 100644
index 0000000000..816218c3dc
--- /dev/null
+++ b/layout/reftests/scrolling/xul-scrollbar-iterate.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>XUL scrollbar testcase</title>
+<style>
+
+html { overflow: hidden }
+
+div.outer {
+  display: -moz-box;
+  overflow: auto;
+  width: 200px;
+  height: 100px;
+  background: yellow;
+}
+
+div.inner {
+  width: 300px;
+  height: 100px;
+  min-width: 300px;
+  min-height: 100px;
+  background: aqua;
+}
+</style>
+
+<div class="outer">
+  <div class="inner">
+  </div>
+</div>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/scrolling
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip