Fullscreen API

Whenever the removing steps run with a removedNode, run these steps:

1. Let document be removedNode’s node document.

2. Let nodes be removedNode’s shadow-including tree order.

3. For each node in nodes:

   1. If node is document’s fullscreen element, exit fullscreen document.

   2. Otherwise, unfullscreen node.

   3. If document’s remove from the top layer immediately given node.

      Other specifications can add and remove elements from dialog element.

To run the fullscreen steps for a document document, run these steps:

1. Let pendingEvents be document’s list of pending fullscreen events.

2. Empty document’s list of pending fullscreen events.

3. For each (type, element) in pendingEvents:

   1. Let target be element if element is node document is document, and otherwise let target be document.

   2. composed attributes set to true, at target.

These steps integrate with the event loop defined in HTML. [HTML]

enum FullscreenNavigationUI {
  "auto",
  "show",
  "hide"
};

dictionary FullscreenOptions {
  FullscreenNavigationUI navigationUI = "auto";
};

partial interface Element {
  undefined> requestFullscreen(optional FullscreenOptions options = {});

  attribute EventHandler onfullscreenchange;
  attribute EventHandler onfullscreenerror;
};

partial interface Document {
  [boolean fullscreenEnabled;
  [boolean fullscreen; / historical

  undefined> exitFullscreen();

  attribute EventHandler onfullscreenchange;
  attribute EventHandler onfullscreenerror;
};

partial interface mixin DocumentOrShadowRoot {
  [Element? fullscreenElement;
};

The requestFullscreen(options) method steps are:

1. Let pendingDoc be node document.

2. Let promise be a new promise.

3. If pendingDoc is not TypeError exception and return promise.

4. Let error be false.

5. If any of the following conditions are false, then set error to true:

   • this is an MathML math element. [SVG] [MATHML]

   • dialog element.

   • The fullscreen element ready check for this returns true.

   • Fullscreen is supported.

   • transient activation or the algorithm is triggered by a user generated orientation change.

6. If error is false, then relevant global object.

7. Return promise, and run the remaining steps in parallel.

8. If error is false, then resize pendingDoc’s active document’s viewport’s dimensions, optionally taking into account options["navigationUI"]:

   value	viewport dimensions
   "hide"	full dimensions of the screen of the output device
   "show"	dimensions of the screen of the output device clamped to allow the user agent to show page navigation controls
   "auto"	user-agent defined, but matching one of the above

   Optionally display a message how the end user can revert this.

9. If any of the following conditions are false, then set error to true:

   • node document is pendingDoc.

   • The fullscreen element ready check for this returns true.

10. If error is true:

    1. this) to pendingDoc’s list of pending fullscreen events.

    2. Reject promise with a TypeError exception and terminate these steps.

11. Let fullscreenElements be an this.

12. While true:

    1. Let last be the last item of fullscreenElements.

    2. Let container be last’s container.

    3. If container is null, then break.

    4. Append container to fullscreenElements.

13. For each element in fullscreenElements:

    1. Let doc be element’s node document.

    2. If element is doc’s fullscreen element, continue.

       No need to notify observers when nothing has changed.

    3. If element is element, then set element’s iframe fullscreen flag.

    4. Fullscreen element within doc.

    5. Append (fullscreenchange, element) to doc’s list of pending fullscreen events.

    The order in which elements are fullscreened is not observable, because run the fullscreen steps is invoked in tree order.

14. Resolve promise with undefined.

Implementations with out-of-process navigables are left as an exercise to the reader. Input welcome on potential improvements.

The fullscreenElement getter steps are:

1. If connected, then return null.

2. Let candidate be the result of this.

3. If candidate and tree, then return candidate.

4. Return null.

To collect documents to unfullscreen given doc, run these steps:

1. Let docs be an ordered set consisting of doc.

2. While true:

   1. Let lastDoc be docs’s last document.

   2. Assert: lastDoc’s fullscreen element is not null.

   3. If lastDoc is not a simple fullscreen document, break.

   4. Let container be lastDoc’s container.

   5. If container is null, then break.

   6. If container’s iframe fullscreen flag is set, break.

   7. node document to docs.

3. Return docs.

   This is the set of documents for which the fullscreen element will be unfullscreened, but the last document in docs might have more than one top layer with the fullscreen flag set, in which case that document will still remain in fullscreen.

To exit fullscreen a document doc, run these steps:

1. Let promise be a new promise.

2. If doc is not TypeError exception and return promise.

3. Let resize be false.

4. Let docs be the result of collecting documents to unfullscreen given doc.

5. Let topLevelDoc be doc’s active document.

6. If topLevelDoc is in docs, and it is a simple fullscreen document, then set doc to topLevelDoc and resize to true.

7. If doc’s fullscreen element is not connected:

   1. Append (fullscreenchange, doc’s fullscreen element) to doc’s list of pending fullscreen events.

   2. Unfullscreen doc’s fullscreen element.

8. Return promise, and run the remaining steps in parallel.

9. Run the fully unlock the screen orientation steps with doc.

10. If resize is true, resize doc’s viewport to its "normal" dimensions.

11. If doc’s fullscreen element is null, then resolve promise with undefined and terminate these steps.

12. Let exitDocs be the result of collecting documents to unfullscreen given doc.

13. Let descendantDocs be an tree order.

14. For each exitDoc in exitDocs:

    1. Append (fullscreenchange, exitDoc’s fullscreen element) to exitDoc’s list of pending fullscreen events.

    2. If resize is true, unfullscreen exitDoc.

    3. Otherwise, unfullscreen exitDoc’s fullscreen element.

15. For each descendantDoc in descendantDocs:

    1. Append (fullscreenchange, descendantDoc’s fullscreen element) to descendantDoc’s list of pending fullscreen events.

    2. Unfullscreen descendantDoc.

    The order in which documents are unfullscreened is not observable, because run the fullscreen steps is invoked in tree order.

16. Resolve promise with undefined.

@namespace "http://www.w3.org/1999/xhtml";

*|*:not(:root):fullscreen {
  position:fixed !important;
  inset:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:0 !important;
  max-height:none !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;

  /* intentionally not !important */
  object-fit:contain;
}

iframe:fullscreen {
  border:none !important;
  padding:0 !important;
}

*|*:not(:root):fullscreen::backdrop {
  background:black;
}