Add <iframe> lazyloading

Fixes whatwg#5496.

Author: domfarolino

source

@@ -6866,13 +6866,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <li><p>Return false.</p></li>
   </ol>
 
-  <p>Each <code>img</code> element has associated <dfn>lazy load resumption steps</dfn>, initially
-  null.</p>
+  <p>Each <code>img</code> and <code>iframe</code> element has associated <dfn>lazy load resumption
+  steps</dfn>, initially null.</p>
 
-  <p class="note">For <code>img</code> elements that <span data-x="will lazy load element
-  steps">will lazy load</span>, this can be set to true in the <span>lazy load intersection
-  observer</span>'s callback, which causes the image to load by continuing the <span>update the
-  image data</span> steps.</p>
+  <p class="note">For <code>img</code> and <code>iframe</code> elements that <span data-x="will lazy
+  load element steps">will lazy load</span>, these steps are run from the <span>lazy load
+  intersection observer</span>'s callback or when their <span>lazy loading attribute</span> is set
+  to the <span data-x="attr-loading-eager-state">Eager</span> state. This causes the element to
+  continue loading.</p>
 
   <p>Each <code>Document</code> has a <dfn>lazy load intersection observer</dfn>, initially set to
   null but can be set to an <code>IntersectionObserver</code> instance.</p>
@@ -26117,8 +26118,9 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   loading attribute</span>. Its purpose is to indicate the policy for loading images that are
   outside the viewport.</p>
 
-  <p>When the <code data-x="attr-img-loading">loading</code> attribute is set to the <span
-  data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these steps:</p>
+  <p>When the <code data-x="attr-img-loading">loading</code> attribute's state is changed to the
+  <span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these
+  steps:</p>
 
   <ol>
    <li><p>Let <var>resumptionSteps</var> be the <code>img</code> element's <span>lazy load
@@ -27919,7 +27921,7 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
     <ol>
      <li><p>Set the <code>img</code>'s <span>lazy load resumption steps</span> to the rest of this
-     algorithm.</p></li>
+     algorithm starting with the step labeled <i>fetch the image</i>.</p></li>
 
      <li><p><span>Start intersection-observing a lazy loading element</span> for the
      <code>img</code> element.</p></li>
@@ -27930,8 +27932,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
    <li>
     <!--FETCH-->
-    <p><span data-x="concept-fetch">Fetch</span> <var>request</var>. Let this instance of the <span
-    data-x="concept-fetch">fetching</span> algorithm be associated with <var>image request</var>.
+    <p><i>Fetch the image</i>: <span data-x="concept-fetch">Fetch</span> <var>request</var>. Let
+    this instance of the <span data-x="concept-fetch">fetching</span> algorithm be associated with
+    <var>image request</var>.
     <!-- TODO "Interaction with the Preload Scanner" from the picture spec --></p>
 
     <p>The resource obtained in this fashion, if any, is <var>image request</var>'s <span
@@ -29706,6 +29709,7 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></code></pre>
    <dd><code data-x="attr-dim-width">width</code></dd>
    <dd><code data-x="attr-dim-height">height</code></dd>
    <dd><code data-x="attr-iframe-referrerpolicy">referrerpolicy</code></dd>
+   <dd><code data-x="attr-iframe-loading">loading</code></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
    <dd><a href="https://w3c.github.io/html-aria/#el-iframe">For authors</a>.</dd>
@@ -29726,6 +29730,7 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-dim-width">width</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-dim-height">height</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-iframe-referrerPolicy">referrerPolicy</span>;
+  [<span>CEReactions</span>] attribute DOMString <span data-x="dom-iframe-loading">loading</span>;
   readonly attribute <span>Document</span>? <span data-x="dom-iframe-contentDocument">contentDocument</span>;
   readonly attribute <span>WindowProxy</span>? <span data-x="dom-iframe-contentWindow">contentWindow</span>;
   <span>Document</span>? <span data-x="dom-media-getSVGDocument">getSVGDocument</span>();
@@ -29892,21 +29897,48 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
    <dt>If the <code data-x="attr-iframe-srcdoc">srcdoc</code> attribute is specified</dt>
 
    <dd>
-    <p><span>Navigate</span><!--DONAV iframe--> the element's <span>nested browsing context</span>
-    to a new <span data-x="concept-response">response</span> whose <span
-    data-x="concept-response-url-list">url list</span> consists of <code>about:srcdoc</code>, <span
-    data-x="concept-response-header-list">header list</span> consists of `<code
-    data-x="">Content-Type</code>`/`<code>text/html</code>`, <span
-    data-x="concept-response-body">body</span> is the value of the attribute, <span
-    data-x="concept-response-csp-list">CSP list</span> is a <span data-x="list clone">clone</span>
-    of the <code>iframe</code> element's <span>node document</span>'s <span
-    data-x="concept-document-csp-list">CSP list</span>, <span
-    data-x="concept-response-https-state">HTTPS state</span> is the <span
-    data-x="concept-document-https-state">HTTPS state</span> of the <code>iframe</code> element's
-    <span>node document</span>.
+    <ol>
+     <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
+     to false.</p></li>
+
+     <li>
+      <p>If the <span>will lazy load element steps</span> given the <code>iframe</code> element
+      return true, then:</p>
 
-    <p>The resulting <code>Document</code> must be considered <span>an <code>iframe</code> <code
-    data-x="attr-iframe-srcdoc">srcdoc</code> document</span>.</p>
+      <ol>
+       <li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to the rest of
+       this algorithm starting with the step labeled
+       <i>navigate to the srcdoc resource</i>.</p></li>
+
+       <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
+       to true.</p></li>
+
+       <li><p><span>Start intersection-observing a lazy loading element</span> for the
+       <code>iframe</code> element.</p></li>
+
+       <li><p>Return.</p></li>
+      </ol>
+     </li>
+
+     <li>
+      <p><i>Navigate to the srcdoc resource</i>: <span>Navigate</span><!--DONAV iframe--> the
+      element's <span>nested browsing context</span> to a new <span
+      data-x="concept-response">response</span> whose <span data-x="concept-response-url-list">url
+      list</span> consists of <code>about:srcdoc</code>, <span
+      data-x="concept-response-header-list">header list</span> consists of `<code
+      data-x="">Content-Type</code>`/`<code>text/html</code>`, <span
+      data-x="concept-response-body">body</span> is the value of the attribute, <span
+      data-x="concept-response-csp-list">CSP list</span> is a <span data-x="list clone">clone</span>
+      of the <code>iframe</code> element's <span>node document</span>'s <span
+      data-x="concept-document-csp-list">CSP list</span>, <span
+      data-x="concept-response-https-state">HTTPS state</span> is the <span
+      data-x="concept-document-https-state">HTTPS state</span> of the <code>iframe</code> element's
+      <span>node document</span>.
+
+      <p>The resulting <code>Document</code> must be considered <span>an <code>iframe</code> <code
+      data-x="attr-iframe-srcdoc">srcdoc</code> document</span>.</p>
+     </li>
+    </ol>
    </dd>
 
    <dt>Otherwise, if the element has no <code data-x="attr-iframe-src">src</code> attribute
@@ -29956,8 +29988,29 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
    element's <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code> content
    attribute.</p></li>
 
-   <li><p><span>Navigate</span><!--DONAV iframe--> the element's <span>nested browsing
-   context</span> to <var>resource</var>.</p></li>
+   <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean to
+   false.</p></li>
+
+   <li>
+    <p>If the element is an <code>iframe</code> element, and the <span>will lazy load element
+    steps</span> given the element return true, then:</p>
+
+    <ol>
+     <li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to the rest of
+     this algorithm starting with the step labeled <i>navigate to the resource</i>.</p></li>
+
+     <li><p>Set the <code>iframe</code>'s <span>current navigation was lazy loaded</span> boolean
+     to true.</p></li>
+
+     <li><p><span>Start intersection-observing a lazy loading element</span> for the
+     <code>iframe</code> element.</p></li>
+
+     <li><p>Return.</p></li>
+    </ol>
+   </li>
+
+   <li><p><i>Navigate to the resource</i>: <span>Navigate</span><!--DONAV iframe--> the element's
+   <span>nested browsing context</span> to <var>resource</var>.</p></li>
   </ol>
 
   <p>Any <span data-x="navigate">navigation</span> required of the user agent in the <span>process
@@ -30032,7 +30085,12 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   <var>element</var>'s <span>nested browsing context</span> is again <span
   data-x="navigate">navigated</span>, that will further <span>delay the load event</span>.</p>
 
-  <p>The <code>iframe</code> element <span>potentially delays the load event</span>.</p>
+  <p>Each <code>iframe</code> element has an associated <dfn>current navigation was lazy
+  loaded</dfn> boolean, initially false. It is set and unset in the <span>process the
+  <code>iframe</code> attributes</span> algorithm.</p>
+
+  <p>An <code>iframe</code> element whose <span>current navigation was lazy loaded</span> boolean is
+  false <span>potentially delays the load event</span>.</p>
 
   </div>
 
@@ -30324,6 +30382,25 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   used when <span data-x="process the iframe attributes">processing the <code>iframe</code>
   attributes</span>. <ref spec=REFERRERPOLICY></p>
 
+  <p>The <dfn data-x="attr-iframe-loading"><code>loading</code></dfn> attribute is a <span>lazy
+  loading attribute</span>. Its purpose is to indicate the policy for loading <code>iframe</code>
+  elements that are outside the viewport.</p>
+
+  <p>When the <code data-x="attr-iframe-loading">loading</code> attribute's state is changed to the
+  <span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run these
+  steps:</p>
+
+  <ol>
+   <li><p>Let <var>resumptionSteps</var> be the <code>iframe</code> element's <span>lazy load
+   resumption steps</span>.</p></li>
+
+   <li><p>If <var>resumptionSteps</var> is null, then return.</p></li>
+
+   <li><p>Set the <code>iframe</code>'s <span>lazy load resumption steps</span> to null.</p></li>
+
+   <li><p>Invoke <var>resumptionSteps</var>.</p></li>
+  </ol>
+
   <hr> <!-- FALLBACK -->
 
   <p>Descendants of <code>iframe</code> elements represent nothing. (In legacy user agents that do
@@ -30362,6 +30439,10 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   must <span>reflect</span> the <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code>
   content attribute, <span>limited to only known values</span>.</p>
 
+  <p>The <dfn><code data-x="dom-iframe-loading">loading</code></dfn> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-iframe-loading">loading</code> content attribute,
+  <span>limited to only known values</span>.</p>
+
   <p>The <dfn><code data-x="dom-iframe-contentDocument">contentDocument</code></dfn> IDL attribute,
   on getting, must return the <code>iframe</code> element's <span
   data-x="concept-bcc-content-document">content document</span>.</p>
@@ -117754,7 +117835,8 @@ interface <dfn>External</dfn> {
          <code data-x="attr-iframe-allowpaymentrequest">allowpaymentrequest</code>;
          <code data-x="attr-dim-width">width</code>;
          <code data-x="attr-dim-height">height</code>;
-         <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code></td>
+         <code data-x="attr-iframe-referrerpolicy">referrerpolicy</code>;
+         <code data-x="attr-iframe-loading">loading</code></td>
      <td><code>HTMLIFrameElement</code></td>
     </tr>
 
@@ -119367,7 +119449,8 @@ interface <dfn>External</dfn> {
           "<code data-x="attr-img-decoding-auto">auto</code>"
     <tr>
      <th> <code data-x="">loading</code>
-     <td> <code data-x="attr-img-loading">img</code>
+     <td> <code data-x="attr-img-loading">img</code>;
+          <code data-x="attr-iframe-loading">iframe</code>
      <td> Used when determining loading deferral
      <td> "<code data-x="attr-loading-lazy">lazy</code>";
           "<code data-x="attr-loading-eager">eager</code>"