When an {{XRSession}} |session| receives updated [=viewer=] state for timestamp |frameTime| from the [=XRSession/XR device=], it runs an <dfn>XR animation frame</dfn>, which MUST run the following steps regardless of if the [=list of animation frame callbacks=] is empty or not:

1. Let |now| be the [=current high resolution time=].

1. If |session|'s [=pending render state=] is not <code>null</code>, [=apply the pending render state=].

1. If [=check the layers state=] with |session|'s {{XRSession/renderState}} is <code>false</code>, abort these steps.

1. If |session|'s [=XRSession/mode=] is {{XRSessionMode/"inline"}} and |session|'s {{XRSession/renderState}}'s [=XRRenderState/output canvas=] is <code>null</code>, abort these steps.

1. If |frame|'s {{XRFrame/session}} is not equal to |layer|'s [=XRWebGLLayer/session=], throw an {{InvalidStateError}} and abort these steps.

1. If |frame|'s [=XRFrame/active=] boolean is <code>false</code>, throw an {{InvalidStateError}} and abort these steps.

1. Let |glViewport| be the [=WebGL viewport=] from the [=list of viewports=] associated with |view|.

1. Initialize |viewport|'s {{XRViewport/x}} to |glViewport|'s <code>x</code> component.

1. Initialize |viewport|'s {{XRViewport/y}} to |glViewport|'s <code>y</code> component.

1. Initialize |viewport|'s {{XRViewport/width}} to |glViewport|'s <code>width</code>.