summaryrefslogtreecommitdiffstats
path: root/dom/base/test/fullscreen/file_fullscreen-backdrop.html
blob: 27be77a6d1dc1070c66b3d6b1b8ca4fb2a2e7766 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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>