Merge branch 'lazyloading' of ssh://github.com/bengreenstein/html into lazyloading

Author: bengreenstein

source

@@ -2795,6 +2795,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
        <li><dfn data-x="concept-request-method" data-x-href="https://fetch.spec.whatwg.org/#concept-request-method">method</dfn></li>
        <li><dfn data-x="concept-request-header-list" data-x-href="https://fetch.spec.whatwg.org/#concept-request-header-list">header list</dfn></li>
        <li><dfn data-x="concept-request-body" data-x-href="https://fetch.spec.whatwg.org/#concept-request-body">body</dfn></li>
+       <li><dfn data-x="concept-request-add-range-header" data-x-href="https://fetch.spec.whatwg.org/#concept-request-add-range-header">add a range header</dfn></li>
        <li><dfn data-x="concept-request-client" data-x-href="https://fetch.spec.whatwg.org/#concept-request-client">client</dfn></li>
        <li><dfn data-x="concept-request-current-url" data-x-href="https://fetch.spec.whatwg.org/#concept-request-current-url">current URL</dfn></li>
        <li><dfn data-x="concept-request-reserved-client" data-x-href="https://fetch.spec.whatwg.org/#concept-request-reserved-client">reserved client</dfn></li>
@@ -7211,6 +7212,42 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <code>HTMLOrSVGElement</code> must set the <span>[[CryptographicNonce]]</span> slot on the copy
   to the value of the slot on the element being cloned.</p>
 
+  <h4>Lazy loading attributes</h4>
+
+  <p>A <dfn>lazy loading attribute</dfn> is an <span>enumerated attribute</span>. The following
+  table lists the keywords and states for the attribute &mdash; the keywords in the left column map
+  to the states in the cell in the second column on the same row as the keyword.</p>
+
+  <p>The attribute provides a hint to the user agent to aid in deciding whether to load an element
+  immediately or to defer loading until the element will be viewable, according to the attribute's
+  current state.</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Description
+   <tbody>
+    <tr>
+     <td><dfn><code data-x="attr-lazyload-on">on</code></dfn>
+     <td><dfn data-x="attr-lazyload-on-state">On</dfn>
+     <td>Indicates a strong preference to defer fetching the element's resource until it will be
+     viewable.
+    <tr>
+     <td><dfn><code data-x="attr-lazyload-off">off</code></dfn>
+     <td><dfn data-x="attr-lazyload-off-state">Off</dfn>
+     <td>Indicates the element's resource must be fetched immediately, regardless of viewability.
+    <tr>
+     <td><dfn><code data-x="attr-lazyload-auto">auto</code></dfn>
+     <td><dfn data-x="attr-lazyload-auto-state">Auto</dfn>
+     <td>Indicates that the user agent may determine the fetching strategy (the default).
+  </table>
+
+  <p>The attribute's <i data-x="missing value default">missing value default</i> and <i
+  data-x="invalid value default">invalid value default</i> are both the <span
+  data-x="attr-lazyload-auto-state">Auto</span> state.</p>
+
 
   <h3 split-filename="common-dom-interfaces">Common DOM interfaces</h3>
 
@@ -25711,6 +25748,7 @@ interface <dfn>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
    <dd><code data-x="attr-dim-height">height</code></dd>
    <dd><code data-x="attr-img-referrerpolicy">referrerpolicy</code></dd>
    <dd><code data-x="attr-img-decoding">decoding</code></dd>
+   <dd><code data-x="attr-img-lazyload">lazyload</code></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
    <dd w-nodev>
     <pre><code class="idl" data-x="">[Exposed=Window,
@@ -25732,6 +25770,7 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   readonly attribute USVString <span data-x="dom-img-currentSrc">currentSrc</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-referrerPolicy">referrerPolicy</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-decoding">decoding</span>;
+  [<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-lazyLoad">lazyLoad</span>;
 
   Promise&lt;void&gt; <span data-x="dom-img-decode">decode</span>();
 };</code></pre>
@@ -25807,6 +25846,10 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   default">missing value default</i> and <i data-x="invalid value default">invalid value
   default</i> are both the <span data-x="attr-img-decoding-auto-state">auto</span> state.</p>
 
+  <p>The <dfn data-x="attr-img-lazyload"><code>lazyload</code></dfn> attribute is a <span>lazy
+  loading attribute</span>. Its purpose is to indicate the policy for loading images that are
+  outside the viewport.
+
   <hr>
 
   <p>The <code>img</code> element must not be used as a layout tool. In particular, <code>img</code>
@@ -25997,6 +26040,10 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   <span>reflect</span> the <code data-x="attr-img-decoding">decoding</code> content
   attribute, <span>limited to only known values</span>.
 
+  <p>The <dfn><code data-x="dom-img-lazyLoad">lazyLoad</code></dfn> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-img-lazyload">lazyload</code> content
+  attribute, <span>limited to only known values</span>.
+
   </div>
 
   <dl class="domintro">
@@ -26044,14 +26091,6 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
    </dd>
 
-   <dt><var>image</var> . <code subdfn data-x="dom-img-decoding">decoding</code></dt>
-
-   <dd>
-
-     <p>Returns the <span>image decoding hint</span> set for this image.</p>
-
-   </dd>
-
    <dt><var>image</var> . <code subdfn data-x="dom-img-decode">decode</code>()</dt>
 
    <dd>
@@ -27257,7 +27296,12 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
   <p>In a <span>browsing context</span> where <span data-x="concept-bc-noscript">scripting is
   disabled</span>, user agents may obtain images immediately or on demand. In a <span>browsing
   context</span> where <span data-x="concept-bc-noscript">scripting is enabled</span>, user agents
-  must obtain images immediately.</p>
+  must obtain images immediately when the CSS boxes those images intersect the
+  <span>viewport</span>, or when the corresponding <code>img</code> element's <code
+  data-x="attr-img-lazyload">lazyload</code> attribute is in the <span
+  data-x="attr-lazyload-off-state">Off</span> state. Otherwise, they may obtain images immediately
+  or on demand, using the current state of the corresponding <code>img</code> element's <code
+  data-x="attr-img-lazyload">lazyload</code> attribute to guide the decision.</p>
 
   <p>A user agent that obtains images immediately must synchronously
   <span>update the image data</span> of an <code>img</code> element,
@@ -27272,6 +27316,38 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
   obtains images on demand, the <code>img</code> element's <span>current request</span>'s <span
   data-x="img-req-state">state</span> must return to <span data-x="img-none">unavailable</span>.</p>
 
+  <p>If the <code>img</code> element's <code data-x="attr-img-lazyload">lazyload</code> attribute is
+  not in the <span data-x="attr-lazyload-off-state">Off</span> state, the user agent may immediately
+  fetch metadata from the image header. To fetch image metadata, the user agent must run the
+  following steps:</p>
+
+  <ol>
+   <li><p>Let <var>request</var> be the result of <span data-x="create a potential-CORS
+   request">creating a potential-CORS request</span> given <var>urlString</var>, "<code
+   data-x="">image</code>", and the current state of the element's <code
+   data-x="attr-img-crossorigin">crossorigin</code> content attribute.</p></li>
+
+   <li><p>Set <var>request</var>'s <span data-x="concept-request-client">client</span> to the
+   element's <span>node document</span>'s <code>Window</code> object's <span>environment settings
+   object</span>.</p></li>
+
+   <li><p>If the element <span data-x="use srcset or picture">uses <code>srcset</code> or
+   <code>picture</code></span>, set <var>request</var>'s <span
+   data-x="concept-request-initiator">initiator</span> to "<code
+   data-x="">imageset</code>".</p></li>
+
+   <li><p>Set <var>request</var>'s <span data-x="concept-request-referrer-policy">referrer
+   policy</span> to the current state of the element's <code
+   data-x="attr-img-referrerpolicy">referrerpolicy</code> attribute.</p></li>
+
+   <li><p>Then <span data-x="concept-request-add-range-header">add a range header</span> to
+   <var>request</var> starting at byte 0 and ending with as many bytes of the image file as the
+   user agent determines is reasonable to retrieve metatdata.</p></li>
+
+   <li><p><span data-x="concept-fetch">Fetch</span> <var>request</var>, and use the metadata
+   contained in the response as appropriate for the image.</p></li>
+  </ol>
+
 
   <h6>Reacting to DOM mutations</h6>
 
@@ -29500,6 +29576,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-lazyload">lazyload</code></dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
    <dd w-nodev>
     <pre><code class="idl" data-x="">[Exposed=Window,
@@ -29515,6 +29592,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-lazyLoad">lazyLoad</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>();
@@ -29713,7 +29791,11 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
    <dt>Otherwise</dt>
 
    <dd><p>Run the <span>otherwise steps for <code>iframe</code> or <code>frame</code>
-   elements</span>.</p></dd>
+   elements</span>. If the element's <code data-x="attr-iframe-lazyload">lazyload</code> attribute
+   is in the <span data-x="attr-lazyload-on-state">On</span> or <span
+   data-x="attr-lazyload-auto-state">Auto</span> states, and the element's CSS layout box does not
+   intersect the <span>viewport</span>, then running these steps may be deferred until such
+   intersection occurs.</p></dd>
 
   </dl>
 
@@ -30119,6 +30201,12 @@ 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>
 
+  <hr> <!-- LAZYLOAD ATTRIBUTE -->
+
+  <p>The <dfn data-x="attr-iframe-lazyload"><code>lazyload</code></dfn> attribute is a
+  <span>lazy loading attribute</span>. It indicates the policy for loading <code>iframe</code>
+  elements that are outside the viewport.
+
   <hr> <!-- FALLBACK -->
 
   <p>Descendants of <code>iframe</code> elements represent nothing. (In legacy user agents that do
@@ -30157,6 +30245,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-lazyLoad">lazyLoad</code></dfn> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-iframe-lazyload">lazyload</code> content
+  attribute, <span>limited to only known values</span>.
+
   <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>
@@ -118961,6 +119053,14 @@ interface <dfn>External</dfn> {
      <td> "<code data-x="attr-img-decoding-sync">sync</code>";
           "<code data-x="attr-img-decoding-async">async</code>";
           "<code data-x="attr-img-decoding-auto">auto</code>"
+    <tr>
+     <th> <code data-x="">lazyload</code>
+     <td> <code data-x="attr-img-lazyload">img</code>;
+          <code data-x="attr-iframe-lazyload">iframe</code>
+     <td> Hint to use when determining loading deferral
+     <td> "<code data-x="attr-lazyload-on">on</code>";
+          "<code data-x="attr-lazyload-off">off</code>";
+          "<code data-x="attr-lazyload-auto">auto</code>"
     <tr>
      <th> <code data-x="">default</code>
      <td> <code data-x="attr-track-default">track</code>