Skip to content

Commit

Permalink
Add <link rel=expect> for document-level render blocking
Browse files Browse the repository at this point in the history 
The main use case for this is delaying a cross-document view transition for a short period of time to let the new document be more ready.

Explainer: https://github.com/WICG/view-transitions/blob/link-proposal/document-render-blocking.md#blocking-element-id

Closes #9332.
  • Loading branch information
@noamr
noamr authored Feb 27, 2024
1 parent 9d22133 commit bcb3b9a
Showing 1 changed file with 165 additions and 8 deletions.
173 changes: 165 additions & 8 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1789,6 +1789,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><p><span>Reset the form owner</span> of the <span>form-associated element</span>.</p></li>
</ol>
</li>

<li><p>If <var>insertedNode</var> is an <code>Element</code> that is not on the
<span>stack of open elements</span> of an <span>HTML parser</span>, then
<span>process internal resource links</span> given <var>insertedNode</var>'s
<span>node document</span>.</p></li>
</ol>

<p>The <span data-x="concept-node-remove-ext">removing steps</span> for the HTML Standard, given
Expand Down Expand Up @@ -15162,6 +15167,7 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
data-x="concept-supported-tokens">supported tokens</span> are
<code data-x="rel-alternate">alternate</code>,
<code data-x="rel-dns-prefetch">dns-prefetch</code>,
<code data-x="rel-expect">expect</code>,
<code data-x="rel-icon">icon</code>,
<code data-x="rel-manifest">manifest</code>,
<code data-x="rel-modulepreload">modulepreload</code>,
Expand Down Expand Up @@ -15415,9 +15421,10 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
<hr>

<p>The <dfn element-attr for="link"><code data-x="attr-link-blocking">blocking</code></dfn>
attribute is a <span>blocking attribute</span>. It is used by link type <code
data-x="rel-stylesheet">stylesheet</code>, and it must only be specified on link elements
that have a <code data-x="attr-link-rel">rel</code> attribute containing that keyword.</p>
attribute is a <span>blocking attribute</span>. It is used by link types <code
data-x="rel-stylesheet">stylesheet</code> and <code
data-x="rel-expect">expect</code>, and it must only be specified on link elements
that have a <code data-x="attr-link-rel">rel</code> attribute containing those keywords.</p>

<hr>

Expand Down Expand Up @@ -24589,7 +24596,7 @@ document.body.appendChild(wbr);</code></pre>
<p>Links are a conceptual construct, created by <code>a</code>, <code>area</code>,
<code>form</code>, and <code>link</code> elements, that <span data-x="represents">represent</span>
a connection between two resources, one of which is the current <code>Document</code>. There are
two kinds of links in HTML:</p>
three kinds of links in HTML:</p>

<dl>
<dt><dfn data-x="external resource link" data-lt="external resource link" export>Links to
Expand All @@ -24605,6 +24612,11 @@ document.body.appendChild(wbr);</code></pre>
<dd><p>These are links to other resources that are generally exposed to the user by the user
agent so that the user can cause the user agent to <span>navigate</span> to those resources, e.g.
to visit them in a browser or download them.</p></dd>

<dt><dfn data-x="Internal resource link" export>Internal resource links</dfn></dt>

<dd><p>These are links to resources within the current document, used to give those resources
special meaning or behavior.</p></dd>
</dl>

<p>For <code>link</code> elements with an <code data-x="attr-link-href">href</code> attribute and a
Expand Down Expand Up @@ -25885,6 +25897,15 @@ document.body.appendChild(wbr);</code></pre>
<td>Specifies that the user agent should preemptively perform DNS resolution for the target resource's <span>origin</span>.</td>
</tr>

<tr>
<td><code data-x="rel-expect">expect</code></td>
<td><span data-x="internal resource link">Internal Resource</span></td>
<td colspan="2"><em>not allowed</em></td>
<td class="no"> &middot; </td>
<td class="no"> &middot; </td>
<td>Expect an element with the target ID to appear in the current document.</td>
</tr>

<tr>
<td><code data-x="rel-external">external</code></td>
<td><em>not allowed</em></td>
Expand Down Expand Up @@ -26344,6 +26365,128 @@ document.body.appendChild(wbr);</code></pre>
</ol>


<h5>Link type "<dfn attr-value for="link/rel"><code data-x="rel-expect">expect</code></dfn>"</h5>

<p>The <code data-x="rel-expect">expect</code> keyword may be used with <code>link</code>
elements. This keyword creates an <span data-x="internal resource link">internal resource
link</span>.</p>

<p>The <code data-x="rel-expect">expect</code> keyword indicates that an element with a certain
<span data-x="concept-id">ID</span> is expected in this document, and the link might
<span>block rendering</span> until that element's closing tag is parsed.</p>

<p>There is no default type for resources given by the <code data-x="rel-expect">expect</code>
keyword.</p>

<p>Whenever the following conditions occur for a <code>link</code> element <var>el</var>:</p>

<ul>
<li><p>the <code data-x="rel-expect">expect</code> <span>internal resource link</span> is created
on <var>el</var> that is already <span>browsing-context connected</span>;</p></li>

<li><p>an <code data-x="rel-expect">expect</code> <span>internal resource link</span> has been
created on <var>el</var> and <var>el</var> becomes
<span>browsing-context connected</span>;</p></li>

<li><p>an <code data-x="rel-expect">expect</code><span>internal resource link</span> has been
created on <var>el</var>, <var>el</var> is already <span>browsing-context connected</span>, and
<var>el</var>'s <code data-x="attr-link-href">href</code> attribute is set, changed, or removed;
or</p></li>

<li><p>an <code data-x="rel-expect">expect</code> <span>internal resource link</span> has been
created on <var>el</var>, <var>el</var> is already <span>browsing-context connected</span>, and
<var>el</var>'s <code data-x="attr-link-media">media</code> attribute is set, changed, or
removed,</p></li>
</ul>

<p>then <span data-x="process internal resource link">process</span> <var>el</var>.</p>

<p>To <dfn>process internal resource link</dfn> given a <code>link</code> element <var>el</var>,
run these steps:</p>

<ol>
<li><p>Let <var>doc</var> be <var>el</var>'s <span>node document</span>.</p></li>

<li><p>Let <var>url</var> be the result of <span>encoding-parsing a URL</span> given
<var>el</var>'s <code data-x="attr-link-href">href</code> attribute's value, relative to
<var>doc</var>.</p></li>

<li><p>If this fails, or if <var>url</var> does not <span
data-x="concept-url-equals">equal</span> <var>doc</var>'s
<span data-x="concept-document-url">URL</span> with <i data-x="url equals exclude
fragments">exclude fragments</i> set to false, then <span>unblock rendering</span> on
<var>el</var> and return.</p></li>

<li><p>Let <var>indicatedElement</var> be the result of <span
data-x="select the indicated part">selecting the indicated part</span> given <var>doc</var>
and <var>url</var>.</p></li>

<li>
<p>If all of the following are true:</p>

<ul>
<li><p><var>doc</var>'s <span>current document readiness</span> is "<code
data-x="">loading</code>";</p></li>

<li><p><var>el</var> creates an <span>internal resource link</span>;</p></li>

<li><p><var>el</var> is <span>browsing-context connected</span>;</p></li>

<li><p><var>el</var>'s <code data-x="attr-link-rel">rel</code> attribute
contains <code data-x="rel-expect">expect</code>;</p></li>

<li><p><var>el</var> is <span>potentially render-blocking</span>;</p></li>

<li><p><var>el</var>'s <code data-x="attr-link-media">media</code> attribute
<span>matches the environment</span>; and</p></li>

<li><p><var>indicatedElement</var> is not an element, or is on a
<span>stack of open elements</span> of an <span>HTML parser</span> whose associated
<code>Document</code> is <var>doc</var>,</p></li>
</ul>

<p>then <span>block rendering</span> on <var>el</var>.</p>
</li>

<li><p>Otherwise, <span>unblock rendering</span> on <var>el</var>.</p></li>
</ol>

<p>To <dfn>process internal resource links</dfn> given a <code>Document</code> <var>doc</var>:</p>

<ol>
<li><p><span data-x="list iterate">For each</span> <code
data-x="rel-expect">expect</code> <code>link</code> element <var>link</var> in
<var>doc</var>'s <span>render-blocking element set</span>, <span
data-x="process internal resource link">process</span> <var>link</var>.</p></li>
</ol>

<p>The following <span
data-x="concept-element-attributes-change-ext">attribute change steps</span>, given
<var>element</var>, <var>localName</var>, <var>value</var>, and <var>namespace</var>, are used to
ensure <code data-x="rel-expect">expect</code> <code>link</code> elements respond to dynamic <code
data-x="attr-id">id</code> and <code data-x="attr-a-name">name</code> changes:</p>

<ol>
<li><p>If <var>namespace</var> is not null, then return.</p></li>

<li><p>If <var>element</var> is in a <span>stack of open elements</span> of an
<span>HTML parser</span>, then return.</p></li>

<li>
<p>If any of the following is true:</p>

<ul>
<li><p><var>localName</var> is <code data-x="attr-id">id</code>; or</p></li>

<li><p><var>localName</var> is <code
data-x="attr-a-name">name</code> and <var>element</var> is an <code>a</code> element,</p></li>
</ul>

<p>then <span>process internal resource links</span> given <var>element</var>'s
<span>node document</span>.</p>
</li>
</ol>

<h5>Link type "<dfn attr-value for="a/rel,area/rel,form/rel"><code
data-x="rel-external">external</code></dfn>"</h5>
<!-- fifth and sixth most used <a rel> value (sixth is "external nofollow") -->
Expand Down Expand Up @@ -102354,12 +102497,22 @@ location.href = '#foo';</code></pre>
defining the <code data-x="selector-target">:target</code> pseudo-class and is updated by the
above algorithm. It is initially null.</p>

<p>For an <span data-x="HTML documents">HTML document</span> <var>document</var>, the following
processing model must be followed to determine its <span>indicated part</span>:</p>
<p>For an <span data-x="HTML documents">HTML document</span> <var>document</var>, its
<span>indicated part</span> is the result
of <span data-x="select the indicated part">selecting the indicated part</span> given
<var>document</var> and <var>document</var>'s <span
data-x="concept-document-url">URL</span>.</p>

<p>To <dfn>select the indicated part</dfn> given a <code>Document</code> <var>document</var> and a
<span>URL</span> <var>url</var>:</p>

<ol>
<li><p>Let <var>fragment</var> be <var>document</var>'s <span
data-x="concept-document-url">URL</span>'s <span
<li><p>If <var>document</var>'s <span
data-x="concept-document-url">URL</span> does not <span data-x="concept-url-equals">equal</span>
<var>url</var> with <i data-x="url equals exclude fragments">exclude fragments</i> set to
true, then return null.</p></li>

<li><p>Let <var>fragment</var> be <var>url</var>'s <span
data-x="concept-url-fragment">fragment</span>.</p></li>

<li><p>If <var>fragment</var> is the empty string, then return the special value <dfn>top of the
Expand Down Expand Up @@ -122818,6 +122971,10 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
the <span>stack of open elements</span> has only one element in it (<span>fragment case</span>);
otherwise, the <span>adjusted current node</span> is the <span>current node</span>.</p>

<p>When the <span>current node</span> is removed from the <span>stack of open elements</span>,
<span>process internal resource links</span> given the <span>current node</span>'s
<span>node document</span>.</p>

<p>Elements in the <span>stack of open elements</span> fall into the following categories:</p>

<dl>
Expand Down

0 comments on commit bcb3b9a

Please sign in to comment.