Skip to content

Commit

Permalink
Add pagereveal event
Browse files Browse the repository at this point in the history 
The pagereveal event is fired at the beginning of the first rendering opportunity after activation (initial load or reactivation). It is a way for the author to execute some JS that affects the presentation "just in time" for the first frame.

If there is an inbound cross-document view transition, the reveal event holds a reference to the ViewTransition object.

Closes #9315.
  • Loading branch information
@noamr
noamr authored Dec 15, 2023
1 parent da3a62e commit 6bc6e2d
Showing 1 changed file with 87 additions and 1 deletion.
88 changes: 87 additions & 1 deletion source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4022,12 +4022,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-values/#math-function">math functions</dfn></li>
</ul>

<p>The following features are defined in <cite>CSS View Transitions 1</cite>:
<p>The following features are defined in <cite>CSS View Transitions</cite>:
<ref>CSSVIEWTRANSITIONS</ref></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#perform-pending-transition-operations">perform pending transition operations</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#document-rendering-suppression-for-view-transitions">rendering suppression for view transitions</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#activate-view-transition">activate view transition</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions/#viewtransition"><code>ViewTransition</code></dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-view-transitions-2/#document-resolve-cross-document-view-transition">resolving cross-document view-transition</dfn></li>
</ul>

<p>The term <dfn data-x="css-styling-attribute"
Expand Down Expand Up @@ -94506,6 +94509,35 @@ dictionary <dfn dictionary>HashChangeEventInit</dfn> : <span>EventInit</span> {
</div>


<h5>The <code>PageRevealEvent</code> interface</h5>

<pre><code class="idl">[Exposed=Window]
interface <dfn interface>PageRevealEvent</dfn> : <span>Event</span> {
constructor(DOMString type, optional <span>PageRevealEventInit</span> eventInitDict = {});
readonly attribute <code>ViewTransition</code>? <span data-x="dom-PageRevealEvent-viewTransition">viewTransition</span>;
};

dictionary <dfn dictionary>PageRevealEventInit</dfn> : <span>EventInit</span> {
<code>ViewTransition</code>? <dfn dict-member for="PageRevealEventInit" data-x="dom-PageRevealEventInit-viewTransition">viewTransition</dfn> = null;
};</code></pre>

<dl class="domintro">
<dt><code data-x=""><var>event</var>.<span subdfn data-x="dom-PageRevealEvent-viewTransition">viewTransition</span></code></dt>
<dd>
<p>Returns the <code>ViewTransition</code> object that represents an inbound cross-document view
transition, if such transition is active when the event is fired. Otherwise, returns null.</p>
</dd>
</dl>

<div w-nodev>

<p>The <dfn attribute for="PageRevealEvent"><code
data-x="dom-PageRevealEvent-viewTransition">viewTransition</code></dfn> attribute must return the
value it was initialized to.</p>

</div>


<h5>The <code>PageTransitionEvent</code> interface</h5>

<pre><code class="idl">[Exposed=Window]
Expand Down Expand Up @@ -101417,6 +101449,8 @@ location.href = '#foo';</code></pre>
<ol>
<li><p>Set <var>document</var>'s <span>page showing</span> flag to true.</p></li>

<li><p>Set <var>document</var>'s <span>has been revealed</span> to false.</p>

<li><p><span>Update the visibility state</span> of <var>document</var> to "<code
data-x="">visible</code>".</p></li>

Expand Down Expand Up @@ -101458,6 +101492,40 @@ location.href = '#foo';</code></pre>
</ol>


<h5>Revealing the document</h5>

<p>A <code>Document</code> has a boolean <dfn>has been revealed</dfn>, initially false. It is used
to ensure that the <code data-x="event-pagereveal">pagereveal</code> event is fired once for each
activation of the <code>Document</code> (once when it's rendered initially, and once for each
<span data-x="reactivate a document">reactivation</span>).</p>

<p>To <dfn>reveal</dfn> a <code>Document</code> <var>document</var>:</p>

<ol>
<li><p>If <var>document</var>'s <span>has been revealed</span> is true, then return.</p></li>

<li><p>Set <var>document</var>'s <span>has been revealed</span> to true.</p></li>

<li><p>Let <var>transition</var> be the result of
<span>resolving cross-document view-transition</span> for <var>document</var>.</p></li>

<li><p><span data-x="concept-event-fire">Fire an event</span> named
<code data-x="event-pagereveal">pagereveal</code> at <var>document</var>'s
<span>relevant global object</span>, using <code>PageRevealEvent</code> with its <code
data-x="dom-PageRevealEvent-viewTransition">viewTransition</code> set to
<var>transition</var>.</p></li>

<li><p>If <var>transition</var> is not null, then <span
data-x="activate view transition">activate</span> <var>transition</var>.</p></li>
</ol>

<p class="note">Though <code data-x="event-pagereveal">pagereveal</code> is guaranteed to be fired
during the first <span>update the rendering</span> step that displays an up-to-date version of the
page, user agents are free to display a cached frame of the page before firing it. This prevents
the presence of a <code data-x="event-pagereveal">pagereveal</code> handler from delaying the
presentation of such cached frame.</p>


<h5>Scrolling to a fragment</h5>

<p>To <dfn id="scroll-to-the-fragment-identifier">scroll to the fragment</dfn> given a
Expand Down Expand Up @@ -108146,6 +108214,9 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
</div>
</li>

<li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>,
<span>reveal</span> that <code>Document</code>.</p></li>

<li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>flush
autofocus candidates</span> for that <code>Document</code> if its <span>node navigable</span>
is a <span>top-level traversable</span>.</p></li>
Expand Down Expand Up @@ -109880,6 +109951,7 @@ typedef <span>OnBeforeUnloadEventHandlerNonNull</span>? <dfn typedef>OnBeforeUnl
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onoffline">onoffline</code></dfn> <td> <code data-x="event-offline">offline</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-ononline">ononline</code></dfn> <td> <code data-x="event-online">online</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpagehide">onpagehide</code></dfn> <td> <code data-x="event-pagehide">pagehide</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpagereveal">onpagereveal</code></dfn> <td> <code data-x="event-pagereveal">pagereveal</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpageshow">onpageshow</code></dfn> <td> <code data-x="event-pageshow">pageshow</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onpopstate">onpopstate</code></dfn> <td> <code data-x="event-popstate">popstate</code> <!-- new -->
<tr><td><dfn attribute for="WindowEventHandlers"><code data-x="handler-window-onrejectionhandled">onrejectionhandled</code></dfn> <td> <code data-x="event-rejectionhandled">rejectionhandled</code>
Expand Down Expand Up @@ -110007,6 +110079,7 @@ interface mixin <dfn interface>WindowEventHandlers</dfn> {
attribute <span>EventHandler</span> <span data-x="handler-window-onoffline">onoffline</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-ononline">ononline</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpagehide">onpagehide</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpagereveal">onpagereveal</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpageshow">onpageshow</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onpopstate">onpopstate</span>;
attribute <span>EventHandler</span> <span data-x="handler-window-onrejectionhandled">onrejectionhandled</span>;
Expand Down Expand Up @@ -138999,6 +139072,12 @@ interface <dfn interface>External</dfn> {
<td> <code data-x="event-pagehide">pagehide</code> event handler for <code>Window</code> object
<td> <span data-x="event handler content attributes">Event handler content attribute</span>

<tr>
<th id="ix-handler-window-onpagereveal"> <code data-x="">onpagereveal</code>
<td> <code data-x="handler-window-onpagereveal">body</code>
<td> <code data-x="event-pagereveal">pagereveal</code> event handler for <code>Window</code> object
<td> <span data-x="event handler content attributes">Event handler content attribute</span>

<tr>
<th id="ix-handler-window-onpageshow"> <code data-x="">onpageshow</code>
<td> <code data-x="handler-window-onpageshow">body</code>
Expand Down Expand Up @@ -139869,6 +139948,13 @@ INSERT INTERFACES HERE
<td> Fired at the <code>Window</code> when the page's <span>session history entry</span> stops
being the <span data-x="nav-active-history-entry">active entry</span>

<tr> <!-- pagereveal -->
<td> <dfn event for="Window"><code data-x="event-pagereveal">pagereveal</code></dfn>
<td> <code>PageRevealEvent</code>
<td> <code>Window</code>
<td> Fired at the <code>Window</code> when the page begins to render for the first time after
it has been initialized or <span data-x="reactivate a document">reactivated</span>

<tr> <!-- pageshow -->
<td> <dfn event for="Window"><code data-x="event-pageshow">pageshow</code></dfn>
<td> <code>PageTransitionEvent</code>
Expand Down

1 comment on commit 6bc6e2d

@mtrootyy
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#9995

Please sign in to comment.