1 files changed, 107 insertions, 0 deletions
diff --git a/dom/base/test/fullscreen/file_fullscreen-backdrop.html b/dom/base/test/fullscreen/file_fullscreen-backdrop.html
new file mode 100644
index 0000000000..27be77a6d1
--- /dev/null
+++ b/dom/base/test/fullscreen/file_fullscreen-backdrop.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Test for Bug 1064843</title>
+  <style id="style"></style>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <script type="text/javascript" src="file_fullscreen-utils.js"></script>
+  <style>
+    html {
+      overflow: hidden;
+    }
+    #placeholder {
+      height: 1000vh;
+    }
+  </style>
+</head>
+<body>
+<div id="fullscreen"></div>
+<div id="placeholder"></div>
+<script>
+
+const gStyle = document.getElementById("style");
+const gFullscreen = document.getElementById("fullscreen");
+
+function is(a, b, msg) {
+  opener.is(a, b, "[backdrop] " + msg);
+}
+
+function isnot(a, b, msg) {
+  opener.isnot(a, b, "[backdrop] " + msg);
+}
+
+function ok(cond, msg) {
+  opener.ok(cond, "[backdrop] " + msg);
+}
+
+function info(msg) {
+  opener.info("[backdrop] " + msg);
+}
+
+function synthesizeMouseAtWindowCenter() {
+  synthesizeMouseAtPoint(innerWidth / 2, innerHeight / 2, {});
+}
+
+const gFullscreenElementBackground = getComputedStyle(gFullscreen).background;
+
+function begin() {
+  info("The default background of window should be white");
+  assertWindowPureColor(window, "white");
+  addFullscreenChangeContinuation("enter", enterFullscreen);
+  gFullscreen.requestFullscreen();
+}
+
+function setBackdropStyle(style) {
+  gStyle.textContent = `#fullscreen::backdrop { ${style} }`;
+}
+
+function enterFullscreen() {
+  is(getComputedStyle(gFullscreen).background, gFullscreenElementBackground,
+     "Computed background of #fullscreen shouldn't be changed");
+
+  info("The default background of backdrop for fullscreen is black");
+  assertWindowPureColor(window, "black");
+
+  setBackdropStyle("background: green");
+  info("The background color of backdrop should be changed to green");
+  assertWindowPureColor(window, "green");
+
+  gFullscreen.style.background = "blue";
+  info("The blue fullscreen element should cover the backdrop");
+  assertWindowPureColor(window, "blue");
+
+  gFullscreen.style.background = "";
+  setBackdropStyle("display: none");
+  info("The white body should be shown when the backdrop is hidden");
+  assertWindowPureColor(window, "white");
+
+  setBackdropStyle("");
+  info("Content should return to black because we restore the backdrop");
+  assertWindowPureColor(window, "black");
+
+  gFullscreen.style.display = "none";
+  info("The backdrop should disappear with the fullscreen element");
+  assertWindowPureColor(window, "white");
+
+  gFullscreen.style.display = "";
+  setBackdropStyle("position: absolute");
+  info("Changing position shouldn't immediately affect the view");
+  assertWindowPureColor(window, "black");
+
+  window.scroll(0, screen.height);
+  info("Scrolled up the absolutely-positioned element");
+  assertWindowPureColor(window, "white");
+
+  addFullscreenChangeContinuation("exit", exitFullscreen);
+  document.exitFullscreen();
+}
+
+function exitFullscreen() {
+  opener.nextTest();
+}
+</script>
+</body>
+</html>