helper_check_dp_size.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=1689492

-->

<head>

  <meta charset="utf-8">

  <title>Test for Bug 1689492, helper page</title>

  <script type="application/javascript" src="apz_test_utils.js"></script>

  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>

  <script src="/tests/SimpleTest/paint_listener.js"></script>

  <script type="application/javascript">

    // -------------------------------------------------------------------

    // Infrastructure to get the test assertions to run at the right time.

    // -------------------------------------------------------------------

    var SimpleTest = window.opener.SimpleTest;

    // --------------------------------------------------------------------

    // In this test we have a scrollable root scroll frame (not needed, but

    // more representative), a scrollable outer div, and a scrollable inner

    // div. We scroll the inner div, and test that it gets a non-zero

    // display port (not the main reason for the test, that should already

    // work, but it's a good sanity check), and then check that the outer

    // div gets a display port and (here's the important part of the test)

    // that that display port has zero margins, ie it's relatively close to the

    // dimensions of the outer div (it can't be exact because we align display

    // ports). This tests a regression where the outer div would get non-zero

    // margin display port even though it had never been scrolled (it still

    // needs a display port because it has a scrollable child). We run the

    // test several times with different sized outerdiv.

    // --------------------------------------------------------------------

    function createDivs(outerwidth, outerheight) {

      let outerdiv = document.createElement("div");

      outerdiv.id = "outerdiv";

      outerdiv.style.width = outerwidth + "px";

      outerdiv.style.height = outerheight + "px";

      outerdiv.style.overflow = "scroll";

      let innerdiv = document.createElement("div");

      innerdiv.id = "innerdiv";

      innerdiv.style.width = "25px";

      innerdiv.style.height = "25px";

      innerdiv.style.overflow = "scroll";

      outerdiv.appendChild(innerdiv);

      let innerspacer = document.createElement("div");

      innerspacer.style.width = "25px";

      innerspacer.style.height = "100px";

      innerdiv.appendChild(innerspacer);

      let outerspacer = document.createElement("div");

      outerspacer.style.width = "50px";

      outerspacer.style.height = "10000px";

      outerdiv.appendChild(outerspacer);

      let theplace = document.getElementById("theplace");

      theplace.parentNode.insertBefore(outerdiv, theplace.nextSibling);

    async function testOne(theheight, allowedscalefactor, outputprefix) {

      createDivs(50, theheight);

      // flush layout

      document.documentElement.getBoundingClientRect();

      await promiseApzFlushedRepaints();

      document.getElementById("innerdiv").scrollTop = "10px";

      // Activate the inner div.

      await promiseMoveMouseAndScrollWheelOver(document.getElementById("innerdiv"), 0, 10);

      await promiseApzFlushedRepaints();

      let innerdp = getLastContentDisplayportFor("innerdiv");

      ok(innerdp.height > 30, outputprefix + " innerdiv display port should be larger than innerdiv");

      let outerdp = getLastContentDisplayportFor("outerdiv");

      is(outerdp.x, 0, outputprefix + " outerdiv display port should be relatively bounded x");

      is(outerdp.y, 0, outputprefix + " outerdiv display port should be relatively bounded y");

      ok(outerdp.width <= 50, outputprefix + " outerdiv display port should relatively bounded w");

      ok(outerdp.height < theheight * allowedscalefactor, outputprefix + " outerdiv display port should be relatively bounded h");

      ok(true, "innerdp " + JSON.stringify(innerdp));

      ok(true, "outerdp " + JSON.stringify(outerdp));

      document.getElementById("outerdiv").remove();

    async function test() {

      // We test a variety of scroll frame heights.

      // The first argument of testOne is the scroll frame height.

      // The second argument is the allowed scale factor of scroll frame height

      // to display port height.

      // In the comment following each line we record the values of the display

      // port height at the time of writing the test in both the good (ie with

      // the bug this test is testing fixed), and bad (before the bug this

      // test is testing fixed) cases. These values can obviously be different,

      // but it gives a good idea that the good and bad values are far apart so

      // this test should be robust, and provides good context in the future if

      // this test starts failing.

      await testOne( 50, 5.2, "(height 50)"); // good 256, bad 256

      await testOne(128, 2.1, "(height128)"); // good 256, bad 512

      await testOne(200, 2.0, "(height200)"); // good 384, bad 768

      await testOne(256, 1.6, "(height256)"); // good 384, bad 768

      await testOne(329, 1.6, "(height329)"); // good 512, bad 896

      await testOne(500, 1.3, "(height500)"); // good 640, bad 280

      await testOne(640, 1.7, "(height640)"); // good 1024, bad 1536

    waitUntilApzStable()

    .then(forceLayerTreeToCompositor)

    .then(test)

    .then(subtestDone, subtestFailed);

  </script>

</head>

<body>

  <a id="theplace" target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1689492">Mozilla Bug 1689492</a>

  <!-- Put enough content into the page to make it have a nonzero scroll range, not needed -->

  <div style="height: 5000px"></div>

</body>

</html>