Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commitbcb3b9a

Browse files
authored
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-idCloses#9332.
1 parent9d22133 commitbcb3b9a

File tree

1 file changed

+165
-8
lines changed

1 file changed

+165
-8
lines changed

‎source

Lines changed: 165 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1789,6 +1789,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
17891789
<li><p><span>Reset the form owner</span> of the <span>form-associated element</span>.</p></li>
17901790
</ol>
17911791
</li>
1792+
1793+
<li><p>If <var>insertedNode</var> is an <code>Element</code> that is not on the
1794+
<span>stack of open elements</span> of an <span>HTML parser</span>, then
1795+
<span>process internal resource links</span> given <var>insertedNode</var>'s
1796+
<span>node document</span>.</p></li>
17921797
</ol>
17931798

17941799
<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> {
1516215167
data-x="concept-supported-tokens">supported tokens</span> are
1516315168
<code data-x="rel-alternate">alternate</code>,
1516415169
<code data-x="rel-dns-prefetch">dns-prefetch</code>,
15170+
<code data-x="rel-expect">expect</code>,
1516515171
<code data-x="rel-icon">icon</code>,
1516615172
<code data-x="rel-manifest">manifest</code>,
1516715173
<code data-x="rel-modulepreload">modulepreload</code>,
@@ -15415,9 +15421,10 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
1541515421
<hr>
1541615422

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

1542215429
<hr>
1542315430

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

2459424601
<dl>
2459524602
<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>
2460524612
<dd><p>These are links to other resources that are generally exposed to the user by the user
2460624613
agent so that the user can cause the user agent to <span>navigate</span> to those resources, e.g.
2460724614
to visit them in a browser or download them.</p></dd>
24615+
24616+
<dt><dfn data-x="Internal resource link" export>Internal resource links</dfn></dt>
24617+
24618+
<dd><p>These are links to resources within the current document, used to give those resources
24619+
special meaning or behavior.</p></dd>
2460824620
</dl>
2460924621

2461024622
<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>
2588525897
<td>Specifies that the user agent should preemptively perform DNS resolution for the target resource's <span>origin</span>.</td>
2588625898
</tr>
2588725899

25900+
<tr>
25901+
<td><code data-x="rel-expect">expect</code></td>
25902+
<td><span data-x="internal resource link">Internal Resource</span></td>
25903+
<td colspan="2"><em>not allowed</em></td>
25904+
<td class="no"> &middot; </td>
25905+
<td class="no"> &middot; </td>
25906+
<td>Expect an element with the target ID to appear in the current document.</td>
25907+
</tr>
25908+
2588825909
<tr>
2588925910
<td><code data-x="rel-external">external</code></td>
2589025911
<td><em>not allowed</em></td>
@@ -26344,6 +26365,128 @@ document.body.appendChild(wbr);</code></pre>
2634426365
</ol>
2634526366

2634626367

26368+
<h5>Link type "<dfn attr-value for="link/rel"><code data-x="rel-expect">expect</code></dfn>"</h5>
26369+
26370+
<p>The <code data-x="rel-expect">expect</code> keyword may be used with <code>link</code>
26371+
elements. This keyword creates an <span data-x="internal resource link">internal resource
26372+
link</span>.</p>
26373+
26374+
<p>The <code data-x="rel-expect">expect</code> keyword indicates that an element with a certain
26375+
<span data-x="concept-id">ID</span> is expected in this document, and the link might
26376+
<span>block rendering</span> until that element's closing tag is parsed.</p>
26377+
26378+
<p>There is no default type for resources given by the <code data-x="rel-expect">expect</code>
26379+
keyword.</p>
26380+
26381+
<p>Whenever the following conditions occur for a <code>link</code> element <var>el</var>:</p>
26382+
26383+
<ul>
26384+
<li><p>the <code data-x="rel-expect">expect</code> <span>internal resource link</span> is created
26385+
on <var>el</var> that is already <span>browsing-context connected</span>;</p></li>
26386+
26387+
<li><p>an <code data-x="rel-expect">expect</code> <span>internal resource link</span> has been
26388+
created on <var>el</var> and <var>el</var> becomes
26389+
<span>browsing-context connected</span>;</p></li>
26390+
26391+
<li><p>an <code data-x="rel-expect">expect</code><span>internal resource link</span> has been
26392+
created on <var>el</var>, <var>el</var> is already <span>browsing-context connected</span>, and
26393+
<var>el</var>'s <code data-x="attr-link-href">href</code> attribute is set, changed, or removed;
26394+
or</p></li>
26395+
26396+
<li><p>an <code data-x="rel-expect">expect</code> <span>internal resource link</span> has been
26397+
created on <var>el</var>, <var>el</var> is already <span>browsing-context connected</span>, and
26398+
<var>el</var>'s <code data-x="attr-link-media">media</code> attribute is set, changed, or
26399+
removed,</p></li>
26400+
</ul>
26401+
26402+
<p>then <span data-x="process internal resource link">process</span> <var>el</var>.</p>
26403+
26404+
<p>To <dfn>process internal resource link</dfn> given a <code>link</code> element <var>el</var>,
26405+
run these steps:</p>
26406+
26407+
<ol>
26408+
<li><p>Let <var>doc</var> be <var>el</var>'s <span>node document</span>.</p></li>
26409+
26410+
<li><p>Let <var>url</var> be the result of <span>encoding-parsing a URL</span> given
26411+
<var>el</var>'s <code data-x="attr-link-href">href</code> attribute's value, relative to
26412+
<var>doc</var>.</p></li>
26413+
26414+
<li><p>If this fails, or if <var>url</var> does not <span
26415+
data-x="concept-url-equals">equal</span> <var>doc</var>'s
26416+
<span data-x="concept-document-url">URL</span> with <i data-x="url equals exclude
26417+
fragments">exclude fragments</i> set to false, then <span>unblock rendering</span> on
26418+
<var>el</var> and return.</p></li>
26419+
26420+
<li><p>Let <var>indicatedElement</var> be the result of <span
26421+
data-x="select the indicated part">selecting the indicated part</span> given <var>doc</var>
26422+
and <var>url</var>.</p></li>
26423+
26424+
<li>
26425+
<p>If all of the following are true:</p>
26426+
26427+
<ul>
26428+
<li><p><var>doc</var>'s <span>current document readiness</span> is "<code
26429+
data-x="">loading</code>";</p></li>
26430+
26431+
<li><p><var>el</var> creates an <span>internal resource link</span>;</p></li>
26432+
26433+
<li><p><var>el</var> is <span>browsing-context connected</span>;</p></li>
26434+
26435+
<li><p><var>el</var>'s <code data-x="attr-link-rel">rel</code> attribute
26436+
contains <code data-x="rel-expect">expect</code>;</p></li>
26437+
26438+
<li><p><var>el</var> is <span>potentially render-blocking</span>;</p></li>
26439+
26440+
<li><p><var>el</var>'s <code data-x="attr-link-media">media</code> attribute
26441+
<span>matches the environment</span>; and</p></li>
26442+
26443+
<li><p><var>indicatedElement</var> is not an element, or is on a
26444+
<span>stack of open elements</span> of an <span>HTML parser</span> whose associated
26445+
<code>Document</code> is <var>doc</var>,</p></li>
26446+
</ul>
26447+
26448+
<p>then <span>block rendering</span> on <var>el</var>.</p>
26449+
</li>
26450+
26451+
<li><p>Otherwise, <span>unblock rendering</span> on <var>el</var>.</p></li>
26452+
</ol>
26453+
26454+
<p>To <dfn>process internal resource links</dfn> given a <code>Document</code> <var>doc</var>:</p>
26455+
26456+
<ol>
26457+
<li><p><span data-x="list iterate">For each</span> <code
26458+
data-x="rel-expect">expect</code> <code>link</code> element <var>link</var> in
26459+
<var>doc</var>'s <span>render-blocking element set</span>, <span
26460+
data-x="process internal resource link">process</span> <var>link</var>.</p></li>
26461+
</ol>
26462+
26463+
<p>The following <span
26464+
data-x="concept-element-attributes-change-ext">attribute change steps</span>, given
26465+
<var>element</var>, <var>localName</var>, <var>value</var>, and <var>namespace</var>, are used to
26466+
ensure <code data-x="rel-expect">expect</code> <code>link</code> elements respond to dynamic <code
26467+
data-x="attr-id">id</code> and <code data-x="attr-a-name">name</code> changes:</p>
26468+
26469+
<ol>
26470+
<li><p>If <var>namespace</var> is not null, then return.</p></li>
26471+
26472+
<li><p>If <var>element</var> is in a <span>stack of open elements</span> of an
26473+
<span>HTML parser</span>, then return.</p></li>
26474+
26475+
<li>
26476+
<p>If any of the following is true:</p>
26477+
26478+
<ul>
26479+
<li><p><var>localName</var> is <code data-x="attr-id">id</code>; or</p></li>
26480+
26481+
<li><p><var>localName</var> is <code
26482+
data-x="attr-a-name">name</code> and <var>element</var> is an <code>a</code> element,</p></li>
26483+
</ul>
26484+
26485+
<p>then <span>process internal resource links</span> given <var>element</var>'s
26486+
<span>node document</span>.</p>
26487+
</li>
26488+
</ol>
26489+
2634726490
<h5>Link type "<dfn attr-value for="a/rel,area/rel,form/rel"><code
2634826491
data-x="rel-external">external</code></dfn>"</h5>
2634926492
<!-- fifth and sixth most used <a rel> value (sixth is "external nofollow") -->
@@ -102354,12 +102497,22 @@ location.href = '#foo';</code></pre>
102354102497
defining the <code data-x="selector-target">:target</code> pseudo-class and is updated by the
102355102498
above algorithm. It is initially null.</p>
102356102499

102357-
<p>For an <span data-x="HTML documents">HTML document</span> <var>document</var>, the following
102358-
processing model must be followed to determine its <span>indicated part</span>:</p>
102500+
<p>For an <span data-x="HTML documents">HTML document</span> <var>document</var>, its
102501+
<span>indicated part</span> is the result
102502+
of <span data-x="select the indicated part">selecting the indicated part</span> given
102503+
<var>document</var> and <var>document</var>'s <span
102504+
data-x="concept-document-url">URL</span>.</p>
102505+
102506+
<p>To <dfn>select the indicated part</dfn> given a <code>Document</code> <var>document</var> and a
102507+
<span>URL</span> <var>url</var>:</p>
102359102508

102360102509
<ol>
102361-
<li><p>Let <var>fragment</var> be <var>document</var>'s <span
102362-
data-x="concept-document-url">URL</span>'s <span
102510+
<li><p>If <var>document</var>'s <span
102511+
data-x="concept-document-url">URL</span> does not <span data-x="concept-url-equals">equal</span>
102512+
<var>url</var> with <i data-x="url equals exclude fragments">exclude fragments</i> set to
102513+
true, then return null.</p></li>
102514+
102515+
<li><p>Let <var>fragment</var> be <var>url</var>'s <span
102363102516
data-x="concept-url-fragment">fragment</span>.</p></li>
102364102517

102365102518
<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> {
122818122971
the <span>stack of open elements</span> has only one element in it (<span>fragment case</span>);
122819122972
otherwise, the <span>adjusted current node</span> is the <span>current node</span>.</p>
122820122973

122974+
<p>When the <span>current node</span> is removed from the <span>stack of open elements</span>,
122975+
<span>process internal resource links</span> given the <span>current node</span>'s
122976+
<span>node document</span>.</p>
122977+
122821122978
<p>Elements in the <span>stack of open elements</span> fall into the following categories:</p>
122822122979

122823122980
<dl>

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp