@@ -6861,13 +6861,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
68616861 <li><p>Return false.</p></li>
68626862 </ol>
68636863
6864- <p>Each <code>img</code> element has associated <dfn>lazy load resumption steps</dfn>, initially
6865- null.</p>
6864+ <p>Each <code>img</code> and <code>iframe</code> element has associated <dfn>lazy load resumption
6865+ steps</dfn>, initially null.</p>
68666866
6867- <p class="note">For <code>img</code> elements that <span data-x="will lazy load element
6868- steps">will lazy load</span>, this can be set to true in the <span>lazy load intersection
6869- observer</span>'s callback, which causes the image to load by continuing the <span>update the
6870- image data</span> steps.</p>
6867+ <p class="note">For <code>img</code> and <code>iframe</code> elements that <span data-x="will lazy
6868+ load element steps">will lazy load</span>, these steps are run from the <span>lazy load
6869+ intersection observer</span>'s callback or when their <span>lazy loading attribute</span> is set
6870+ to the <span data-x="attr-loading-eager-state">Eager</span> state. This causes the element to
6871+ continue loading.</p>
68716872
68726873 <p>Each <code>Document</code> has a <dfn>lazy load intersection observer</dfn>, initially set to
68736874 null but can be set to an <code>IntersectionObserver</code> instance.</p>
@@ -26112,8 +26113,9 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
2611226113 loading attribute</span>. Its purpose is to indicate the policy for loading images that are
2611326114 outside the viewport.</p>
2611426115
26115- <p>When the <code data-x="attr-img-loading">loading</code> attribute is set to the <span
26116- data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these steps:</p>
26116+ <p>When the <code data-x="attr-img-loading">loading</code> attribute's state is changed to the
26117+ <span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these
26118+ steps:</p>
2611726119
2611826120 <ol>
2611926121 <li><p>Let <var>resumptionSteps</var> be the <code>img</code> element's <span>lazy load
@@ -27914,7 +27916,7 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...</code
2791427916
2791527917 <ol>
2791627918 <li><p>Set the <code>img</code>'s <span>lazy load resumption steps</span> to the rest of this
27917- algorithm.</p></li>
27919+ algorithm starting with the step labeled <i>fetch the image</i> .</p></li>
2791827920
2791927921 <li><p><span>Start intersection-observing a lazy loading element</span> for the
2792027922 <code>img</code> element.</p></li>
@@ -27925,8 +27927,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...</code
2792527927
2792627928 <li>
2792727929 <!--FETCH-->
27928- <p><span data-x="concept-fetch">Fetch</span> <var>request</var>. Let this instance of the <span
27929- data-x="concept-fetch">fetching</span> algorithm be associated with <var>image request</var>.
27930+ <p><i>Fetch the image</i>: <span data-x="concept-fetch">Fetch</span> <var>request</var>. Let
27931+ this instance of the <span data-x="concept-fetch">fetching</span> algorithm be associated with
27932+ <var>image request</var>.
2793027933 <!-- TODO "Interaction with the Preload Scanner" from the picture spec --></p>
2793127934
2793227935 <p>The resource obtained in this fashion, if any, is <var>image request</var>'s <span
@@ -29701,6 +29704,7 @@ href="?audio">audio</a> test instead.)</p></code></pre>
2970129704 <dd><code data-x="attr-dim-width">width</code></dd>
2970229705 <dd><code data-x="attr-dim-height">height</code></dd>
2970329706 <dd><code data-x="attr-iframe-referrerpolicy">referrerpolicy</code></dd>
29707+ <dd><code data-x="attr-iframe-loading">loading</code></dd>
2970429708 <dt><span
2970529709 data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
2970629710 <dd><a href="https://w3c.github.io/html-aria/#el-iframe">For authors</a>.</dd>
@@ -29721,6 +29725,7 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
2972129725 [<span>CEReactions</span>] attribute DOMString <span data-x="dom-dim-width">width</span>;
2972229726 [<span>CEReactions</span>] attribute DOMString <span data-x="dom-dim-height">height</span>;
2972329727 [<span>CEReactions</span>] attribute DOMString <span data-x="dom-iframe-referrerPolicy">referrerPolicy</span>;
29728+ [<span>CEReactions</span>] attribute DOMString <span data-x="dom-iframe-loading">loading</span>;
2972429729 readonly attribute <span>Document</span>? <span data-x="dom-iframe-contentDocument">contentDocument</span>;
2972529730 readonly attribute <span>WindowProxy</span>? <span data-x="dom-iframe-contentWindow">contentWindow</span>;
2972629731 <span>Document</span>? <span data-x="dom-media-getSVGDocument">getSVGDocument</span>();
@@ -29887,21 +29892,48 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
2988729892 <dt>If the <code data-x="attr-iframe-srcdoc">srcdoc</code> attribute is specified</dt>
2988829893
2988929894 <dd>
29890- <p><span>Navigate</span><!--DONAV iframe--> the element's <span>nested browsing context</span>
29891- to a new <span data-x="concept-response">response</span> whose <span
29892- data-x="concept-response-url-list">url list</span> consists of <code>about:srcdoc</code>, <span
29893- data-x="concept-response-header-list">header list</span> consists of `<code
29894- data-x="">Content-Type</code>`/`<code>text/html</code>`, <span
29895- data-x="concept-response-body">body</span> is the value of the attribute, <span
29896- data-x="concept-response-csp-list">CSP list</span> is a <span data-x="list clone">clone</span>
29897- of the <code>iframe</code> element's <span>node document</span>'s <span
29898- data-x="concept-document-csp-list">CSP list</span>, <span
29899- data-x="concept-response-https-state">HTTPS state</span> is the <span
29900- data-x="concept-document-https-state">HTTPS state</span> of the <code>iframe</code> element's
29901- <span>node document</span>.
29895+ <ol>
29896+ <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
29897+ to false.</p></li>
29898+
29899+ <li>
29900+ <p>If the <span>will lazy load element steps</span> given the <code>iframe</code> element
29901+ return true, then:</p>
2990229902
29903- <p>The resulting <code>Document</code> must be considered <span>an <code>iframe</code> <code
29904- data-x="attr-iframe-srcdoc">srcdoc</code> document</span>.</p>
29903+ <ol>
29904+ <li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to the rest of
29905+ this algorithm starting with the step labeled
29906+ <i>navigate to the srcdoc resource</i>.</p></li>
29907+
29908+ <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
29909+ to true.</p></li>
29910+
29911+ <li><p><span>Start intersection-observing a lazy loading element</span> for the
29912+ <code>iframe</code> element.</p></li>
29913+
29914+ <li><p>Return.</p></li>
29915+ </ol>
29916+ </li>
29917+
29918+ <li>
29919+ <p><i>Navigate to the srcdoc resource</i>: <span>Navigate</span><!--DONAV iframe--> the
29920+ element's <span>nested browsing context</span> to a new <span
29921+ data-x="concept-response">response</span> whose <span data-x="concept-response-url-list">url
29922+ list</span> consists of <code>about:srcdoc</code>, <span
29923+ data-x="concept-response-header-list">header list</span> consists of `<code
29924+ data-x="">Content-Type</code>`/`<code>text/html</code>`, <span
29925+ data-x="concept-response-body">body</span> is the value of the attribute, <span
29926+ data-x="concept-response-csp-list">CSP list</span> is a <span data-x="list clone">clone</span>
29927+ of the <code>iframe</code> element's <span>node document</span>'s <span
29928+ data-x="concept-document-csp-list">CSP list</span>, <span
29929+ data-x="concept-response-https-state">HTTPS state</span> is the <span
29930+ data-x="concept-document-https-state">HTTPS state</span> of the <code>iframe</code> element's
29931+ <span>node document</span>.
29932+
29933+ <p>The resulting <code>Document</code> must be considered <span>an <code>iframe</code> <code
29934+ data-x="attr-iframe-srcdoc">srcdoc</code> document</span>.</p>
29935+ </li>
29936+ </ol>
2990529937 </dd>
2990629938
2990729939 <dt>Otherwise, if the element has no <code data-x="attr-iframe-src">src</code> attribute
@@ -29951,8 +29983,29 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
2995129983 element's <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code> content
2995229984 attribute.</p></li>
2995329985
29954- <li><p><span>Navigate</span><!--DONAV iframe--> the element's <span>nested browsing
29955- context</span> to <var>resource</var>.</p></li>
29986+ <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean to
29987+ false.</p></li>
29988+
29989+ <li>
29990+ <p>If the element is an <code>iframe</code> element, and the <span>will lazy load element
29991+ steps</span> given the element return true, then:</p>
29992+
29993+ <ol>
29994+ <li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to the rest of
29995+ this algorithm starting with the step labeled <i>navigate to the resource</i>.</p></li>
29996+
29997+ <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
29998+ to true.</p></li>
29999+
30000+ <li><p><span>Start intersection-observing a lazy loading element</span> for the
30001+ <code>iframe</code> element.</p></li>
30002+
30003+ <li><p>Return.</p></li>
30004+ </ol>
30005+ </li>
30006+
30007+ <li><p><i>Navigate to the resource</i>: <span>Navigate</span><!--DONAV iframe--> the element's
30008+ <span>nested browsing context</span> to <var>resource</var>.</p></li>
2995630009 </ol>
2995730010
2995830011 <p>Any <span data-x="navigate">navigation</span> required of the user agent in the <span>process
@@ -30027,7 +30080,12 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
3002730080 <var>element</var>'s <span>nested browsing context</span> is again <span
3002830081 data-x="navigate">navigated</span>, that will further <span>delay the load event</span>.</p>
3002930082
30030- <p>The <code>iframe</code> element <span>potentially delays the load event</span>.</p>
30083+ <p>Each <code>iframe</code> element has an associated <dfn>current navigation was lazy
30084+ loaded</dfn> boolean, initially false. It is set and unset in the <span>process the
30085+ <code>iframe</code> attributes</span> algorithm.</p>
30086+
30087+ <p>An <code>iframe</code> element whose <span>current navigation was lazy loaded</span> boolean is
30088+ false <span>potentially delays the load event</span>.</p>
3003130089
3003230090 </div>
3003330091
@@ -30319,6 +30377,25 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
3031930377 used when <span data-x="process the iframe attributes">processing the <code>iframe</code>
3032030378 attributes</span>. <ref spec=REFERRERPOLICY></p>
3032130379
30380+ <p>The <dfn data-x="attr-iframe-loading"><code>loading</code></dfn> attribute is a <span>lazy
30381+ loading attribute</span>. Its purpose is to indicate the policy for loading <code>iframe</code>
30382+ elements that are outside the viewport.</p>
30383+
30384+ <p>When the <code data-x="attr-iframe-loading">loading</code> attribute's state is changed to the
30385+ <span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these
30386+ steps:</p>
30387+
30388+ <ol>
30389+ <li><p>Let <var>resumptionSteps</var> be the <code>iframe</code> element's <span>lazy load
30390+ resumption steps</span>.</p></li>
30391+
30392+ <li><p>If <var>resumptionSteps</var> is null, then return.</p></li>
30393+
30394+ <li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to null.</p></li>
30395+
30396+ <li><p>Invoke <var>resumptionSteps</var>.</p></li>
30397+ </ol>
30398+
3032230399 <hr> <!-- FALLBACK -->
3032330400
3032430401 <p>Descendants of <code>iframe</code> elements represent nothing. (In legacy user agents that do
@@ -30357,6 +30434,10 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
3035730434 must <span>reflect</span> the <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code>
3035830435 content attribute, <span>limited to only known values</span>.</p>
3035930436
30437+ <p>The <dfn><code data-x="dom-iframe-loading">loading</code></dfn> IDL attribute must
30438+ <span>reflect</span> the <code data-x="attr-iframe-loading">loading</code> content attribute,
30439+ <span>limited to only known values</span>.</p>
30440+
3036030441 <p>The <dfn><code data-x="dom-iframe-contentDocument">contentDocument</code></dfn> IDL attribute,
3036130442 on getting, must return the <code>iframe</code> element's <span
3036230443 data-x="concept-bcc-content-document">content document</span>.</p>
@@ -117651,7 +117732,8 @@ interface <dfn>External</dfn> {
117651117732 <code data-x="attr-iframe-allowpaymentrequest">allowpaymentrequest</code>;
117652117733 <code data-x="attr-dim-width">width</code>;
117653117734 <code data-x="attr-dim-height">height</code>;
117654- <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code></td>
117735+ <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code>;
117736+ <code data-x="attr-iframe-loading">loading</code></td>
117655117737 <td><code>HTMLIFrameElement</code></td>
117656117738 </tr>
117657117739
@@ -119264,7 +119346,8 @@ interface <dfn>External</dfn> {
119264119346 "<code data-x="attr-img-decoding-auto">auto</code>"
119265119347 <tr>
119266119348 <th> <code data-x="">loading</code>
119267- <td> <code data-x="attr-img-loading">img</code>
119349+ <td> <code data-x="attr-img-loading">img</code>;
119350+ <code data-x="attr-iframe-loading">iframe</code>
119268119351 <td> Used when determining loading deferral
119269119352 <td> "<code data-x="attr-loading-lazy">lazy</code>";
119270119353 "<code data-x="attr-loading-eager">eager</code>"
0 commit comments