Add lazy-loading for <video poster>

Add a new posterloading attribute to the video element which controls lazy-loading of the poster image.

Fixes #6636.

Author: zcorpan

source

@@ -7342,14 +7342,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <li><p>Return false.</p></li>
   </ol>
 
-  <p>Each <code>img</code> and <code>iframe</code> element has associated <dfn>lazy load resumption
-  steps</dfn>, initially null.</p>
+  <p>Each <code>img</code>, <code>iframe</code> and <code>video</code> element has associated
+  <dfn>lazy load resumption steps</dfn>, initially null.</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 class="note">For <code>img</code>, <code>iframe</code> and <code>video</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>
@@ -33096,6 +33096,7 @@ interface <dfn interface>HTMLObjectElement</dfn> : <span>HTMLElement</span> {
    <dd><code data-x="attr-media-src">src</code></dd>
    <dd><code data-x="attr-media-crossorigin">crossorigin</code></dd>
    <dd><code data-x="attr-video-poster">poster</code></dd>
+   <dd><code data-x="attr-video-posterloading">posterloading</code></dd>
    <dd><code data-x="attr-media-preload">preload</code></dd>
    <dd><code data-x="attr-media-autoplay">autoplay</code></dd>
    <dd><code data-x="attr-video-playsinline">playsinline</code></dd>
@@ -33119,6 +33120,7 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
   readonly attribute unsigned long <span data-x="dom-video-videoWidth">videoWidth</span>;
   readonly attribute unsigned long <span data-x="dom-video-videoHeight">videoHeight</span>;
   [<span>CEReactions</span>] attribute USVString <span data-x="dom-video-poster">poster</span>;
+  [<span>CEReactions</span>] attribute DOMString <span data-x="dom-video-posterLoading">posterLoading</span>;
   [<span>CEReactions</span>] attribute boolean <span data-x="dom-video-playsInline">playsInline</span>;
 };</code></pre>
    </dd>
@@ -33158,8 +33160,29 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
   data is available.  The attribute, if present, must contain a <span>valid non-empty URL
   potentially surrounded by spaces</span>.</p>
 
+  <p>The <dfn element-attr for="video"><code
+  data-x="attr-video-posterloading">posterloading</code></dfn> attribute is a <span>lazy
+  loading attribute</span>. Its purpose is to indicate the policy for loading the image given by the
+  <code data-x="attr-video-poster">poster</code> attribute of <code>video</code> elements that are
+  outside the viewport.</p>
+
   <div w-nodev>
 
+  <p>When the <code data-x="attr-video-posterloading">posterloading</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>video</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>video</code>'s <span>lazy load resumption steps</span> to null.</p></li>
+
+   <li><p>Invoke <var>resumptionSteps</var>.</p></li>
+  </ol>
+
   <p>If the specified resource is to be used, then, when the element is created or when the <code
   data-x="attr-video-poster">poster</code> attribute is set, changed, or removed, the user agent must
   run the following steps to determine the element's <dfn>poster frame</dfn> (regardless of the
@@ -33187,8 +33210,39 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
    <span data-x="concept-request-credentials-mode">credentials mode</span> is "<code
    data-x="">include</code>", and whose <span>use-URL-credentials flag</span> is set.
 
-   <li><p><!--FETCH--><span data-x="concept-fetch">Fetch</span> <var>request</var>. This must
-   <span>delay the load event</span> of the element's <span>node document</span>.</p></li>
+   <li><p>Let <var>delay load event</var> be true if the <code>video</code>'s <span>lazy loading
+   attribute</span> is in the <span data-x="attr-loading-eager-state">Eager</span> state, or if
+   <span data-x="concept-n-noscript">scripting is disabled</span> for the <code>video</code>, and
+   false otherwise.</p></li>
+
+   <li>
+    <p>If the <span>will lazy load element steps</span> given the <code>video</code> return true,
+    then:</p>
+
+    <ol>
+     <li><p>Set the <code>video</code>'s <span>lazy load resumption steps</span> to the rest of this
+     algorithm starting with the step labeled <i>fetch the poster image</i>.</p></li>
+
+     <li><p><span>Start intersection-observing a lazy loading element</span> for the
+     <code>video</code> element.</p></li>
+
+     <li><p>Return.</p></li>
+    </ol>
+   </li>
+
+   <li>
+    <!--FETCH-->
+     <p><i>Fetch the poster image</i>: <span data-x="concept-fetch">Fetch</span>
+     <var>request</var>.</p>
+
+
+      <!-- similar text in <img>, <input type=image> -->
+      <p>When <var>delay load event</var> is true, fetching the image must <span>delay the load
+      event</span> of the element's <span>node document</span> until the <span
+      data-x="concept-task">task</span> that is <span data-x="queue a task">queued</span> by the
+      <span>networking task source</span> once the resource has been fetched has been run.
+      <!--TODO or the fetch was aborted, presumably --></p>
+   </li>
 
    <!-- could define how to sniff for an image here -->
 
@@ -33401,6 +33455,11 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
   IDL attribute must <span>reflect</span> the <code data-x="attr-video-poster">poster</code> content
   attribute.</p>
 
+  <p>The <dfn attribute for="HTMLVideoElement"><code
+  data-x="dom-video-posterLoading">posterLoading</code></dfn> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-video-posterloading">posterloading</code> content
+  attribute, <span>limited to only known values</span>.</p>
+
   <p>The <dfn attribute for="HTMLVideoElement"><code
   data-x="dom-video-playsInline">playsInline</code></dfn> IDL attribute must <span>reflect</span>
   the <code data-x="attr-video-playsinline">playsinline</code> content attribute.</p>
@@ -128084,6 +128143,7 @@ interface <dfn interface>External</dfn> {
          <code data-x="attr-media-src">src</code>;
          <code data-x="attr-media-crossorigin">crossorigin</code>;
          <code data-x="attr-video-poster">poster</code>;
+         <code data-x="attr-video-posterloading">posterloading</code>;
          <code data-x="attr-media-preload">preload</code>;
          <code data-x="attr-media-autoplay">autoplay</code>;
          <code data-x="attr-video-playsinline">playsinline</code>;
@@ -129206,6 +129266,12 @@ interface <dfn interface>External</dfn> {
      <td> <code data-x="attr-video-poster">video</code>
      <td> Poster frame to show prior to video playback
      <td> <span>Valid non-empty URL potentially surrounded by spaces</span>
+    <tr>
+     <th> <code data-x="">posterloading</code>
+     <td> <code data-x="attr-video-posterloading">video</code>
+     <td> Used when determining loading deferral of the poster frame
+     <td> "<code data-x="attr-loading-lazy">lazy</code>";
+          "<code data-x="attr-loading-eager">eager</code>"
     <tr>
      <th> <code data-x="">preload</code>
      <td> <code data-x="attr-media-preload">audio</code>;