Quelle file_fullscreen-scrollbar.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/base/test/fullscreen/file_fullscreen-scrollbar.html

<!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>

Messung V0.5

¤ Dauer der Verarbeitung: 0.21 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.