diff --git a/layout/generic/test/mochitest.toml b/layout/generic/test/mochitest.toml
index 8b6f2cc3bdd7..b56cec5d7de5 100644
--- a/layout/generic/test/mochitest.toml
+++ b/layout/generic/test/mochitest.toml
@@ -229,6 +229,8 @@ skip-if = ["os == 'linux' && os_version == '18.04'"]
 
 ["test_overlay_scrollbar_position.html"]
 
+["test_page_scroll_overlap.html"]
+
 ["test_page_scroll_with_fixed_pos.html"]
 support-files = ["page_scroll_with_fixed_pos_window.html"]
 
diff --git a/layout/generic/test/test_page_scroll_overlap.html b/layout/generic/test/test_page_scroll_overlap.html
new file mode 100644
index 000000000000..b3ea34724ffb
--- /dev/null
+++ b/layout/generic/test/test_page_scroll_overlap.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<head>
+  <title>Test for configurable scrolling overlap when scrolling by pages</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script type="text/javascript" src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style>
+    #myIframe {
+      width: 400px;
+      height: 300px;
+    }
+  </style>
+</head>
+<body>
+<iframe id="myIframe"></iframe>
+<script type="text/javascript">
+// This mochitest tests the behavior of two about:config prefs:
+//  toolkit.scrollbox.pagescroll.maxOverlapPercent
+//  toolkit.scrollbox.pagescroll.maxOverlapLines
+// These prefs (added in bug 1783183) determine the amount of overlap between
+// the old and new content in the scrollport when scrolling by pages, e.g. when
+// a user presses PageDown or PageUp, or when we handle a call to
+// window.scrollByPages().
+
+// Kick off the main test function when we've loaded:
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(() => {
+  doTests();
+});
+
+// constants:
+const IFRAME_HEIGHT_IN_PX = 300;  // Needs to match the style for #myIframe
+const LINE_HEIGHT_IN_PX = 50; // Needs to match our chosen Ahem font-size below
+const EPSILON_PER_LINE = 3; // see documentation
+const IFRAME_SRCDOC =
+"<!doctype html>\
+ <meta charset='utf-8'>\
+ <style>\
+ :root{overflow:hidden;scroll-behavior:auto;\
+</style><div style='height:5000px;width:5000px'>";
+
+// This function sets the relevant about:config prefs to `pctVal` and
+// `linesVal` and then checks that paging down (and later up) results in a
+// scrollport that overlaps the previous scrollport by `expectedOverlapInPx`.
+//
+// Callers that are testing a line-count-based amount of overlap should pass
+// `true` for useEpsilon, which then makes us expand the allowable overlap
+// to `expectedOverlapInPx +/- (linesVal * EPSILON_PER_LINE)`.
+async function testPrefVals(pctVal, linesVal, expectedOverlapInPx, useEpsilon) {
+  const win = myIframe.contentWindow;
+  const docElem = myIframe.contentDocument.documentElement;
+
+  // Define a convenience "is()" function that uses either is or isfuzzy
+  // depending on whether we're using an epsilon:
+  let myIs = function(actual, expected, message) {
+    if (useEpsilon) {
+      let epsilon = linesVal * EPSILON_PER_LINE;
+      isfuzzy(actual, expected, epsilon, message);
+    } else {
+      is(actual, expected, message);
+    }
+  };
+
+  // Set the pref values:
+  let prefVals = [];
+  if (pctVal != null) {
+    prefVals.push(["toolkit.scrollbox.pagescroll.maxOverlapPercent", pctVal]);
+  }
+  if (linesVal != null) {
+    prefVals.push(["toolkit.scrollbox.pagescroll.maxOverlapLines", linesVal]);
+  }
+  await SpecialPowers.pushPrefEnv({"set": prefVals});
+
+  // Scroll down by 1 page, and check that the overlap is what we expect:
+  let initialScrollY = docElem.scrollTop;
+  win.scrollByPages(1);
+  let deltaY = docElem.scrollTop - initialScrollY;
+  let overlapY = IFRAME_HEIGHT_IN_PX - deltaY;
+  myIs(overlapY, expectedOverlapInPx,
+     `Should get expected overlap, when paging down ` +
+     `with pref vals ${pctVal}% and ${linesVal}`);
+
+  // Now scroll up by 1 page (from the maximum scroll position),
+  // and check that the overlap is what we expect:
+  docElem.scrollTop = docElem.scrollTopMax;
+  initialScrollY = docElem.scrollTop;
+  win.scrollByPages(-1);
+  deltaY =  initialScrollY - docElem.scrollTop;
+  overlapY = IFRAME_HEIGHT_IN_PX - deltaY;
+  myIs(overlapY, expectedOverlapInPx,
+     `Should get expected overlap, when paging up ` +
+     `with pref vals ${pctVal}% and ${linesVal}`);
+
+  // Undo our pref modifications:
+  await SpecialPowers.popPrefEnv();
+
+  // Restore the initial scroll position to clean up after ourselves:
+  docElem.scrollTop = 0;
+}
+
+async function doTests() {
+  // Toggle a pref to avoid uninteresting off-by-1 test-failures on Android:
+  await SpecialPowers.pushPrefEnv({
+    "set": [["layout.scroll.disable-pixel-alignment", true]]
+  });
+
+  // Load a tall scrollable document in an iframe:
+  let iframeLoad = new Promise(resolve => {
+    myIframe.addEventListener("load", resolve, { once: true });
+  });
+  myIframe.srcdoc = IFRAME_SRCDOC;
+  await iframeLoad;
+
+  // Test pref-combinations that result in no overlap (0) between the old and
+  // new scroll positions. If either pref is 0 [or less than 0, which we clamp
+  // internally when using the pref value], then there should be no overlap.
+  await testPrefVals(0, 0, 0);
+  await testPrefVals(10, 0, 0);
+  await testPrefVals(100, 0, 0);
+  await testPrefVals(0, 10, 0);
+  await testPrefVals(-5, -5, 0);
+  await testPrefVals(-5, 9999, 0);
+  await testPrefVals(200, -5, 0);
+
+  // Test various percent values (with extremely high line-count values which
+  // makes the line count irrelevant, since we use whichever pref produces a
+  // smaller amount of overlap).  Note that the iframe scrollport is 300px
+  // tall, so that's what the percent resolves against.
+  await testPrefVals(1, 9999, 3);     // 1% of 300px is 3px
+  await testPrefVals(10, 9999, 30);   // 10% of 300px is 30px
+  await testPrefVals(50, 9999, 150);  // 50% of 300px is 150px
+  await testPrefVals(80, 9999, 240);  // 80% of 300px is 240px
+  await testPrefVals(99, 9999, 240);  // Values above 80% get clamped to 80%.
+  await testPrefVals(100, 9999, 240); // Values above 80% get clamped to 80%.
+  await testPrefVals(200, 9999, 240); // Values above 80% get clamped to 80%.
+
+  // Test various line-count pref values (with extremely high percent values,
+  // which makes the percent pref irrelevant, since we use whichever pref
+  // produces a smaller amount of overlap). Note that the "lines" here are
+  // sized using the font metrics of the iframe's root scroll frame, which uses
+  // the initial values for all of the CSS font properties.  So our lines here
+  // have whatever line-height gets used for the default font at the default
+  // 16px font-size.  (Unfortunately we can't force a more predictable font
+  // like Ahem here; even if we set that set on the root node, it doesn't
+  // affect the styles on the root scroll frame.)
+  // So: we set our expectations here by assuming that the lines are a little
+  // bit taller than the default font-size (16px), with a few pixels of epsilon
+  // (per line-height) to allow for platform differences.
+  await testPrefVals(200, 1, 18, true);  // 1 line is roughly 18px tall
+  await testPrefVals(200, 2, 36, true);  // 2 lines are roughly 36px tall
+  await testPrefVals(200, 10, 180, true); // 10 lines are roughly 180px tall
+
+  // Test some combinations where both prefs have intermediate values, where
+  // one or the other will "win" (with the lower pixel-value winning and
+  // establishing the expected amount of overlap):
+  // 10% of 300px is 30px, which is less than 5 lines (roughly 5*18 = 90px)
+  await testPrefVals(10, 5, 30);
+  // 20% of 300px is 60px, which is more than 2 lines (roughly 2*18 = 36px)
+  await testPrefVals(20, 2, 36, true);
+  // 50% of 300px is 150px, which is more than 5 lines (roughly 5*18 = 90px)
+  await testPrefVals(50, 5, 90, true);
+
+  SimpleTest.finish();
+}
+</script>
