全屏 API

要完全退出全屏给定 文档 document，运行以下步骤：

1. 如果 document 的 全屏元素 为 null，则终止这些步骤。

2. 取消全屏显示元素，这些元素的全屏标志已设置，在 document 的顶层中，但不包括 document 的 全屏元素。

3. 退出全屏document。

每当运行 移除步骤时，给定一个 removedNode，运行以下步骤：

1. 将 document 设为 removedNode 的 节点文档。

2. 将 nodes 设为 removedNode 的 包括阴影在内的包含后代，其全屏标志已设置，按包括阴影在内的树顺序排列。

3. 遍历nodes中的每个node：

   1. 如果 node 是 document 的全屏元素，退出全屏 document。

   2. 否则，取消全屏显示node。

   3. 如果 document 的 顶层 包含 node，立即从顶层移除给定 node。

      其他规范可以在顶层中添加和移除元素，因此 node 可能不是 document 的全屏元素。例如，node 可能是一个打开的对话框元素。

要运行全屏步骤给定 文档document，运行这些步骤：

1. 将 pendingEvents 设为 document 的 待处理全屏事件列表。

2. 清空 document 的 待处理全屏事件列表。

3. 遍历 pendingEvents 中的每个 (type, element)：

   1. 将 target 设为 element，如果 element 是已连接并且其节点文档是 document，否则将 target 设为 document。

   2. 触发一个事件，名为 type，其bubbles和composed属性设置为 true， 在 target 上。

这些步骤与 HTML 中定义的事件循环集成。[HTML]

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

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

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

  attribute EventHandler onfullscreenchange;
  attribute EventHandler onfullscreenerror;
};

partial interface Document {
  [LegacyLenientSetter] readonly attribute boolean fullscreenEnabled;
  [LegacyLenientSetter, Unscopable] readonly attribute boolean fullscreen; // historical

  Promise<undefined> exitFullscreen();

  attribute EventHandler onfullscreenchange;
  attribute EventHandler onfullscreenerror;
};

partial interface mixin DocumentOrShadowRoot {
  [LegacyLenientSetter] readonly attribute Element? fullscreenElement;
};

requestFullscreen(options)方法的步骤如下：

1. 将 pendingDoc 设为this的节点文档。

2. 将 promise 设为一个新的 promise。

3. 如果 pendingDoc 不是完全活动的，则使用 TypeError 异常拒绝 promise，并返回 promise。

4. 将 error 设为 false。

5. 如果以下任一条件为 false，则将 error 设置为 true：

   • this 的命名空间是HTML 命名空间，或者this 是一个SVG svg 或 MathML math 元素。[SVG] [MATHML]

   • this 不是 对话框 元素。

   • 全屏元素就绪检查对于this返回 true。

   • 支持全屏。

   • this的相关全局对象具有瞬时激活，或者该算法是由用户生成的方向更改触发。

6. 如果 error 为 false，则消耗用户激活，给定 pendingDoc 的相关全局对象。

7. 返回 promise，并运行剩余步骤并行。

8. 如果 error 为 false，则调整 pendingDoc 的节点可导航的顶级可遍历对象的活动文档的视口尺寸，可选择考虑 options["navigationUI"]：

   值	视口尺寸
   "hide"	输出设备屏幕的完整尺寸
   "show"	限制为允许用户代理显示页面导航控件的输出设备屏幕尺寸
   "auto"	用户代理定义，但匹配上述之一

   可选择显示一条消息，说明最终用户如何还原此操作。

9. 如果以下任一条件为 false，则将 error 设置为 true：

   • this 的节点文档是 pendingDoc。

   • 全屏元素就绪检查对于this返回 true。

10. 如果 error 为 true：

    1. 追加 (fullscreenerror, this) 到 pendingDoc 的待处理全屏事件列表中。

    2. 使用 TypeError 异常拒绝 promise，并终止这些步骤。

11. 将 fullscreenElements 设为一个有序集合，最初由this组成。

12. 当条件为 true 时：

    1. 将 last 设为 fullscreenElements 的最后一个项。

    2. 将 container 设为 last 的节点可导航的容器。

    3. 如果 container 为 null，则中断。

    4. 追加 container 到 fullscreenElements。

13. 遍历 fullscreenElements 中的每个 element：

    1. 将 doc 设为 element 的节点文档。

    2. 如果 element 是 doc 的全屏元素，则继续。

       当没有发生任何变化时，无需通知观察者。

    3. 如果 element 是this，并且this 是一个 iframe 元素，则设置 element 的iframe 全屏标志。

    4. 全屏显示 element 在 doc 中。

    5. 追加 (fullscreenchange, element) 到 doc 的待处理全屏事件列表。

    元素全屏显示的顺序是不可观察的，因为运行全屏步骤在树顺序中被调用。

14. 使用 undefined 解析 promise。

具有跨进程可导航对象的实现留给读者练习。欢迎对潜在改进提出意见。

fullscreenElement getter 步骤如下：

1. 如果this是阴影根，并且其宿主未连接，则返回 null。

2. 将 candidate 设为重新目标化的结果全屏元素针对this。

3. 如果 candidate 和 this在同一树中，则返回 candidate。

4. 返回 null。

要收集要退出全屏的文档，给定doc，请运行以下步骤：

1. 将 docs 设为一个有序集合，由 doc 组成。

2. 当 条件为 true 时：

   1. 将 lastDoc 设为 docs 的最后一个文档。

   2. 断言：lastDoc 的 全屏元素 不为 null。

   3. 如果 lastDoc 不是 简单全屏文档，则中断。

   4. 将 container 设为 lastDoc 的节点可导航的容器。

   5. 如果 container 为 null，则中断。

   6. 如果 container 的 iframe 全屏标志 被设置，中断。

   7. 追加 container 的节点文档 到 docs。

3. 返回 docs。

   这是全屏元素将被退出全屏的一组文档，但 docs 中的最后一个文档可能有多个元素在其顶层中设置了 全屏标志，这种情况下该文档仍将保持全屏状态。

要退出全屏，给定文档 doc，请运行以下步骤：

1. 将 promise 设为一个新的 promise。

2. 如果 doc 不是完全活动的或 doc 的全屏元素 为 null，则使用 TypeError异常拒绝 promise，并返回 promise。

3. 将 resize 设为 false。

4. 将 docs 设为收集要退出全屏的文档的结果，给定 doc。

5. 将 topLevelDoc 设为 doc 的节点可导航的顶级可遍历对象的活动文档。

6. 如果 topLevelDoc 在 docs 中，并且它是一个 简单全屏文档，则将 doc 设置为 topLevelDoc 并将 resize 设置为 true。

7. 如果 doc 的全屏元素未连接：

   1. 追加 (fullscreenchange，doc 的 全屏元素) 到 doc 的待处理全屏事件列表中。

8. 返回 promise，并运行剩余步骤并行。

9. 运行完全解锁屏幕方向的步骤，给定 doc。

10. 如果 resize 为 true，则调整 doc 的视口到其“正常”尺寸。

11. 如果 doc 的全屏元素为 null，则使用 undefined 解析 promise 并终止这些步骤。

12. 将 exitDocs 设为收集要退出全屏的文档的结果，给定 doc。

13. 将 descendantDocs 设为一个有序集合，由 doc 的后代可导航对象的活动文档的全屏元素非 null（如果有）组成，按树顺序。

14. 遍历 exitDoc 中的每个 exitDoc：

    1. 追加 (fullscreenchange，exitDoc 的 全屏元素) 到 exitDoc 的待处理全屏事件列表中。

    2. 如果 resize 为 true，则退出全屏 exitDoc。

    3. 否则，退出全屏 exitDoc 的全屏元素。

15. 遍历 descendantDoc 中的每个 descendantDoc：

    1. 追加 (fullscreenchange，descendantDoc 的 全屏元素) 到 descendantDoc 的待处理全屏事件列表中。

    2. 退出全屏 descendantDoc。

    文档退出全屏的顺序是不可观察的，因为运行全屏步骤在树顺序中被调用。

16. 使用 undefined 解析 promise。

@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;
}