全画面 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"
};

enum FullscreenKeyboardLock {
  "browser",
  "none"
};

dictionary FullscreenOptions {
  FullscreenKeyboardLock keyboardLock = "none";
  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. fullscreenElements 内の各 element について反復します:

    1. doc を element のノード文書とします。

    2. element が doc のfullscreen 要素である場合、 continue します。

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

    3. element が this であり、かつ this が iframe 要素である場合、element の iframe fullscreen フラグを設定します。

    4. doc 内でelement を fullscreen にします。

    5. (fullscreenchange, element) を doc の保留中の fullscreen イベントのリストに追加します。

    要素がfullscreen にされる 順序は観測できません。なぜなら、fullscreen 手順を実行するがツリー順で呼び出されるためです。

14. options["keyboardLock"] の値に応じて:

    "browser"

    this のキーボードロックフラグを設定します。

    "none"

    this のキーボードロックフラグを解除します。

15. promise を undefined で解決します。

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

fullscreenElement の getter 手順は次のとおりです:

1. this がシャドウルートであり、そのホストが 接続されていない場合、null を返します。

2. candidate を、fullscreen 要素を this に対してリターゲットした結果とします。

3. candidate と this が同じツリー内にある場合、 candidate を返します。

4. null を返します。

doc が与えられたとき、fullscreen を解除する文書を収集するには、 次の手順を実行します:

1. docs を、doc からなる順序付き集合 とします。

2. true の間反復します:

   1. lastDoc を docs の最後の文書とします。

   2. 表明: lastDoc のfullscreen 要素は null ではありません。

   3. lastDoc が単純 fullscreen 文書でない場合、break します。

   4. container を lastDoc のノード navigable の コンテナとします。

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

   6. container のiframe fullscreen フラグが設定されている場合、break します。

   7. container のノード文書を docs に追加します。

3. docs を返します。

   これは、fullscreen 要素が fullscreen 解除される文書の集合ですが、 docs 内の最後の文書は、そのtop layer内に fullscreen フラグが設定された 要素を複数持つ場合があり、 その場合、その文書は fullscreen のままになります。

文書 doc の fullscreen を終了するには、 次の手順を実行します:

1. promise を新しい promise とします。

2. doc が完全にアクティブでない、または doc のfullscreen 要素 が null の場合、promise を TypeError 例外で拒否し、 promise を返します。

3. resize を false とします。

4. docs を、 doc が与えられた fullscreen を解除する文書を収集する 結果とします。

5. topLevelDoc を doc のノード navigable の トップレベル traversable のアクティブ文書とします。

6. topLevelDoc が docs 内にあり、かつそれが 単純 fullscreen 文書である場合、 doc を topLevelDoc に設定し、 resize を true に設定します。

7. doc のfullscreen 要素が接続されていない場合:

   1. (fullscreenchange, doc のfullscreen 要素) を doc の保留中の fullscreen イベントのリストに追加します。

   2. doc のfullscreen 要素をfullscreen 解除します。

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

9. doc で画面の向きの完全ロック解除手順を実行します。

10. resize が true の場合、doc のビューポートをその "normal" 寸法にリサイズします。

11. doc のfullscreen 要素が null の場合、promise を undefined で解決し、これらの手順を終了します。

12. exitDocs を、 doc が与えられた fullscreen を解除する文書を収集する 結果とします。

13. descendantDocs を、doc の 子孫 navigable のアクティブ文書のうち、 fullscreen 要素が非 null のもの（もしあれば）からなる、 ツリー 順の順序付き集合 とします。

14. exitDocs 内の各 exitDoc について反復します:

    1. (fullscreenchange, exitDoc の fullscreen 要素) を exitDoc の保留中の fullscreen イベントのリストに追加します。

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

    3. そうでない場合、exitDoc の fullscreen 要素をfullscreen 解除します。

15. descendantDocs 内の各 descendantDoc について反復します:

    1. (fullscreenchange, descendantDoc の fullscreen 要素) を descendantDoc の 保留中の fullscreen イベントのリストに追加します。

    2. descendantDoc の fullscreen を解除します。

    文書がfullscreen 解除される 順序は観測できません。なぜなら、fullscreen 手順を実行するがツリー順で呼び出されるためです。

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