全画面 API

fully exit fullscreen を document document に対して実行するには、次の手順を実行する:

1. document の fullscreen element が null なら、これ以降の手順を終了する。

2. document の top layer 内で、fullscreen flag が設定されている fullscreen element 以外の要素について Unfullscreen elements を実行する。

3. Exit fullscreen document.

removing steps が removedNode で実行されるときは、次の手順を実行する:

1. document に removedNode の node document を設定する。

2. nodes に removedNode の shadow-including inclusive descendants のうち fullscreen flag が設定されているものを shadow-including tree order で取得する。

3. 各 node について、次のとおり:

   1. node が document の fullscreen element なら、 exit fullscreen document を実行する。

   2. それ以外の場合は、node の fullscreen を解除する。

   3. document の top layer が node を 含む場合、 remove from the top layer immediately に node を渡して実行する。

      他の仕様でも top layer に要素を追加・削除できるため、 node が document の fullscreen element でない場合もあります。 例えば node が開いている dialog 要素である場合などです。

run the fullscreen steps を document document に対して実行するには、次の手順を実行する:

1. pendingEvents に document の list of pending fullscreen events を設定する。

2. document の list of pending fullscreen events を空にする。

3. 各 (type, element) について、pendingEvents の中で:

   1. element が connected かつ、 その node document が document なら target に element を設定し、そうでなければ target に document を設定する。

   2. Fire an event という名前で type、 bubbles と composed 属性を true にして target でイベントを発火する。

これらの手順は HTML で定義されている event loop と統合されています。[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 の node document を設定する。

2. promise に新しい promise を作成する。

3. pendingDoc が fully active でない場合、promise を TypeError 例外で reject し、promise を返す。

4. error に false を設定する。

5. 次のいずれかの条件が false の場合、error を true にする:

   • this の namespace が HTML namespace であるか、 this が SVG svg または MathML math 要素である。[SVG] [MATHML]

   • this が dialog 要素でない。

   • fullscreen element ready check が this に対して true を返す。

   • 全画面表示がサポートされている。

   • this の relevant global object が transient activation を持つか、または アルゴリズムが ユーザー生成の向き変更によって起動された場合。

6. error が false の場合、consume user activation を pendingDoc の relevant global object で実行する。

7. promise を返し、残りの手順を 並列で実行する。

8. error が false の場合、pendingDoc の node navigable の top-level traversable の active document のビューポートサイズを options["navigationUI"] を考慮して変更する（任意）:

   値	ビューポートサイズ
   "hide"	出力デバイス画面の全サイズ
   "show"	ユーザーエージェントがページナビゲーションコントロールを表示できるように制限された出力デバイス画面のサイズ
   "auto"	上記いずれかに一致するユーザーエージェント定義

   必要に応じて、ユーザーがこれを元に戻す方法を知らせるメッセージを表示することができます。

9. 次のいずれかの条件が false の場合、error を true にする:

   • this の node document が pendingDoc である。

   • fullscreen element ready check が this で true を返す。

10. error が true の場合:

    1. Append (fullscreenerror, this) を pendingDoc の list of pending fullscreen events に追加する。

    2. promise を TypeError 例外で reject し、これ以降の手順を終了する。

11. fullscreenElements に 順序付き集合 を新規作成し、 初期値として this を入れる。

12. while true:

    1. last に fullscreenElements の最後の 要素 を設定する。

    2. container に last の node navigable の container を設定する。

    3. container が null なら break する。

    4. Append で container を fullscreenElements に追加する。

13. 各 element について fullscreenElements の中で:

    1. doc に element の node document を設定する。

    2. element が doc の fullscreen element なら continue する。

       何も変化していない場合はオブザーバに通知する必要はありません。

    3. element が this かつ this が iframe 要素 なら、element の iframe fullscreen flag を設定する。

    4. Fullscreen element を doc で実行する。

    5. Append (fullscreenchange, element) を doc の list of pending fullscreen events に追加する。

    要素が fullscreened される順序は観測できません。run the fullscreen steps が tree order で呼ばれるためです。

14. promise を undefined で解決する。

アウトオブプロセスの navigables を持つ実装は読者への課題として残されています。改善案のフィードバック歓迎です。

fullscreenElement ゲッターの手順は以下の通りです:

1. this が shadow root かつその host が connected でないなら、null を返す。

2. candidate に retargeting を fullscreen element と this で実行した結果を設定する。

3. candidate と this が同じ tree に属しているなら、 candidate を返す。

4. null を返す。

collect documents to unfullscreen を doc に対して実行する手順は以下の通りです:

1. docs に doc を含む 順序付き集合 を作成する。

2. while true:

   1. lastDoc に docs の最後の 文書 を設定する。

   2. 保証: lastDoc の fullscreen element は null ではない。

   3. lastDoc が 単純な全画面文書でない場合、 break する。

   4. container に lastDoc の node navigable の container を設定する。

   5. container が null の場合、break する。

   6. container の iframe fullscreen flag が設定されている場合、 break する。

   7. Append で container の node document を docs に追加する。

3. docs を返す。

   これは fullscreen element の fullscreen解除を行う文書集合ですが、 docs の最後の文書には 要素 が top layer に複数 fullscreen flag が設定されている場合があり、 その場合その文書は引き続き全画面状態となります。

exit fullscreen を 文書 doc に対して実行する手順は以下の通りです:

1. promise に新しい promise を作成する。

2. doc が fully active でない、または doc の fullscreen element が null の場合、promise を TypeError 例外で reject し、promise を返す。

3. resize に false を設定する。

4. docs に collect documents to unfullscreen を doc に対して実行した結果を設定する。

5. topLevelDoc に doc の node navigable の top-level traversable の active document を設定する。

6. topLevelDoc が docs に含まれていて、かつ 単純な全画面文書の場合、 doc に topLevelDoc を設定し、 resize を true にする。

7. doc の fullscreen element が connectedでない場合:

   1. Append (fullscreenchange, doc の fullscreen element) を doc の list of pending fullscreen events に追加する。

   2. fullscreen解除 を doc の fullscreen element に対して実行する。

8. promise を返し、残りの手順を 並列で実行する。

9. 画面の向きを完全に解除する手順 を doc で実行する。

10. resize が true の場合、doc のビューポートを「通常」のサイズに変更する。

11. doc の fullscreen element が null なら、 promise を undefined で解決し、これ以降の手順を終了する。

12. exitDocs に collect documents to unfullscreen を doc に対して実行した結果を設定する。

13. descendantDocs に doc の descendant navigables の active document のうち fullscreen element が null でないものを tree order で順序付き集合として取得する。

14. 各 exitDoc について exitDocs の中で:

    1. Append (fullscreenchange, exitDoc の fullscreen element) を exitDoc の list of pending fullscreen events に追加する。

    2. resize が true の場合、exitDoc の fullscreen を解除する。

    3. それ以外の場合、fullscreen解除 を exitDoc の fullscreen element に対して実行する。

15. 各 descendantDoc について descendantDocs の中で:

    1. Append (fullscreenchange, descendantDoc の fullscreen element) を descendantDoc の list of pending fullscreen events に追加する。

    2. descendantDoc の fullscreen を解除する。

    文書が fullscreen解除 される順序は観測できません。 run the fullscreen steps が tree order で呼ばれるためです。

16. promise を 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;
}