전체 화면 API

document의 전체 화면을 완전히 종료하기 알고리즘은 다음과 같습니다:

1. document의 fullscreen element가 null이면, 알고리즘을 종료합니다.

2. 전체 화면 해제 알고리즘을 fullscreen flag가 설정된 요소 각각에 대해 실행합니다. 단, document의 fullscreen element는 제외합니다.

3. 전체 화면 종료 알고리즘을 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인 경우, 전체 화면 종료 알고리즘을 document에 대해 실행합니다.

   2. 그 외의 경우, node의 전체 화면 해제 알고리즘을 실행합니다.

   3. document의 top layer가 node를 포함하고 있다면, 즉시 top layer에서 제거 알고리즘을 node에 대해 실행합니다.

      다른 명세서에서도 top layer에서 요소를 추가/제거할 수 있으므로, node가 document의 fullscreen element가 아닐 수 있습니다. 예를 들어, node가 열린 dialog 요소일 수 있습니다.

전체 화면 단계 실행하기 알고리즘을 document document에 대해 실행하려면 다음을 수행합니다:

1. pendingEvents를 document의 pending fullscreen 이벤트 목록으로 설정합니다.

2. 비우기 알고리즘을 document의 pending fullscreen 이벤트 목록에 대해 실행합니다.

3. 각각의 (type, element) 튜플에 대해 다음을 수행합니다:

   1. element가 connected 상태이고, node document가 document인 경우 target을 element로, 그렇지 않으면 target을 document로 설정합니다.

   2. 이벤트 발생 알고리즘을 type 이름으로, bubbles 및 composed 속성 값을 true로 하여 target에서 실행합니다.

이 단계들은 HTML에서 정의된 이벤트 루프와 통합됩니다. [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를 새 프로미스로 생성합니다.

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 준비 확인 알고리즘을 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의 viewport 크기를 재설정합니다. 이때 options["navigationUI"] 값을 반영할 수 있습니다:

   값	viewport 크기
   "hide"	출력 장치의 화면 전체 크기
   "show"	출력 장치의 화면 크기를 페이지 네비게이션 컨트롤이 표시될 수 있도록 제한
   "auto"	사용자 에이전트가 정의하지만, 위 둘 중 하나와 일치함

   사용자가 전체 화면을 해제하는 방법에 대한 메시지를 선택적으로 표시할 수 있습니다.

9. 다음 조건 중 하나라도 false이면 error를 true로 설정합니다:

   • This의 node document가 pendingDoc과 동일함.

   • fullscreen element 준비 확인 알고리즘을 this에 적용한 결과가 true임.

10. error가 true이면:

    1. Append (fullscreenerror, this)를 pendingDoc의 pending fullscreen 이벤트 목록에 추가합니다.

    2. promise를 TypeError 예외로 reject하고, 이 단계들을 종료합니다.

11. fullscreenElements를 순서가 지정된 집합으로 생성하고, 초기값은 this 하나만 포함합니다.

12. 다음 반복을 수행합니다:

    1. last를 fullscreenElements의 마지막 item으로 설정합니다.

    2. container를 last의 node navigable의 container로 설정합니다.

    3. container가 null이면 break합니다.

    4. Append container를 fullscreenElements에 추가합니다.

13. fullscreenElements 내의 각 element에 대해 반복한다:

    1. doc을 element의 node document로 둔다.

    2. element가 doc의 fullscreen element이면, continue.

       아무것도 변경되지 않았을 때는 observer에게 알릴 필요가 없다.

    3. element가 this이고, this가 iframe 요소이면, element의 iframe fullscreen flag를 설정한다.

    4. doc 내에서 element를 전체 화면으로 만든다.

    5. (fullscreenchange, element)를 doc의 pending fullscreen event 리스트에 추가한다.

    요소들이 전체 화면 처리되는 순서는 관찰 가능하지 않다. 왜냐하면 fullscreen 단계를 실행하는 것이 tree order로 호출되기 때문이다.

14. options["keyboardLock"]의 값에 따라:

    "browser"

    this의 keyboard lock flag를 설정한다.

    "none"

    this의 keyboard lock flag를 unset한다.

15. promise를 undefined로 resolve한다.

프로세스 분리된 navigable 구현은 독자에게 맡깁니다. 개선 제안 환영합니다.

fullscreenElement getter 단계는 다음과 같다:

1. this가 shadow root이고, 그 host가 connected가 아니면 null을 반환한다.

2. candidate를 fullscreen element를 this에 대해 retargeting한 결과로 둔다.

3. candidate와 this가 같은 tree 안에 있으면 candidate를 반환한다.

4. null을 반환한다.

doc이 주어졌을 때 전체 화면 해제할 문서를 수집하려면, 다음 단계를 실행한다:

1. docs를 doc으로 구성된 ordered set으로 둔다.

2. true인 동안 반복한다:

   1. lastDoc을 docs의 마지막 문서로 둔다.

   2. 단언: lastDoc의 fullscreen element는 null이 아니다.

   3. lastDoc이 simple fullscreen document가 아니면, break.

   4. container를 lastDoc의 node navigable의 container로 둔다.

   5. container가 null이면 break.

   6. container의 iframe fullscreen flag가 설정되어 있으면, break.

   7. container의 node document를 docs에 추가한다.

3. docs를 반환한다.

   이는 fullscreen element가 전체 화면 해제될 문서들의 set이다. 하지만 docs 안의 마지막 문서는 자신의 top layer 안에 fullscreen flag가 설정된 요소가 둘 이상 있을 수 있으며, 이 경우 그 문서는 여전히 fullscreen 상태로 남는다.

문서 doc의 fullscreen을 종료하려면, 다음 단계를 실행한다:

1. promise를 새 promise로 둔다.

2. doc이 fully active가 아니거나 doc의 fullscreen element가 null이면, promise를 TypeError 예외로 reject하고 promise를 반환한다.

3. resize를 false로 둔다.

4. docs를 주어진 doc에 대해 전체 화면 해제할 문서들을 수집한 결과로 둔다.

5. topLevelDoc을 doc의 node navigable의 top-level traversable의 active document로 둔다.

6. topLevelDoc이 docs 안에 있고, 그것이 simple fullscreen document이면, doc을 topLevelDoc으로 설정하고 resize를 true로 설정한다.

7. doc의 fullscreen element가 connected가 아니면:

   1. (fullscreenchange, doc의 fullscreen element)를 doc의 pending fullscreen event 리스트에 추가한다.

   2. doc의 fullscreen element를 전체 화면 해제한다.

8. promise를 반환하고, 나머지 단계를 병렬로 실행한다.

9. doc으로 screen orientation을 완전히 unlock하는 단계를 실행한다.

10. resize가 true이면, doc의 viewport를 그 "normal" 크기로 resize한다.

11. doc의 fullscreen element가 null이면, promise를 undefined로 resolve하고 이 단계를 종료한다.

12. exitDocs를 주어진 doc에 대해 전체 화면 해제할 문서들을 수집한 결과로 둔다.

13. descendantDocs를, 존재한다면 fullscreen element가 null이 아닌 doc의 descendant navigables의 active documents로 구성된, tree order의 ordered set으로 둔다.

14. exitDocs 내의 각 exitDoc에 대해 반복한다:

    1. (fullscreenchange, exitDoc의 fullscreen element)를 exitDoc의 pending fullscreen event 리스트에 추가한다.

    2. resize가 true이면, exitDoc를 전체 화면 해제한다.

    3. 그렇지 않으면, exitDoc의 fullscreen element를 전체 화면 해제한다.

15. descendantDocs 내의 각 descendantDoc에 대해 반복한다:

    1. (fullscreenchange, descendantDoc의 fullscreen element)를 descendantDoc의 pending fullscreen event 리스트에 추가한다.

    2. descendantDoc를 전체 화면 해제한다.

    문서들이 전체 화면 해제되는 순서는 관찰 가능하지 않다. 왜냐하면 fullscreen 단계를 실행하는 것이 tree order로 호출되기 때문이다.

16. promise를 undefined로 resolve한다.

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