test_viewport_scrollbar_causing_reflow.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

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

-->

<head>

  <meta charset="utf-8">

  <title>Test for Bug 1367568</title>

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

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

</head>

<body>

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

<div id="content">

  <!-- Some fixed-width divs that we shouldn't have to reflow when the viewport

       changes. More than 5 so that our leeway for scrollbar parts doesn't

       accidentally cause the test to pass -->

  <div style="width: 100px">fixed-width <div>(child)</div></div>

  <div style="width: 100px">fixed-width <div>(child)</div></div>

  <div style="width: 100px">fixed-width <div>(child)</div></div>

  <div style="width: 100px">fixed-width <div>(child)</div></div>

  <div style="width: 100px">fixed-width <div>(child)</div></div>

  <div style="width: 100px">fixed-width <div>(child)</div></div>

  <div style="position: absolute; width: 150px">

    abs-fixed-width

    <div>(child)</div>

  </div>

</div>

<pre id="test">

<script>

"use strict";

/** Test for Bug 1367568 **/

/**

 * This test verifies that "overflow" changes on the <body> don't cause

 * an unnecessarily large amount of reflow.

*/

// Vars used in setStyleAndMeasure that we really only have to look up once:

const gUtils = SpecialPowers.getDOMWindowUtils(window);

function setStyleAndMeasure(initialStyle, finalStyle) {

  is(document.body.style.length, 0,

     "Bug in test - body should start with empty style");

  let unusedVal = document.body.offsetHeight; // flush layout

  let constructCount = gUtils.framesConstructed;

  document.body.style = initialStyle;

  unusedVal = document.body.offsetHeight; // flush layout

  let reflowCountBeforeTweak = gUtils.framesReflowed;

  document.body.style = finalStyle;

  unusedVal = document.body.offsetHeight; // flush layout

  let reflowCountAfterTweak = gUtils.framesReflowed;

  // Clean up:

  document.body.style = "";

  is(gUtils.framesConstructed, constructCount,

     "Style tweak shouldn't have triggered frame construction");

  // ...and return the delta:

  return reflowCountAfterTweak - reflowCountBeforeTweak;

function main() {

  // First, we sanity-check that our measurement make sense -- if we leave

  // styles unchanged, we should measure no frames being reflowed:

  let count = setStyleAndMeasure("width: 50px; height: 80px",

                                 "width: 50px; height: 80px");

  is(count, 0,

     "Shouldn't reflow anything when we leave 'width' & 'height' unchanged");

  // Now: see how many frames are reflowed when the "width" & "height" change.

  // We'll use this as the reference when measuring reflow counts for various

  // changes to "overflow" below.

  count = setStyleAndMeasure("width: 50px; height: 80px",

                             "width: 90px; height: 60px");

  ok(count > 0,

     "Should reflow some frames when 'width' & 'height' change");

  const scrollbarsHaveButtons = navigator.platform.includes("Win");

  // This is to allow for reflowing scrollbar parts themselves.

  const scrollbarReflows = scrollbarsHaveButtons ? 5 : 2;

  // Expected maximum number of frames reflowed for "overflow" changes

  const expectedMax = count + scrollbarReflows;

  // Shared ending for messages in all ok() checks below:

  const messageSuffix =

    " shouldn't be greater than count for tweaking width/height on body (" +

    expectedMax + ")";

  // OK, here is where the relevant tests actually begin!!

  // See how many frames we reflow for various tweaks to "overflow" on

  // the body -- we expect the count to be no larger than |expectedMax|.

  count = setStyleAndMeasure("", "overflow: scroll");

  ok(count <= expectedMax,

     "Reflow count when setting 'overflow: scroll' on body (" + count + ")" +

     messageSuffix);

  count = setStyleAndMeasure("", "overflow: hidden");

  ok(count <= expectedMax,

     "Reflow count when setting 'overflow: hidden' on body (" + count + ")" +

     messageSuffix);

  // Test removal of "overflow: scroll":

  count = setStyleAndMeasure("overflow: scroll", "");

  ok(count <= expectedMax,

     "Reflow count when removing 'overflow: scroll' from body (" + count + ")" +

     messageSuffix);

  count = setStyleAndMeasure("overflow: hidden", "");

  ok(count <= expectedMax,

     "Reflow count when removing 'overflow: hidden' from body (" + count + ")" +

     messageSuffix);

  // Test change between two non-'visible' overflow values:

  count = setStyleAndMeasure("overflow: scroll", "overflow: hidden");

  ok(count <= expectedMax,

     "Reflow count when changing 'overflow' on body (" + count + ")" +

     messageSuffix);

main();

</script>

</pre>

</body>

</html>