<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test for Bug 1201798</title>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="file_fullscreen-utils.js"></script>
  <style>
    html, body, #measure {
      width: 100%; height: 100%;
      margin: 0px; border: 0px;
    }
    div {
      margin: 0px; border: 0px;
    }
    #ref-outer { width: 100px; height: 100px; overflow: scroll; }
    #ref-inner { width: 100%; height: 100%; }
  </style>
</head>
<body>
<div id="measure"></div>
<div style="height: 1000vh; width: 1000vw;"></div>
<div id="ref-outer">
  <div id="ref-inner"></div>
</div>
<div id="fullscreen"></div>
<script type="text/javascript">

/** Test for Bug 1201798 */

var info = msg => opener.info("[scrollbar] " + msg);
var ok = (cond, msg) => opener.ok(cond, "[scrollbar] " + msg);
var is = (a, b, msg) => opener.is(a, b, "[scrollbar] " + msg);

var gVerticalScrollbarWidth, gHorizontalScrollbarWidth;
var gMeasureDiv = document.getElementById("measure");
var gFullscreenDiv = document.getElementById("fullscreen");

function getMeasureRect() {
  return gMeasureDiv.getBoundingClientRect();
}

function triggerFrameReconstruction() {
  info("Triggering a force frame reconstruction");
  var docElem = document.documentElement;
  var wm = window.getComputedStyle(docElem).writingMode;
  if (wm == "horizontal-tb") {
    docElem.style.writingMode = "vertical-rl";
  } else {
    docElem.style.writingMode = "horizontal-tb";
  }
  docElem.getBoundingClientRect();
}

function assertHasScrollbars(elem) {
  var rect = getMeasureRect();
  info(`screen.width: ${screen.width}, screen.height: ${screen.height}`);
  info(`rect.width: ${rect.width}, rect.height: ${rect.height}`);
  ok(rect.width <= screen.width - gVerticalScrollbarWidth,
     `Should have width less than or equal to ${screen.width - gVerticalScrollbarWidth} indicating vertical scrollbar when ${elem} is in fullscreen`);
  ok(rect.height <= screen.height - gHorizontalScrollbarWidth,
     `Should have height less than or equal to ${screen.height - gHorizontalScrollbarWidth} indicating horizontal scrollbar when ${elem} is in fullscreen`);
}

function assertHasNoScrollbars(elem) {
  var rect = getMeasureRect();
  info(`screen.width: ${screen.width}, screen.height: ${screen.height}`);
  info(`rect.width: ${rect.width}, rect.height: ${rect.height}`);
  is(rect.width, screen.width,
     `Should not have vertical scrollbar when ${elem} is in fullscreen`);
  is(rect.height, screen.height,
     `Should not have horizontal scrollbar when ${elem} is in fullscreen`);
}

function checkScrollbars(elem, shouldHaveScrollbars) {
  is(document.fullscreenElement, elem,
     "Should only check the current fullscreen element");
  var assertFunc = shouldHaveScrollbars ?
    assertHasScrollbars : assertHasNoScrollbars;
  assertFunc(elem);
  triggerFrameReconstruction();
  assertFunc(elem);
}

function begin() {
  // Check for the use of overlay scrollbars. We can only get an accurate
  // answer to our media query if we are Chrome-privileged. Otherwise, the
  // media query will never match.
  let wrappedWindow = SpecialPowers.wrap(window);
  if (wrappedWindow.matchMedia("(-moz-overlay-scrollbars)").matches) {
    // If overlay scrollbar is enabled, the scrollbar is not measurable,
    // so we skip this test in that case.
    info("Skip this test because of overlay scrollbar");
    opener.nextTest();
    return;
  }

  const outerElement = document.getElementById("ref-outer");
  var rectOuter = outerElement.getBoundingClientRect();
  var rectInner = document.getElementById("ref-inner").getBoundingClientRect();
  info(`rectOuter: ${rectOuter.width} x ${rectOuter.height}`);
  info(`rectInner: ${rectInner.width} x ${rectInner.height}`);
  gVerticalScrollbarWidth = rectOuter.width - rectInner.width;
  gHorizontalScrollbarWidth = rectOuter.height - rectInner.height;
  ok(gVerticalScrollbarWidth != 0, "Should have vertical scrollbar");
  ok(gHorizontalScrollbarWidth != 0, "Should have horizontal scrollbar");
  info(`gVerticalScrollbarWidth: ${gVerticalScrollbarWidth}`);
  info(`gHorizontalScrollbarWidth: ${gHorizontalScrollbarWidth}`);

  // Remove the display of outerElement to simplify layout when window goes
  // to fullscreen.
  outerElement.style.display = "none";

  info("Entering fullscreen on root");
  addFullscreenChangeContinuation("enter", enteredFullscreenOnRoot);
  document.documentElement.requestFullscreen();
}

function enteredFullscreenOnRoot() {
  checkScrollbars(document.documentElement, true);
  info("Entering fullscreen on div");
  addFullscreenChangeContinuation("enter", enteredFullscreenOnDiv);
  gFullscreenDiv.requestFullscreen();
}

function enteredFullscreenOnDiv() {
  checkScrollbars(gFullscreenDiv, false);
  info("Exiting fullscreen on div");
  addFullscreenChangeContinuation("exit", exitedFullscreenOnDiv);
  document.exitFullscreen();
}

function exitedFullscreenOnDiv() {
  checkScrollbars(document.documentElement, true);
  info("Exiting fullscreen on root");
  addFullscreenChangeContinuation("exit", exitedFullscreenOnRoot);
  document.exitFullscreen();
}

function exitedFullscreenOnRoot() {
  opener.nextTest();
}

</script>
</body>
</html>
