전체 화면 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"
};

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를 새 프로미스로 생성합니다.

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. 각각의 element에 대해 fullscreenElements에서 다음을 수행합니다:

    1. doc를 element의 node document로 설정합니다.

    2. element가 doc의 fullscreen element이면 continue합니다.

       변경 사항이 없을 때는 옵저버에게 알릴 필요가 없습니다.

    3. element가 this이고, this가 iframe 요소인 경우, element의 iframe fullscreen flag를 설정합니다.

    4. 전체 화면 element 알고리즘을 doc에서 실행합니다.

    5. Append (fullscreenchange, element)를 doc의 pending fullscreen 이벤트 목록에 추가합니다.

    요소들이 전체 화면 처리되는 순서는 관찰할 수 없습니다. 전체 화면 단계 실행하기 알고리즘이 트리 순서로 호출되기 때문입니다.

14. promise를 undefined로 resolve합니다.

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

fullscreenElement getter 단계는 다음과 같습니다:

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

2. candidate를 fullscreen element를 this에 대해 retargeting한 결과로 설정합니다.

3. candidate와 this가 동일한 트리에 있으면 candidate를 반환합니다.

4. null을 반환합니다.

collect documents to unfullscreen 알고리즘은 doc을 받아 다음 단계로 진행합니다:

1. docs를 순서가 지정된 집합으로 생성하고, doc만 포함합니다.

2. While true:

   1. lastDoc를 docs의 마지막 문서로 설정합니다.

   2. Assert: 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. Append container의 node document를 docs에 추가합니다.

3. docs를 반환합니다.

   이 집합은 fullscreen element의 전체 화면 해제가 실행될 문서 집합입니다. 단, docs의 마지막 문서에 top layer에 fullscreen flag가 설정된 요소가 두 개 이상 있을 경우, 그 문서는 여전히 전체 화면 상태를 유지할 수 있습니다.

exit fullscreen 알고리즘은 문서 doc에 대해 다음 단계를 수행합니다:

1. promise를 새 프로미스로 생성합니다.

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

3. resize를 false로 설정합니다.

4. docs를 collect documents to unfullscreen 알고리즘을 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. Append (fullscreenchange, doc의 fullscreen element)를 doc의 pending fullscreen 이벤트 목록에 추가합니다.

   2. 전체 화면 해제 알고리즘을 doc의 fullscreen element에 대해 실행합니다.

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

9. 화면 방향 완전 해제 단계 알고리즘을 doc에 대해 실행합니다.

10. resize가 true이면, doc의 viewport를 "normal" 크기로 재설정합니다.

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

12. exitDocs를 collect documents to unfullscreen 알고리즘을 doc에 대해 실행한 결과로 설정합니다.

13. descendantDocs를 순서가 지정된 집합으로 생성하고, doc의 descendant navigables의 active documents 중 fullscreen element가 null이 아닌 문서를 트리 순서대로 포함합니다.

14. 각각의 exitDoc에 대해 exitDocs에서 다음을 수행합니다:

    1. Append (fullscreenchange, exitDoc의 fullscreen element)를 exitDoc의 pending fullscreen 이벤트 목록에 추가합니다.

    2. resize가 true이면, 전체 화면 해제 알고리즘을 exitDoc에 대해 실행합니다.

    3. 그 외에는 전체 화면 해제 알고리즘을 exitDoc의 fullscreen element에 대해 실행합니다.

15. 각각의 descendantDoc에 대해 descendantDocs에서 다음을 수행합니다:

    1. Append (fullscreenchange, descendantDoc의 fullscreen element)를 descendantDoc의 pending fullscreen 이벤트 목록에 추가합니다.

    2. 전체 화면 해제 알고리즘을 descendantDoc에 대해 실행합니다.

    문서들이 전체 화면 해제되는 순서는 관찰할 수 없습니다. 전체 화면 단계 실행하기 알고리즘이 트리 순서로 호출되기 때문입니다.

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