CSS Shared Element Transitions Module Level 1

1. Let transition be a new DOMTransition object in this’s relevant Realm.

2. Set transition’s DOM update callback to init[updateDOM].

3. Let document be this’s relevant global object’s associated document.

4. If document’s active DOM transition is not null, then skip the page transition document’s active DOM transition with an "AbortError" DOMException in this’s relevant Realm.

   Note: This can result in two asynchronous DOM update callbacks running concurrently. One for the document’s current active DOM transition, and another for this transition. As per the design of this feature, it’s assumed that the developer is using another feature or framework to correctly schedule these DOM changes.

5. Set document’s active DOM transition to transition.

   Note: The process continues in perform an outgoing capture.

6. Return transition.

1. If this's phase is not "done", then skip the page transition for this with an "AbortError" DOMException.

1. For each fully active Document in docs, perform pending transition operations for that Document.

Note: These steps will be added to the update the rendering in the HTML spec. As such, the prose style is written to match other steps in that algorithm.

1. For each Document in docs with a transition suppressing rendering of true:

   Define this behavior. Lifecycle updates can still be triggered via script APIs which query style or layout information but no visual updates are presented to the user. Is this the same behavior as render-blocking?

   How should input be handled when in this state? The last frame presented to the user will not reflect the DOM state as it asynchronously switches to the new version.

   Note: The aim is to prevent unintended DOM updates from being presented to the user after a cached snapshot for the elements has been captured. We wait for one rendering opportunity after prepare to present DOM mutations made by the author before prepare to be presented to the user. This is also the content captured in snapshots.

Note: These steps will be added to the update the rendering in the HTML spec. As such, the prose style is written to match other steps in that algorithm.

1. If document’s active DOM transition is not null, then:

   1. If document’s active DOM transition's phase is "pending-capture", then perform an outgoing capture with document’s active DOM transition.

   2. Otherwise, if document’s active DOM transition's phase is "animating", then update transition DOM for document’s active DOM transition.

1. Let taggedElements be transition’s tagged elements.

2. Let usedTransitionTags be a new set of strings.

3. Let document be transition’s relevant global object’s associated document.

4. For each element of every Element and pseudo-element connected to document, in paint order:

   The link for "paint order" doesn’t seem right. Is there a more canonical definition?

   1. Let transitionTag be the computed value of page-transition-tag for element.

   2. If transitionTag is none, or element is not rendered, then continue.

   3. If any of the following is true:

      • usedTransitionTags contains transitionTag.

      • element is not element’s root and element does not have layout containment.

      • element is not element’s root and element allows fragmentation.

      Then skip the page transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.

   4. Append transitionTag to usedTransitionTags.

   5. Let capture be a new captured element struct.

   6. Set capture’s outgoing image to the result of capturing the image of element.

   7. Set capture’s outgoing styles to the following:

      transform

      A CSS transform that would place element from the layout viewport origin to its current quad.

      This value is identity for the root element.

      width

      height

      The width and height of element’s border box.

      This value is the bounds of the initial containing block for the root element.

      object-view-box

      An object-view-box value that, when applied to the outgoing image, will cause the view box to coincide with element’s border box in the image.

      writing-mode

      The writing-mode of element.

      direction

      The direction of element.

      This needs proper types.

   8. Set taggedElements[transitionTag] to capture.

5. Set document’s transition suppressing rendering to true.

6. Queue a global task on the DOM manipulation task source, given transition’s relevant global object, to execute the following steps:

   Note: A task is queued here because the texture read back in capturing the image may be async, although the render steps in the HTML spec act as if it’s synchronous.

   1. If transition’s phase is "done", then abort these steps.

      Note: This happens if transition was skipped before this point.

   2. Call the DOM update callback of transition.

   3. React to transition’s DOM updated promise:

      • If the promise does not settle within an implementation-defined timeout, then:

        1. If transition’s phase is "done", then return.

           Note: This happens if transition was skipped before this point.

        2. Skip the page transition transition with a "TimeoutError" DOMException.

      • If the promise was fulfilled, then:

        1. If transition’s phase is "done", then return.

           Note: This happens if transition was skipped before this point.

        2. Set transition suppressing rendering to false.

        3. Set usedTransitionTags to a new set.

        4. For each element of every Element and pseudo-element connected to document, in paint order:

           The link for "paint order" doesn’t seem right. Is there a more canonical definition?

           1. Let transitionTag be the computed value of page-transition-tag for element.

           2. If transitionTag is none, or element is not rendered, then continue.

           3. If any of the following is true:

              • usedTransitionTags contains transitionTag.

              • element is not element’s root and element does not have layout containment.

              • element is not element’s root and element allows fragmentation.

              Then skip the page transition transition with an "InvalidStateError" DOMException, and return.

           4. Append transitionTag to usedTransitionTags.

           5. If taggedElements[transitionTag] does not exist, then set taggedElements[transitionTag] to a new captured element struct.

           6. Let capture be taggedElements[transitionTag].

           7. Let capture’s incoming element item be element.

        5. Create transition pseudo-elements for transition.

        6. Animate a page transition transition.

           Note: This will require running document lifecycle phases to compute information calculated during style/layout.

           Note: The frame-by-frame parts of the animation are handled in update transition DOM.

        7. Resolve ready promise.

      • If the promise was rejected with reason r, then:

        1. If transition’s phase is "done", then return.

           Note: This happens if transition was skipped before this point.

        2. Skip the page transition transition with r.

1. Let document be transition’s relevant global object’s associated document.

2. Assert: document’s active DOM transition is transition.

3. Assert: transition’s phase is not "done".

4. If transition’s phase is before "dom-update-callback-called", then call the DOM update callback of transition.

5. Set transition suppressing rendering to false.

6. If transition’s phase is equal to or after "animating", then:

   1. Remove all associated page-transition pseudo-elements from document.

      There needs to be a definition/link for "remove".

      There needs to be a definition/link for "associated".

7. Set transition’s phase to "done".

8. Set document’s active DOM transition to null.

9. Reject transition’s ready promise with reason.

10. Reject transition’s finished promise with reason.

1. Render the referenced element and its descendants, at the same size that they would be in the document, over an infinite transparent canvas with the following characteristics:

   • The origin of element’s ink overflow rectangle is anchored to canvas origin.

   • If the referenced element has a transform applied to it (or its ancestors), then the transform is ignored.

     Note: This transform is applied to the snapshot using the transform property of the associated ::page-transition-container pseudo-element.

   • For each descendant of shadow-including descendant Element and pseudo-element of element, if descendant has a computed value of page-transition-tag that is not none, then skip painting descendant.

     Note: This is necessary since the descendant will generate its own snapshot which will be displayed and animated independently.

     Refactor this so the algorithm takes a set of elements that will be captured. This centralizes the logic for deciding if an element should be included or not.

2. Let interestRectangle be the result of computing the interest rectangle for element.

   Note: The interestRectangle is the subset of element’s ink overflow rectangle that should be captured. This is required for cases where an element’s ink overflow rectangle needs to be clipped because of hardware constraints. For example, if it exceeds the maximum texture size.

3. Return the portion of the canvas within interestRectangle as an image. The natural size of the image is equal to the interestRectangle bounds.

1. Let document be transition’s relevant global object’s associated document.

2. For each page-transition pseudo-elements associated with transition, check whether there is an active animation associated with this pseudo-element.

   Define what active animation means here.

3. If no page-transition pseudo-elements has an active animation:

   There needs to be a definition/link for "active animation".

   1. Set transition’s phase to "done".

   2. Remove all associated page-transition pseudo-elements from document.

      There needs to be a definition/link for "remove".

      There needs to be a definition/link for "associated".

   3. Set document’s active DOM transition to null.

   4. Resolve transition’sfinished promise.

   5. Return.

4. For each tag -> capturedElement of transition’s tagged elements:

   1. If capturedElement has an "incoming element", run capture the image on capturedElement’s "incoming element" and update the displayed image for ::page-transition-incoming-image with the tag tag.

      At the user-agent origin, set incoming’s object-view-box property to a value that when applied to incoming, will cause the view box to coincide with "incoming element"'s border box in the image.

   2. ...

      Also clarify updating the animation based on new bounds/transform to get c0 continuity.

1. If el is the document’s root element, then return a rectangle that is the intersection of the layout viewport, including the size of rendered scrollbars (if any), with el’s ink overflow rectangle.

2. If el’s ink overflow area does not exceed an implementation-defined maximum size, then return a rectangle that is equal to el’s ink overflow rectangle.

3. Otherwise:

   Define the algorithm used to clip the snapshot when it exceeds max size.

1. Generate a <keyframe> named "page-transition-fade-out" in user-agent origin as follows:

   @keyframes page-transition-fade-out {
         to { opacity: 0; }
   }
   

2. Generate a <keyframe> named "page-transition-fade-in" in user-agent origin as follows:

   @keyframes page-transition-fade-in {
         from { opacity: 0; }
   }
   

3. Apply the following styles in user-agent origin:

   html::page-transition-outgoing-image(*) {
       animation-name: page-transition-fade-out;
   }
   
   html::page-transition-incoming-image(*) {
       animation-name: page-transition-fade-in;
   }
   

4. For each tag -> capturedElement of transition’s tagged elements:

   1. If neither of capturedElement’s outgoing image or incoming element is null:

      1. Let transform be capturedElement’s outgoing styles's transform property.

      2. Let width be capturedElement’s outgoing styles's width property.

      3. Let height be capturedElement’s outgoing styles's height property.

      4. Generate a <keyframe> named "page-transition-container-anim-tag" in user-agent origin as follows:

      @keyframes page-transition-container-anim-|tag| {
          from {
              transform: |transform|;
              width: |width|;
              height: |height|;
          }
      }
      

   2. Apply the following styles in user-agent origin:

      html::page-transition-container(|tag|) {
          animation-name: page-transition-container-anim-|tag|;
      }
      

5. Set transition’s phase to "animating".

How are keyframes scoped to user-agent origin? We could decide scope based on whether animation-name in the computed style came from a developer or UA stylesheet.

We should retarget the animation if computed properties for incoming elements change.

1. Let transitionRoot be the result of creating a new ::page-transition pseudo-element.

2. For each transitionTag → capturedElement of transition’s tagged elements:

   1. Let container be the result of creating a new ::page-transition-container pseudo-element with the tag transitionTag.

      "tag" should be defined/linked.

   2. Append container to transitionRoot.

      This should be better defined. I’m not sure if pseudo-elements have defined ways to modify their DOM.

   3. Let width, height, transform, writingMode, and direction be null.

   4. If capturedElement’s incoming element is null, then:

      1. Set width to capturedElement’s outgoing styles width property.

      2. Set height to capturedElement’s outgoing styles height property.

      3. Set transform to capturedElement’s outgoing styles transform property.

      4. Set writingMode to capturedElement’s outgoing styles writing-mode property.

      5. Set direction to capturedElement’s outgoing styles direction property.

   5. Otherwise:

      1. Set width to the current width of capturedElement’s incoming element's border box.

      2. Set height to the current height of capturedElement’s incoming element's border box.

      3. Set transform to a transform that maps the capturedElement’s incoming element's border box from document origin to its quad in layout viewport.

      4. Set writingMode to the computed value of writing-mode on capturedElement’s incoming element.

      5. Set direction to the computed value of direction on capturedElement’s incoming element.

   6. At the user-agent origin, set container’s width, height, transform, writing-mode, and direction properties to width, height, transform, writingMode, and direction.

   7. Let imageWrapper be a new ::page-transition-image-wrapper pseudo-element with the tag transitionTag.

   8. Append imageWrapper to container.

   9. If capturedElement’s outgoing image is not null, then:

      1. Let outgoing be a new ::page-transition-outgoing-image replaced element pseudo-element, with the tag transitionTag, displaying capturedElement’s outgoing image.

      2. Append outgoing to imageWrapper.

      3. At the user-agent origin, set outgoing’s object-view-box property to capturedElement’s outgoing styles object-view-box property.

         Which of xywh()/rect()/inset() should we use?

   10. If capturedElement’s incoming element is not null, then:

       1. Let incoming be a new ::page-transition-incoming-image replaced element pseudo-element, with the tag transitionTag, displaying the capture the image of capturedElement’s incoming element.

       2. Append incoming to imageWrapper.

       3. At the user-agent origin, set incoming’s object-view-box property to a value that when applied to incoming, will cause the view box to coincide with incoming element's border box in the image.

       The incoming element and its contents (the flat tree descendants of the element, including both text and elements, or the replaced content of a replaced element), except the page-transition pseudo-elements, are not painted (as if they had visibility: hidden) and do not respond to hit-testing (as if they had pointer-events: none) until incoming exists.

1. Assert: transition’s phase is before "dom-update-callback-called".

2. Let callbackPromise be the result of invoking transition’s DOM update callback.

3. Set transition’s phase to "dom-update-callback-called".

4. React to callbackPromise:

   • If callbackPromise was fulfilled, then resolve transition’s DOM updated promise.

   • If callbackPromise was rejected with reason r, then reject transition’s DOM updated promise with r.