CSSビュー遷移モジュール レベル1

1. transition を this の 関連Realm内で新しい ViewTransition オブジェクトとして生成する。

2. updateCallback が指定されていれば、transition の update callback を updateCallback に設定する。

3. document を this の 関連グローバルオブジェクトの 関連付けられたドキュメントとする。

4. document の visibility state が "hidden" なら、 skip transition （"InvalidStateError" DOMException 付き）で終了し、transition を返す。

5. document の アクティブなビュー遷移 が null でない場合、 そのビュー遷移をスキップ （"AbortError" DOMException を this の 関連Realmで発生させる）。

   注: これにより2つの非同期な update callback が同時実行される可能性があり （順序が入れ替わる場合もある）: 1つは document の現在の アクティブなビュー遷移用、 もう1つは今回の transition 用。 この機能の設計に従い、開発者が別の機能やフレームワークでこれらDOM変更の正しいスケジューリングを行うことを想定しています。

6. document の アクティブなビュー遷移 を transition に設定する。

   注: ビュー遷移の処理は ビュー遷移のセットアップ内で 保留遷移操作の実行を通じて継続します。

7. transition を返す。

1. this の phase が "done" でなければ、 skip the view transition を this で "AbortError" DOMException で行うこと。

保留中の遷移操作の実行は、Document document に対して以下の手順を実行する：

1. document の active view transition が null でない場合：

   1. document の active view transition の phase が "pending-capture" なら、 ビュー遷移のセットアップを document の active view transition に対して実行する。

   2. それ以外の場合、document の active view transition の phase が "animating" なら、 遷移フレームの処理を document の active view transition に対して実行する。

注: このアルゴリズムはドキュメントの現在の状態をキャプチャし、 遷移の UpdateCallback を呼び出し、 その後ドキュメントの新しい状態をキャプチャします。

1. document を transition の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

2. 旧状態のキャプチャ を transition に対して行う。

   失敗が返された場合、ビュー遷移のスキップ を transition に対し "InvalidStateError" DOMException を transition の 関連Realm で行い、return。

3. document の ビュー遷移用レンダリング抑制 を true にする。

4. グローバルタスクをキューに追加する。 DOM操作タスクソースで、 transition の 関連グローバルオブジェクト を指定し、以下の手順を実行：

   注: 画像のキャプチャ のテクスチャの読み出しは非同期となる場合があるため、ここでタスクをキューしていますが、HTML仕様のレンダーステップでは同期的に扱われます。

   1. transition の phase が "done" の場合、これらの手順を中止する。

      注: これは transition がこの時点で スキップ された場合に発生します。

   2. update callback の呼び出しを行う。

1. transition の phase が "done" の場合、return。

   注: これは transition がこの時点で スキップ された場合に発生します。

2. ビュー遷移用レンダリング抑制 を false にする。

3. transition の 初期スナップショット包含ブロックサイズ が スナップショット包含ブロックサイズ と等しくない場合、 ビュー遷移のスキップ を transition に対して行い、return。

4. 新状態のキャプチャ を transition に対して行う。

   失敗が返された場合、ビュー遷移のスキップ を transition に対し "InvalidStateError" DOMException を transition の 関連Realm で行い、return。

5. resolve transition の update callback done promise を undefined で解決する。

6. 各 capturedElement を transition の named elements の 値でイテレート：

   1. capturedElement の new element が null でなければ、 capturedElement の new element の ビュー遷移でキャプチャされた を true に設定。

7. 遷移疑似要素のセットアップ を transition に対して行う。

8. 疑似要素スタイルの更新 を transition に対して行う。

   失敗が返された場合、ビュー遷移のスキップ を transition に対し "InvalidStateError" DOMException を transition の 関連Realm で行い、return。

   注: 上記の手順では、スタイル・レイアウト中に計算される情報を得るために、ドキュメントのライフサイクルフェーズの実行が必要となります。

9. transition の phase を "animating" に設定。

10. resolve transition の ready promise を解決する。

1. document を transition の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

2. namedElements を transition の named elementsとする。

3. usedTransitionNames を新しい セット（string型）とする。

4. captureElements を新しい リスト（要素型）とする。

5. document を transition の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

6. スナップショット包含ブロックサイズ が 実装依存の最大値を超える場合、失敗を返す。

7. transition の 初期スナップショット包含ブロックサイズ を スナップショット包含ブロックサイズ に設定する。

8. 各 element を、要素で connected かつ ノードドキュメントが document であるものを、 描画順でイテレート：

   描画順でイテレートすることで、この順序が namedElements にキャッシュされます。 これによりペイントスタックの一番下の要素が ::view-transition の最初の疑似子要素を生成するなど、 ::view-transition-group 疑似要素のDOM順が定義されます。

   1. この element の flat tree の祖先が 内容をスキップしている場合、continue。

   2. element が複数の box fragment を持つ場合、continue。

      注: 将来のバージョンでは分断要素の遷移も有効化するかもしれません。 #8900を参照。

      注: ここでの box fragment は、 インラインボックスが ラインボックスをまたぐ分断とは異なります。 そのようなインラインも遷移に参加できます。

   3. transitionName を element の 算出値（view-transition-name）とする。

   4. transitionName が none または element が 非レンダリングなら、continue。

   5. usedTransitionNames が transitionNameを含む場合、失敗を返す。

   6. transitionNameを追加 (usedTransitionNamesに)。

   7. element の ビュー遷移でキャプチャされた を true に設定。

   8. elementを追加 (captureElementsに)。

   このアルゴリズムは別のループで続行され、 ビュー遷移でキャプチャされた が すべての参加要素に設定された後、後続ステップで読まれるためです。

9. 各 element を captureElements でイテレート：

   1. capture を新しい キャプチャされた要素構造体とする。

   2. capture の old image を 画像のキャプチャ の結果で設定する（elementに対して）。

   3. originalRect を element が document element なら スナップショット包含ブロック、それ以外なら border box とする。

   4. capture の old width を originalRect の width で設定。

   5. capture の old height を originalRect の height で設定。

   6. capture の old transform を <transform-function> で設定（element の border box を スナップショット包含ブロック原点 から現在の視覚位置までマッピングするもの）。

   7. capture の old writing-mode を 算出値（writing-mode）で設定。

   8. capture の old direction を 算出値（direction）で設定。

   9. capture の old text-orientation を 算出値（text-orientation）で設定。

   10. capture の old mix-blend-mode を 算出値（mix-blend-mode）で設定。

   11. capture の old backdrop-filter を 算出値（backdrop-filter）で設定。

   12. capture の old color-scheme を 算出値（color-scheme）で設定。

   13. transitionName を element の 算出値（view-transition-name）とする。

   14. namedElements[transitionName] に capture を設定。

10. 各 element を captureElements でイテレート：

    1. element の ビュー遷移でキャプチャされた を false に設定。

1. document を transition の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

2. namedElements を transition の named elementsとする。

3. usedTransitionNames を新しい セット（string型）とする。

4. 各 element を、要素で connected かつ ノードドキュメントが document であるものを、 描画順でイテレート：

   1. この element の flat tree の祖先が 内容をスキップしている場合、continue。

   2. transitionName を element の 算出値（view-transition-name）とする。

   3. transitionName が none または element が 非レンダリングの場合、continue。

   4. usedTransitionNames が transitionNameを含む場合、失敗を返す。

   5. transitionNameを追加 (usedTransitionNamesに)。

   6. namedElements[transitionName] が 存在しない場合、 namedElements[transitionName] に新しい キャプチャされた要素構造体を設定。

      注: この構造体は意図的にこの順序付きmapの末尾に追加されます。 新DOMにのみ存在する名前（エントリーアニメーション）は旧DOMのみの名前（退場アニメーション）や両DOMに存在する名前（ペアアニメーション）より上に描画されます。 このレイヤリングがすべての場合に正しいとは限りません。issue 8941参照。

   7. namedElements[transitionName] の new element に element を設定。

注: このアルゴリズムは遷移用疑似要素ツリーを構築し、 初期スタイルを生成します。 疑似ツリーの構造は § 3.2 ビュー遷移疑似要素で説明されています。

1. document を this の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

2. document の show view transition tree を true に設定。

3. 各 transitionName → capturedElement を transition の named elements でイテレート：

   1. group を新しい ::view-transition-group() とし、 ビュー遷移名を transitionName に設定。

   2. group を transition の transition root pseudo-element に追加。

   3. imagePair を新しい ::view-transition-image-pair() とし、 ビュー遷移名を transitionName に設定。

   4. imagePair を group に追加。

   5. capturedElement の old image が null でなければ：

      1. old を新しい ::view-transition-old() とし、 ビュー遷移名を transitionName に設定、 capturedElement の old image を 置換内容として表示。

      2. old を imagePair に追加。

   6. capturedElement の new element が null でなければ：

      1. new を新しい ::view-transition-new() とし、 ビュー遷移名を transitionName に設定。

         注: この疑似要素のスタイリングは 疑似要素スタイルの更新で扱います。

      2. new を imagePair に追加。

   7. capturedElement の old image が null の場合：

      1. Assert: capturedElement の new element は null ではない。

      2. capturedElement の image animation name rule を新しい CSSStyleRule (以下のCSSを表現)とし、 document の dynamic view transition style sheet に追加：

         :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 の dynamic view transition style sheet に追加：

         :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 の dynamic view transition style sheet に追加：

         @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 の dynamic view transition style sheet に追加：

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

         注: 上記コード例は変数を置換する必要があります。

      7. capturedElement の image pair isolation rule を新しい CSSStyleRule (以下のCSSを表現)とし、 document の dynamic view transition style sheet に追加：

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

         注: 上記コード例は変数を置換する必要があります。

      8. capturedElement の image animation name rule を新しい CSSStyleRule (以下のCSSを表現)とし、 document の dynamic view transition style sheet に追加：

         :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 に対し必ず発生します。遷移が skip された場合も同様です。 この理由は § 1.4 拡張機能としての遷移で説明されています。

1. Assert: transition の phase が "done" または "update-callback-called" 前であること。

2. callbackPromise を null とする。

3. transition の update callback が null なら、 callbackPromise を undefinedで解決されたpromise（transition の 関連Realm内）に設定。

4. それ以外の場合、callbackPromise を update callbackの呼び出しの結果に設定。

5. transition の phase が "done" でなければ、phase を "update-callback-called" に設定。

6. fulfillSteps を以下の手順とする：

   1. activate view transition を transition に対して行う。

   2. resolve transition の update callback done promise を undefined で解決。

      注: 前手順で既にpromiseを解決している場合はno-opです。

7. rejectSteps を reasonを引数に以下の手順とする：

   1. reject transition の update callback done promise を reason でreject。

   2. transition の phase が "done" なら return。

      注: これは transition がこの時点で skip された場合に発生します。

   3. handledとしてマーク transition の ready promise。

      注: transition の update callback done promise が unhandledrejection を提供します。この手順は重複を避けるものです。

   4. skip the view transition を transition に reason で行う。

8. callbackPromiseをsettle時に fulfillSteps と rejectSteps を実行。

9. ユーザーエージェントがタイムアウト後に遷移をスキップする場合、以下の手順を 並列で実行する：

   1. 実装依存の duration だけ待つ。

   2. グローバルタスクをキュー（DOM操作タスクソースで）、transition の 関連グローバルオブジェクト指定、以下の手順実行：

      1. transition の phase が "done" なら return。

         注: これは transition がこの時点で skip された場合に発生します。

      2. skip transition を "TimeoutError" DOMException で行う。

1. document を transition の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

2. Assert: transition の phase が "done" でないこと。

3. transition の phase が "update-callback-called"より前なら、 グローバルタスクをキューする（DOM操作タスクソースで、 transition の 関連グローバルオブジェクト指定）し、 update callback の呼び出しを transition に対して行う。

4. ビュー遷移用レンダリング抑制 を false に設定。

5. document の active view transition が transition なら、 ビュー遷移のクリア を transition に対して行う。

6. transition の phase を "done" に設定。

7. reject transition の ready promise を reason でreject。

   注: ready promise は、 この時点で既に解決済みである場合もある（skipTransition() がアニメーション開始後に呼ばれた場合）。 その場合、このステップは no-op です。

8. resolve transition の finished promise を、 update callback done promise の settle時に反応した結果で解決：

   • promiseがfulfilledなら undefined を返す。

   注: transition の update callback done promise のrejectは明示的にここで処理されないため、 transition の update callback done promise がrejectされた場合、 transition の finished promise も同じ理由でrejectされる。

1. document の visibility state が "hidden" なら：

   1. document の active view transition が null でなければ、 skip document の active view transition を "InvalidStateError" DOMException でスキップする。

2. それ以外の場合、assert: active view transition は null であること。

注: これはHTML仕様から呼ばれます。

1. element が document element なら：

   1. ドキュメント領域 （canvas background や トップレイヤーの内容を含む） が スナップショット包含ブロックと交差する部分を、 スナップショット包含ブロックと同じサイズの透明なキャンバス上にレンダリングする。 キャプチャレンダリング特性および以下の特性に従う：

      • element の スクロールボックス の外側領域は、 レイアウトビューポートを移動・サイズ変更せずに、スクロールされたかのようにレンダリングされるべき。 これはスクロールやリサイズ関連のイベント（IntersectionObserverなど）を発火してはならない。

        

      • スクロール不可能な領域（スクロール範囲外）は canvas background をレンダリングするべき。

        

   2. このキャンバスを画像として返す。 画像の自然サイズは スナップショット包含ブロックと同じ。

2. それ以外の場合：

   1. element およびその 子孫 を、 ノードドキュメントで表示されるのと同じサイズで、 無限透明キャンバス上にレンダリングする。 キャプチャレンダリング特性に従う。

   2. このキャンバスのうち、element の ink overflow rectangle を含む部分を画像として返す。 この画像の自然寸法は、その principal border boxと同じで、 原点もその border box の原点に対応する。 画像はこの border box の内容と、キャプチャされた ink overflow がその外側に表現される。

      注: この画像を 置換要素として自然サイズでレンダリングすると、 要素の principal box のサイズと内容が表示され、 キャプチャされた ink overflow は content boxの外に溢れる。

• 参照要素またはその祖先にtransformが適用されている場合、そのtransformは無視する。

  注: このtransformは、関連する ::view-transition-group 疑似要素の transform プロパティでスナップショットに適用される。

• 要素およびその子孫に適用された opacity や filter などの効果はキャプチャに適用される。 祖先から要素に適用された効果は無視される。

• ink overflow rectangle が 実装依存の最大値を超える場合、実装は描画内容をクリップしてもよい。 ただし、キャプチャ画像には少なくとも element の スナップショット包含ブロックと交差する内容は含めるべき。 実装は、ink overflow area が大きくviewにtransformされる要素について、ラスタ品質を調整してもよい。

• 各 descendant を shadow-including descendant Element および 疑似要素（elementの）について、 descendant が ビュー遷移でキャプチャされたなら、その描画をスキップする。

  注: この理由は、子孫自身が独立してスナップショットを生成し、個別にアニメーションされるため。

1. document を transition の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

2. hasActiveAnimations を boolean型（初期値 false）とする。

3. 各 element を transition の transition root pseudo-element の inclusive descendants でイテレート：

   1. 各 animation（timeline が document timelineで documentに関連し、 少なくとも1つ 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. return。

5. transition の 初期スナップショット包含ブロックサイズ が スナップショット包含ブロックサイズと等しくない場合、 ビュー遷移のスキップ を transition に対して実行し、return。

6. 疑似要素スタイルの更新 を transition に対して実行。

   失敗が返された場合、ビュー遷移のスキップ を transition に対し "InvalidStateError" DOMException を transition の 関連Realm で行い、return。

   注: 上記は、要素のサイズや位置が変化した場合に新しいキーフレームが生成されることを意味します。 このため、視覚的なジャンプが発生する場合があります。 より滑らかなリターゲットも可能ですが、複雑さに見合うユースケースがまだありません。 詳細は 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 の祖先が 内容をスキップしている。

         • capturedElement の new element が 非レンダリング。

         • capturedElement が複数の box fragment を持つ。

         注: その他のレンダリング制約は capturedElement の new element が ビュー遷移でキャプチャされたであることで強制される。

      2. width を capturedElement の new element の border box の現時点の幅で設定。

      3. height を capturedElement の new element の border box の現時点の高さで設定。

      4. transform を capturedElement の new element の border box を スナップショット包含ブロック原点 から現在の視覚位置にマッピングするtransformで設定。

      5. writingMode を 算出値（writing-mode、capturedElement の new element）で設定。

      6. direction を 算出値（direction、capturedElement の new element）で設定。

      7. textOrientation を 算出値（text-orientation、capturedElement の new element）で設定。

      8. mixBlendMode を 算出値（mix-blend-mode、capturedElement の new element）で設定。

      9. backdropFilter を 算出値（backdrop-filter、capturedElement の new element）で設定。

      10. colorScheme を 算出値（color-scheme、capturedElement の new element）で設定。

   4. capturedElement の group styles rule が null なら、 group styles rule に新しい CSSStyleRule （以下のCSS）を設定し、transition の 関連グローバルオブジェクト の 関連付けられたドキュメント の dynamic view transition style sheet に追加。

      それ以外の場合、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()（ビュー遷移名は transitionName）とする。

      2. new の 置換要素内容に、画像のキャプチャ（capturedElement の new element）の結果を設定。

このアルゴリズムは、Web APIからその効果が観測できる場合、ユーザーエージェント起源でスタイルを更新するために必ず実行されなければならない。

注: 例えば、window.getComputedStyle(document.documentElement, "::view-transition") のようなWeb APIが該当する。

1. document を transition の 関連グローバルオブジェクト の 関連付けられたドキュメントとする。

2. Assert: document の active view transition が transition であること。

3. 各 capturedElement を transition の named elements の 値でイテレート：

   1. capturedElement の new element が null でない場合、 new element の ビュー遷移でキャプチャされた を false に設定。

   2. 各 style を capturedElement の スタイル定義でイテレート：

      1. style が null でなく、かつ style が document の dynamic view transition style sheet に含まれている場合、 style を document の dynamic view transition style sheet から削除する。

4. document の show view transition tree を false に設定。

5. document の active view transition を null に設定。