1 files changed, 187 insertions, 0 deletions
diff --git a/dom/base/test/fullscreen/file_fullscreen-selector.html b/dom/base/test/fullscreen/file_fullscreen-selector.html
new file mode 100644
index 0000000000..522f06f6fd
--- /dev/null
+++ b/dom/base/test/fullscreen/file_fullscreen-selector.html
@@ -0,0 +1,187 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for Bug 1199522</title>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="file_fullscreen-utils.js"></script>
+  <style>
+    div {
+      position: fixed;
+      top: 20px; height: 50px;
+      opacity: 0.3;
+      border: 5px solid black;
+      box-sizing: border-box;
+    }
+    #fullscreen0 {
+      left: 50px; width: 50px;
+      background: #ff0000;
+      border-color: #800000;
+    }
+    #fullscreen1 {
+      left: 100px; width: 50px;
+      background: #00ff00;
+      border-color: #008000;
+    }
+    #fullscreen2 {
+      left: 150px; width: 50px;
+      background: #0000ff;
+      border-color: #000080;
+    }
+  </style>
+</head>
+<body>
+<script type="application/javascript">
+
+/** Test for Bug 1199522 **/
+
+function info(msg) {
+  opener.info("[selector] " + msg);
+}
+
+function ok(condition, msg) {
+  opener.ok(condition, "[selector] " + msg);
+}
+
+function is(a, b, msg) {
+  opener.is(a, b, "[selector] " + msg);
+}
+
+function rectEquals(rect1, rect2) {
+  return rect1.x == rect2.x && rect1.y == rect2.y &&
+    rect1.width == rect2.width && rect1.height == rect2.height;
+}
+
+function getViewportRect() {
+  return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+}
+
+var fullscreenElems = [];
+
+function checkFullscreenState(elem, hasState, viewportRect) {
+  var id = elem.id;
+  var rect = elem.getBoundingClientRect();
+  if (hasState) {
+    ok(elem.matches(":fullscreen"),
+       `${id} should match selector ":fullscreen"`);
+    ok(rectEquals(rect, viewportRect),
+       `The bounding rect of ${id} should match the viewport`);
+  } else {
+    ok(!elem.matches(":fullscreen"),
+       `${id} should not match selector ":fullscreen"`);
+    // Position might vary because if one of our ancestors is fullscreen it
+    // contains us.
+    is(rect.width, elem.initialRect.width,
+       `The width of ${id} should match its initial state`);
+    is(rect.height, elem.initialRect.height,
+       `The height of ${id} should match its initial state`);
+  }
+}
+
+function checkFullscreenStates(states) {
+  var viewportRect = getViewportRect();
+  fullscreenElems.forEach((elem, index) => {
+    checkFullscreenState(elem, states[index], viewportRect);
+  });
+}
+
+function begin() {
+  fullscreenElems.push(document.getElementById('fullscreen0'));
+  fullscreenElems.push(document.getElementById('fullscreen1'));
+  fullscreenElems.push(document.getElementById('fullscreen2'));
+
+  var viewportRect = getViewportRect();
+  for (var elem of fullscreenElems) {
+    var rect = elem.getBoundingClientRect();
+    var id = elem.id;
+    elem.initialRect = rect;
+    ok(!elem.matches(":fullscreen"),
+       `${id} should not match selector ":fullscreen"`);
+    ok(!rectEquals(elem.initialRect, viewportRect),
+       `The initial bounding rect of ${id} should not match the viewport`);
+  }
+
+  info("Entering fullscreen on fullscreen0");
+  addFullscreenChangeContinuation("enter", enter0);
+  fullscreenElems[0].requestFullscreen();
+}
+
+function enter0() {
+  checkFullscreenStates([true, false, false]);
+  info("Entering fullscreen on fullscreen1");
+  addFullscreenChangeContinuation("enter", enter1);
+  fullscreenElems[1].requestFullscreen();
+}
+
+function enter1() {
+  checkFullscreenStates([true, true, false]);
+  info("Entering fullscreen on fullscreen2");
+  addFullscreenChangeContinuation("enter", enter2);
+  fullscreenElems[2].requestFullscreen();
+}
+
+function enter2() {
+  checkFullscreenStates([true, true, true]);
+  info("Leaving fullscreen on fullscreen2");
+  addFullscreenChangeContinuation("exit", exit2);
+  document.exitFullscreen();
+}
+
+function exit2() {
+  checkFullscreenStates([true, true, false]);
+  info("Leaving fullscreen on fullscreen1");
+  addFullscreenChangeContinuation("exit", exit1);
+  document.exitFullscreen();
+}
+
+function exit1() {
+  checkFullscreenStates([true, false, false]);
+  info("Leaving fullscreen on fullscreen0");
+  addFullscreenChangeContinuation("exit", exit0);
+  document.exitFullscreen();
+}
+
+function exit0() {
+  checkFullscreenStates([false, false, false]);
+
+  info("Entering fullscreen on all elements");
+  var count = 0;
+  function listener() {
+    if (++count == 3) {
+      document.removeEventListener("fullscreenchange", listener);
+      // We bypassed our fullscreenchangeenters count since we didn't
+      // do our requests with a addFullscreenChangeContinuation, so we
+      // fix up the expected value now that we're done with this part
+      // of the test.
+      setFullscreenChangeEnters(1);
+      enterAll();
+    }
+  }
+  document.addEventListener("fullscreenchange", listener);
+  fullscreenElems[0].requestFullscreen();
+  fullscreenElems[1].requestFullscreen();
+  fullscreenElems[2].requestFullscreen();
+}
+
+function enterAll() {
+  checkFullscreenStates([true, true, true]);
+  info("Fully-exiting fullscreen");
+  addFullscreenChangeContinuation("exit", exitAll);
+  synthesizeKey("KEY_Escape");
+}
+
+function exitAll() {
+  checkFullscreenStates([false, false, false]);
+  opener.nextTest();
+}
+
+</script>
+</pre>
+<div id="fullscreen0">
+  <div id="fullscreen1">
+    <div id="fullscreen2">
+    </div>
+  </div>
+</div>
+</body>
+</html>