Add <link rel=expect> for document-level render blocking

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.

Author: noamr

source

@@ -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
@@ -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>,
@@ -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>
 
@@ -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
@@ -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
@@ -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>
@@ -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") -->
@@ -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
@@ -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>