CSS 뷰 전환 모듈 레벨 1

1. transition을 this의 관련 Realm에서 새로운 ViewTransition 객체로 만든다.

2. updateCallback이 제공된 경우, transition의 update callback을 updateCallback으로 설정한다.

3. document를 this의 관련 글로벌 객체의 연관된 document로 한다.

4. document의 visibility state가 "hidden"이면, skip transition을 "InvalidStateError" DOMException과 함께, 반환하고 transition을 리턴한다.

5. document의 활성 뷰 전환이 null이 아니라면, 그 뷰 전환을 건너뛴다("AbortError" DOMException this의 관련 Realm에서).

   참고: 이렇게 하면 두 개의 비동기 update callback이 동시에 실행될 수 있습니다 (따라서 순서가 뒤섞일 수도 있음): 하나는 document의 현재 활성 뷰 전환용, 또 하나는 이번 transition용입니다. 이 기능의 설계에 따라, 개발자가 이러한 DOM 변경을 올바르게 스케줄링하기 위해 다른 기능 또는 프레임워크를 사용한다고 가정합니다.

6. document의 활성 뷰 전환을 transition으로 설정한다.

   참고: 뷰 전환 처리는 뷰 전환 설정에서, 보류 중인 전환 작업 수행을 통해 계속됩니다.

7. transition을 반환한다.

1. this의 phase가 "done"이 아니라면, 뷰 전환을 건너뛴다(this에 대해 "AbortError" DOMException과 함께).

보류 중인 전환 작업 수행(perform pending transition operations)을 Document document에 대해 실행할 때, 다음 단계를 수행합니다:

1. document의 active view transition이 null이 아니면:

   1. document의 active view transition의 phase가 "pending-capture"라면, 뷰 전환 설정(setup view transition)을 document의 active view transition에 대해 실행합니다.

   2. 그 외에 document의 active view transition의 phase가 "animating"이라면, transition frame 처리(handle transition frame)를 document의 active view transition에 대해 실행합니다.

참고: 이 알고리즘은 문서의 현재 상태를 캡처하고, 전환의 UpdateCallback를 호출한 뒤, 문서의 새로운 상태를 캡처합니다.

1. document를 transition의 관련 글로벌 객체의 연관된 document로 한다.

2. 이전 상태 캡처를 transition에 대해 실행한다.

   실패가 반환되면, 뷰 전환 건너뛰기를 transition에 대해 "InvalidStateError" DOMException (in transition의 관련 Realm)로 실행하고 반환한다.

3. document의 뷰 전환 렌더링 억제를 true로 설정한다.

4. 글로벌 태스크 큐를 DOM 조작 태스크 소스에, transition의 관련 글로벌 객체를 넘겨서 다음 단계를 실행하도록 큐잉한다:

   참고: 이미지 캡처에서 텍스처 읽기가 비동기일 수 있으므로 태스크를 큐잉합니다. HTML 명세의 렌더 단계는 동기처럼 동작합니다.

   1. transition의 phase가 "done"이면 이 단계 중단.

      참고: transition이 이 시점 전에 건너뛰기 되었을 때 발생.

   2. update callback 호출.

1. transition의 phase가 "done"이면 반환.

   참고: transition이 이 시점 전에 건너뛰기 되었을 때 발생.

2. 뷰 전환 렌더링 억제를 false로 설정한다.

3. transition의 초기 스냅샷 포함 블록 크기가 스냅샷 포함 블록 크기와 다르면, 뷰 전환 건너뛰기를 transition에 대해 실행하고 반환.

4. 신규 상태 캡처를 transition에 대해 실행한다.

   실패가 반환되면 뷰 전환 건너뛰기를 transition에 대해 "InvalidStateError" DOMException (transition의 관련 Realm)로 실행하고 반환.

5. resolve transition의 update callback done promise를 undefined로.

6. 각 capturedElement를 transition의 named elements의 values에서 반복:

   1. capturedElement의 new element가 null이 아니면, capturedElement의 new element의 뷰 전환에서 캡처됨을 true로 설정한다.

7. 전환 의사 요소 설정을 transition에 대해 실행한다.

8. 의사 요소 스타일 업데이트를 transition에 대해 실행한다.

   실패가 반환되면 뷰 전환 건너뛰기를 transition에 대해 "InvalidStateError" DOMException (transition의 관련 Realm)로 실행하고 반환.

   참고: 위 단계에서는 스타일/레이아웃 중 계산된 정보를 얻기 위해 문서 라이프사이클 단계를 실행해야 할 수도 있습니다.

9. transition의 phase를 "animating"으로 설정한다.

10. resolve transition의 ready promise를 실행한다.

1. document를 transition의 관련 글로벌 객체의 연관된 document로 한다.

2. namedElements를 transition의 named elements로 한다.

3. usedTransitionNames를 새로운 문자열 set으로 한다.

4. captureElements를 새로운 요소 리스트(list)로 한다.

5. document를 transition의 관련 글로벌 객체의 연관된 document로 한다.

6. 스냅샷 포함 블록 크기가 구현 정의 최대치를 초과하면 실패 반환.

7. transition의 초기 스냅샷 포함 블록 크기를 스냅샷 포함 블록 크기로 설정한다.

8. 각 element를 모든 요소 중 connected이고, node document가 document와 동일한 경우, 페인트 순서로 반복:

   페인트 순서로 반복하는 것은 namedElements에 이 순서를 캐시하기 위함입니다. 이것은 ::view-transition-group 의사 요소의 DOM 순서를 정의하며, 페인트 스택 맨 아래 요소가 ::view-transition의 첫 번째 의사 자식이 되도록 합니다.

   1. 이 element의 flat tree 상위 요소 중 하나라도 내용 건너뜀(skips its contents)이면 continue.

   2. element가 box fragment를 2개 이상 가지면, continue.

      참고: 향후 버전에서는 분절된 요소에 대한 전환을 지원할 수도 있습니다. #8900 참고.

      참고: 여기서 언급하는 box fragment는 inline box가 line box로 분할되는 것은 아닙니다. 그런 인라인들은 전환에 참여할 수 있습니다.

   3. transitionName을 element의 계산값 view-transition-name으로 한다.

   4. transitionName이 none이거나, element가 렌더링되지 않은 경우이면, continue.

   5. usedTransitionNames에 포함된 transitionName이 있으면 실패 반환.

   6. Append transitionName을 usedTransitionNames에 추가.

   7. element의 뷰 전환에서 캡처됨을 true로 설정.

   8. Append element를 captureElements에 추가.

   이 알고리즘은 별도의 루프로 계속되어, 뷰 전환에서 캡처됨이 이 캡처에 참여하는 모든 요소에 설정된 뒤, 알고리즘의 후속 단계에서 읽히도록 보장합니다.

9. 각 element를 captureElements에서 반복:

   1. capture를 새로운 캡처된 요소 구조체로 한다.

   2. capture의 old image를 element의 이미지 캡처 결과로 설정.

   3. originalRect를 element가 문서 요소라면 스냅샷 포함 블록으로, 아니면 요소의 border box로 한다.

   4. capture의 old width를 originalRect의 width로 설정.

   5. capture의 old height를 originalRect의 height로 설정.

   6. capture의 old transform을 <transform-function> 값으로 설정(스냅샷 포함 블록 원점에서 현재 시각적 위치로 border box를 매핑함).

   7. capture의 old writing-mode를 element의 계산값 writing-mode로 설정.

   8. capture의 old direction을 element의 계산값 direction로 설정.

   9. capture의 old text-orientation을 element의 계산값 text-orientation로 설정.

   10. capture의 old mix-blend-mode를 element의 계산값 mix-blend-mode로 설정.

   11. capture의 old backdrop-filter를 element의 계산값 backdrop-filter로 설정.

   12. capture의 old color-scheme를 element의 계산값 color-scheme로 설정.

   13. transitionName을 element의 계산값 view-transition-name로 한다.

   14. namedElements[transitionName] = capture로 설정.

10. 각 element를 captureElements에서 반복:

    1. element의 뷰 전환에서 캡처됨을 false로 설정.

1. document를 transition의 관련 글로벌 객체의 연관된 document로 한다.

2. namedElements를 transition의 named elements로 한다.

3. usedTransitionNames를 새로운 문자열 set로 한다.

4. 각 element를 모든 요소 중 connected이고, node document가 document와 동일한 경우, 페인트 순서로 반복:

   1. 이 element의 flat tree 상위 요소 중 하나라도 내용 건너뜀(skips its contents)이면 continue.

   2. transitionName을 element의 계산값 view-transition-name으로 한다.

   3. transitionName이 none이거나, element가 렌더링되지 않은 경우이면, continue.

   4. usedTransitionNames에 포함된 transitionName이 있으면 실패 반환.

   5. Append transitionName을 usedTransitionNames에 추가.

   6. namedElements[transitionName]이 존재하지 않으면, namedElements[transitionName]에 새로운 캡처된 요소 구조체를 추가.

      참고: 일부러 이 구조체를 정렬된 맵의 끝에 추가합니다. 즉, 새로운 DOM에만 존재하는 이름(등장 애니메이션)이 이전 DOM에만 있는 이름(퇴장 애니메이션) 및 둘 다 있는 이름(페어 애니메이션) 위에 페인팅됩니다. 모든 경우에 올바른 레이어링이 아닐 수도 있습니다. issue 8941 참고.

   7. namedElements[transitionName]의 new element를 element로 설정.

참고: 이 알고리즘은 전환을 위한 의사 요소 트리를 생성하며, 초기 스타일을 생성합니다. 의사 트리 구조는 § 3.2 뷰 전환 의사 요소에 자세히 설명되어 있습니다.

1. document를 this의 관련 글로벌 객체의 연관된 document로 한다.

2. document의 show view transition tree를 true로 설정.

3. 각 transitionName → capturedElement를 transition의 named elements에서 반복:

   1. group을 새로운 ::view-transition-group()으로 생성, view transition name을 transitionName으로 설정.

   2. group을 transition의 transition root pseudo-element에 추가.

   3. imagePair를 새로운 ::view-transition-image-pair()로 생성, view transition name을 transitionName으로 설정.

   4. imagePair를 group에 추가.

   5. capturedElement의 old image가 null이 아니면:

      1. old를 새로운 ::view-transition-old()로 생성, view transition name을 transitionName으로 설정, capturedElement의 old image를 대체(replaced) 콘텐츠로 표시.

      2. old를 imagePair에 추가.

   6. capturedElement의 new element가 null이 아니면:

      1. new를 새로운 ::view-transition-new()로 생성, view transition name을 transitionName으로 설정.

         참고: 이 의사 요소의 스타일링은 의사 요소 스타일 업데이트에서 처리됩니다.

      2. new를 imagePair에 추가.

   7. capturedElement의 old image가 null이면:

      1. Assert: capturedElement의 new element가 null이 아님.

      2. capturedElement의 image animation name rule을 새로운 CSSStyleRule로 생성, 아래 CSS를 표현하고, document의 동적 뷰 전환 스타일시트에 추가:

         :root::view-transition-new(transitionName) {
           animation-name: -ua-view-transition-fade-in;
         }
         

         참고: 위 코드 예시는 변수 치환이 필요합니다.

   8. capturedElement의 new element가 null이면:

      1. Assert: capturedElement의 old image가 null이 아님.

      2. capturedElement의 image animation name rule을 새로운 CSSStyleRule로 생성, 아래 CSS를 표현하고, document의 동적 뷰 전환 스타일시트에 추가:

         :root::view-transition-old(transitionName) {
           animation-name: -ua-view-transition-fade-out;
         }
         

         참고: 위 코드 예시는 변수 치환이 필요합니다.

   9. capturedElement의 old image와 new element가 모두 null이 아니면:

      1. transform을 capturedElement의 old transform으로 한다.

      2. width를 capturedElement의 old width로 한다.

      3. height를 capturedElement의 old height로 한다.

      4. backdropFilter를 capturedElement의 old backdrop-filter로 한다.

      5. capturedElement의 group keyframes를 새로운 CSSKeyframesRule로 생성, 아래 CSS를 표현하고, document의 동적 뷰 전환 스타일시트에 추가:

         @keyframes -ua-view-transition-group-anim-transitionName {
           from {
             transform: transform;
             width: width;
             height: height;
             backdrop-filter: backdropFilter;
           }
         }
         

         참고: 위 코드 예시는 변수 치환이 필요합니다.

      6. capturedElement의 group animation name rule을 새로운 CSSStyleRule로 생성, 아래 CSS를 표현하고, document의 동적 뷰 전환 스타일시트에 추가:

         :root::view-transition-group(transitionName) {
           animation-name: -ua-view-transition-group-anim-transitionName;
         }
         

         참고: 위 코드 예시는 변수 치환이 필요합니다.

      7. capturedElement의 image pair isolation rule을 새로운 CSSStyleRule로 생성, 아래 CSS를 표현하고, document의 동적 뷰 전환 스타일시트에 추가:

         :root::view-transition-image-pair(transitionName) {
           isolation: isolate;
         }
         

         참고: 위 코드 예시는 변수 치환이 필요합니다.

      8. capturedElement의 image animation name rule을 새로운 CSSStyleRule로 생성, 아래 CSS를 표현하고, document의 동적 뷰 전환 스타일시트에 추가:

         :root::view-transition-old(transitionName) {
           animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
         }
         :root::view-transition-new(transitionName) {
           animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
         }
         

         참고: 위 코드 예시는 변수 치환이 필요합니다.

         참고: mix-blend-mode: plus-lighter는 old/new 이미지의 동일 픽셀 블렌딩 시 동일한 색상값이 결과로 나오고, “정확한” 크로스 페이드를 달성합니다.

참고: 이 단계는 모든 ViewTransition에 대해 반드시 실행됩니다, 전환이 건너뛰기(skipped)되어도 마찬가지입니다. 그 이유는 § 1.4 향상 기능으로서의 전환에서 설명됩니다.

1. Assert: transition의 phase가 "done" 또는 "update-callback-called" 이전임을 확인.

2. callbackPromise를 null로 한다.

3. transition의 update callback이 null이면, callbackPromise를 undefined로 resolve된 promise로 설정, transition의 관련 Realm에서 실행.

4. 그 외에는 callbackPromise를 callback 함수 호출의 결과로 설정.

5. transition의 phase가 "done"이 아니면, transition의 phase를 "update-callback-called"로 설정.

6. fulfillSteps를 다음 단계로 정의:

   1. 뷰 전환 활성화를 transition에 대해 실행.

   2. resolve transition의 update callback done promise를 undefined로.

      참고: 이전 단계에서 이미 promise가 resolve되었다면 이 단계는 no-op입니다.

7. rejectSteps를 reason을 인자로 다음 단계로 정의:

   1. reject transition의 update callback done promise를 reason으로.

   2. transition의 phase가 "done"이면 반환.

      참고: transition이 이 시점 전에 건너뛰기 되었을 때 발생.

   3. handled로 표시 transition의 ready promise를.

      참고: transition의 update callback done promise가 unhandledrejection을 제공합니다. 중복을 방지하는 단계입니다.

   4. 뷰 전환 건너뛰기를 transition에 reason과 함께 실행.

8. promise settle 후 단계 실행을 callbackPromise에 대해 fulfillSteps와 rejectSteps로 등록.

9. 타임아웃 후 전환을 건너뛰려면, 사용자 에이전트는 아래 단계를 병렬로 실행할 수 있다:

   1. 구현 정의 지속 시간만큼 대기.

   2. 글로벌 태스크 큐를 DOM 조작 태스크 소스에, transition의 관련 글로벌 객체를 넘겨서 다음 단계를 실행하도록 큐잉:

      1. transition의 phase가 "done"이면 반환.

         참고: transition 이 시점 전에 건너뛰기 되었을 때 발생.

      2. 뷰 전환 건너뛰기를 transition에 "TimeoutError" DOMException과 함께 실행.

1. document를 transition의 관련 글로벌 객체의 연관된 document로 한다.

2. Assert: transition의 phase가 "done"이 아님을 확인.

3. transition의 phase가 "update-callback-called" 이전이면, 글로벌 태스크 큐를 DOM 조작 태스크 소스에, transition의 관련 글로벌 객체를 넘겨서 update callback 호출을 실행.

4. 뷰 전환 렌더링 억제를 false로 설정.

5. document의 active view transition이 transition이면, 뷰 전환 초기화를 transition에 대해 실행.

6. transition의 phase를 "done"으로 설정.

7. reject transition의 ready promise를 reason으로 처리.

   참고: ready promise가 이 시점에서 이미 resolve되어 있을 수 있음. skipTransition() 이 애니메이션 시작 후 호출된 경우, 이 단계는 no-op.

8. resolve transition의 finished promise를 update callback done promise settle 후 처리 결과로:

   • promise가 fulfill되면 undefined 반환.

   참고: transition의 update callback done promise가 여기서 명시적으로 처리되지 않으므로, transition의 update callback done promise가 reject되면, transition의 finished promise도 같은 이유로 reject됨.

1. document의 visibility state가 "hidden"이면:

   1. document의 active view transition이 null이 아니면, 뷰 전환 건너뛰기를 document의 active view transition에 "InvalidStateError" DOMException과 함께 실행.

2. 그 외에는 assert: active view transition이 null이어야 함.

참고: 이 단계는 HTML 명세에서 호출됨.

1. element가 문서 요소라면:

   1. 문서의 영역을 렌더링한다 (캔버스 배경 및 상단 레이어 콘텐츠 포함) 스냅샷 포함 블록과 교차되는 부분을 스냅샷 포함 블록 크기의 투명 캔버스에 렌더링하며, 캡처 렌더링 특성과 다음 추가 특성을 따른다:

      • element의 스크롤 박스 바깥 영역은 스크롤된 것처럼 렌더링하지만 레이아웃 뷰포트를 실제로 이동하거나 크기 변경하지 않는다. 이로 인해 IntersectionObserver 등 스크롤/리사이즈 관련 이벤트가 발생하면 안 됨.

        

      • 스크롤할 수 없는 영역(범위를 벗어난 경우)은 캔버스 배경을 렌더링한다.

        

   2. 이 캔버스를 이미지로 반환. 이미지의 자연 크기는 스냅샷 포함 블록과 동일.

2. 그 외에는:

   1. element 및 그 자손을 element가 node document에서 보이는 크기와 동일하게 무한 투명 캔버스에 렌더링하며, 캡처 렌더링 특성을 따른다.

   2. 이 캔버스에서 element의 잉크 오버플로우 사각형을 포함하는 부분을 이미지로 반환한다. 이 이미지의 자연 크기는 해당 principal border box와 동일하며, 원점은 border box의 원점과 일치해야 하며, 이미지는 border box의 내용과 캡처된 잉크 오버플로우가 이 경계 바깥에 표시됨을 의미.

      참고: 이 이미지가 대체 요소로 자연 크기로 렌더링되면, 요소의 principal box의 크기와 내용이 표시되고, 캡처된 잉크 오버플로우는 content box 바깥에 넘쳐 보임.

• 참조된 요소에 transform이 적용되어 있으면(혹은 상위에 적용된 경우) transform은 무시된다.

  참고: 이 transform은 연관된 ::view-transition-group 의사 요소의 transform 속성으로 스냅샷에 적용됨.

• 요소 및 자손에 적용된 효과(예: opacity 및 filter)는 캡처에 적용되며, 상위에서 요소에 적용된 효과는 무시된다.

• 구현체는 잉크 오버플로우 사각형이 구현 정의 최대치를 초과하면 렌더링 내용을 잘라낼 수 있다. 단, 캡처된 이미지는 최소한 스냅샷 포함 블록과 교차하는 element의 콘텐츠는 포함해야 한다. 구현체는 잉크 오버플로우 영역이 크고 변환된 경우 래스터화 품질을 조정할 수 있다.

• 각 descendant를 shadow-including descendant Element 및 의사 요소로 반복, descendant가 뷰 전환에서 캡처됨이면 descendant의 페인팅을 건너뜀.

  참고: 이는 해당 자손이 자신의 스냅샷을 생성해 독립적으로 표시 및 애니메이션되기 때문.

1. document를 transition의 관련 글로벌 객체의 연관된 document로 한다.

2. hasActiveAnimations을 boolean, 최초에는 false로 한다.

3. 각 element를 transition의 transition root pseudo-element의 포함 자손에서 반복:

   1. animation들 중 timeline이 document timeline이고 document와 연결되어 있으며, associated effect 중 적어도 하나의 effect target이 element인 경우, 아래 조건 중 하나라도 true이면 hasActiveAnimations을 true로 설정:

      • animation의 play state가 paused 또는 running이다.

      • document의 pending animation event queue에 animation과 연결된 이벤트가 있다.

4. hasActiveAnimations이 false라면:

   1. transition의 phase를 "done"으로 설정.

   2. 뷰 전환 초기화를 transition에 대해 실행.

   3. resolve transition의 finished promise.

   4. 반환.

5. transition의 초기 스냅샷 포함 블록 크기가 스냅샷 포함 블록 크기와 다르면, 뷰 전환 건너뛰기를 transition에 대해 실행하고 반환.

6. 의사 요소 스타일 업데이트를 transition에 대해 실행.

   실패가 반환되면 뷰 전환 건너뛰기를 transition에 대해 "InvalidStateError" DOMException (transition의 관련 Realm)로 실행하고 반환.

   참고: 위 내용은 들어오는 요소의 크기나 위치가 변경되면 새로운 keyframe이 생성된다는 의미입니다. 이로 인해 시각적 점프가 발생할 수 있습니다. 부드럽게 retarget할 수도 있지만 복잡성을 정당화할 use-case가 없어 구현하지 않았습니다. 자세한 내용은 issue 7813 참고.

1. 각 transitionName → capturedElement를 transition의 named elements에서 반복:

   1. width, height, transform, writingMode, direction, textOrientation, mixBlendMode, backdropFilter, colorScheme을 모두 null로 초기화한다.

   2. capturedElement의 new element가 null이면:

      1. width를 capturedElement의 old width로 설정.

      2. height를 capturedElement의 old height로 설정.

      3. transform을 capturedElement의 old transform으로 설정.

      4. writingMode를 capturedElement의 old writing-mode로 설정.

      5. direction을 capturedElement의 old direction으로 설정.

      6. textOrientation을 capturedElement의 old text-orientation으로 설정.

      7. mixBlendMode를 capturedElement의 old mix-blend-mode로 설정.

      8. backdropFilter를 capturedElement의 old backdrop-filter로 설정.

      9. colorScheme을 capturedElement의 old color-scheme로 설정.

   3. 그 외의 경우:

      1. 아래 조건 중 하나라도 true이면 실패 반환:

         • capturedElement의 new element의 flat tree 상위에 내용 건너뜀(skips its contents)이 있다.

         • capturedElement의 new element가 렌더링되지 않음.

         • capturedElement가 box fragment를 2개 이상 가짐.

         참고: 다른 렌더링 제한 사항은 capturedElement의 new element가 뷰 전환에서 캡처됨인 것으로 보장됨.

      2. width를 capturedElement의 new element의 현재 border box의 너비로 설정.

      3. height를 capturedElement의 new element의 현재 border box의 높이로 설정.

      4. transform을 capturedElement의 new element의 border box를 스냅샷 포함 블록 원점에서 현재 시각적 위치로 매핑하는 변환으로 설정.

      5. writingMode를 capturedElement의 계산값 writing-mode로 설정(capturedElement의 new element 기준).

      6. direction을 capturedElement의 계산값 direction으로 설정(capturedElement의 new element 기준).

      7. textOrientation을 capturedElement의 계산값 text-orientation으로 설정(capturedElement의 new element 기준).

      8. mixBlendMode를 capturedElement의 계산값 mix-blend-mode로 설정(capturedElement의 new element 기준).

      9. backdropFilter를 capturedElement의 계산값 backdrop-filter로 설정(capturedElement의 new element 기준).

      10. colorScheme을 capturedElement의 계산값 color-scheme로 설정(capturedElement의 new element 기준).

   4. capturedElement의 group styles rule이 null이면, capturedElement의 group styles rule을 새로운 CSSStyleRule로 생성, 아래 CSS를 표현하고, transition의 관련 글로벌 객체의 연관된 document의 동적 뷰 전환 스타일시트에 추가.

      그 외에는 capturedElement의 group styles rule을 아래 CSS와 일치하도록 갱신:

      :root::view-transition-group(transitionName) {
        width: width;
        height: height;
        transform: transform;
        writing-mode: writingMode;
        direction: direction;
        text-orientation: textOrientation;
        mix-blend-mode: mixBlendMode;
        backdrop-filter: backdropFilter;
        color-scheme: colorScheme;
      }
      

      참고: 위 코드 예시는 변수 치환이 필요합니다.

   5. capturedElement의 new element가 null이 아니면:

      1. new를 ::view-transition-new()로 하고 view transition name을 transitionName으로 한다.

      2. new의 대체 요소(replaced element) 콘텐츠를 capturedElement의 이미지 캡처 결과(대상: capturedElement의 new element)로 설정.

이 알고리즘은 사용자 에이전트 출처에서 웹 API를 통해 그 효과가 관찰될 수 있다면 반드시 실행되어야 함.

참고: 예시로 window.getComputedStyle(document.documentElement, "::view-transition") 같은 웹 API가 있음.

1. document를 transition의 관련 글로벌 객체의 연관된 document로 한다.

2. assert: document의 active view transition이 transition이어야 한다.

3. 각 capturedElement를 transition의 named elements의 values에서 반복:

   1. capturedElement의 new element가 null이 아니면, capturedElement의 new element의 뷰 전환에서 캡처됨을 false로 설정.

   2. 각 style을 capturedElement의 style definitions에서 반복:

      1. style이 null이 아니고, document의 동적 뷰 전환 스타일시트에 포함되어 있다면, style을 document의 동적 뷰 전환 스타일시트에서 제거한다.

4. document의 show view transition tree를 false로 설정.

5. document의 active view transition을 null로 설정.