Force size containment for auto-sizes

The 'concrete object size ignoring natural dimensions' concept was not implementable. This change makes `sizes=auto` required on `img` to use auto-sizes (still optional on `source`)
and forces size containment so that the image size is the same before and after an image has loaded, to prevent double downloads.

Fixes #9448.

source

@@ -28221,12 +28221,16 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
     <p>If the <code data-x="attr-source-srcset">srcset</code> attribute has any <span data-x="image
     candidate string">image candidate strings</span> using a <span>width descriptor</span>, the
     <code data-x="attr-source-sizes">sizes</code> attribute may also be present. If, additionally,
-    the following sibling <code>img</code> element's <code data-x="attr-img-loading">loading</code>
-    attribute is in the <span data-x="attr-loading-eager-state">Eager</span> state, the <code
-    data-x="attr-source-sizes">sizes</code> attribute must be present. The <dfn element-attr
-    for="source" data-x="attr-source-sizes"><code>sizes</code></dfn> attribute is a <span>sizes
-    attribute</span>, which contributes the <span>source size</span> to the <span>source set</span>,
-    if the <code>source</code> element is selected.</p>
+    the following sibling <code>img</code> element does not <span data-x="allows auto-sizes">allow
+    auto-sizes</span>, the <code data-x="attr-source-sizes">sizes</code> attribute must be present.
+    The <dfn element-attr for="source" data-x="attr-source-sizes"><code>sizes</code></dfn>
+    attribute is a <span>sizes attribute</span>, which contributes the <span>source size</span> to
+    the <span>source set</span>, if the <code>source</code> element is selected.</p>
+
+    <p class="note">If the <code>img</code> element <span>allows auto-sizes</span>, then the <code
+    data-x="attr-source-sizes">sizes</code> attribute can be omitted on previous sibling
+    <code>source</code> elements. In such cases, it is equivalent to specifying <code
+    data-x="valdef-sizes-auto">auto</code>.</p>
 
     <p>The <code>source</code> element supports <span>dimension attributes</span>. The
     <code>img</code> element can use the <code data-x="attr-dim-width">width</code> and <code
@@ -28557,18 +28561,26 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
   <p>If the <code data-x="attr-img-srcset">srcset</code> attribute is present and has any <span
   data-x="image candidate string">image candidate strings</span> using a <span>width
-  descriptor</span>, the <code data-x="attr-img-sizes">sizes</code> attribute may also be present.
-  If, additionally, the <code data-x="attr-img-loading">loading</code> attribute is in the <span
-  data-x="attr-loading-eager-state">Eager</span> state, the <code
-  data-x="attr-img-sizes">sizes</code> attribute must be present. The <dfn element-attr for="img"
+  descriptor</span>, the <code data-x="attr-img-sizes">sizes</code> attribute must also be present.
+  If the <code data-x="attr-img-srcset">srcset</code> attribute is <em>not</em> specified, and the
+  <code data-x="attr-img-loading">loading</code> attribute is in the <span
+  data-x="attr-loading-eager-state">Lazy</span> state, the <code
+  data-x="attr-img-sizes">sizes</code> attribute may be specified with have the value "<code
+  data-x="">auto</code>" (<span>ASCII case-insensitive</span>). The <dfn element-attr for="img"
   data-x="attr-img-sizes"><code>sizes</code></dfn> attribute is a <span>sizes attribute</span>,
   which contributes the <span>source size</span> to the <span>source set</span> (if no
   <code>source</code> element was selected).</p>
 
-  <p class="note">When the <code data-x="attr-img-loading">loading</code> attribute is in the <span
-  data-x="attr-loading-lazy-state">Lazy</span> state, the <code
-  data-x="attr-img-sizes">sizes</code> attribute can be omitted, which is equivalent to <code
-  data-x="valdef-sizes-auto">sizes="auto"</code>.</p>
+  <p>An <code>img</code> element <dfn>allows auto-sizes</dfn> if:</p>
+
+  <ul>
+   <li>its <code data-x="attr-img-loading">loading</code> attribute is in the <span
+  data-x="attr-loading-eager-state">Lazy</span> state, and</li>
+
+   <li>its <code data-x="attr-img-sizes">sizes</code> attribute's value is "<code
+   data-x="">auto</code>" (<span>ASCII case-insensitive</span>), or starts with "<code
+   data-x="">auto,</code>" (<span>ASCII case-insensitive</span>).</li>
+  </ul>
 
   <p>The <dfn element-attr for="img" data-x="attr-img-crossorigin"><code>crossorigin</code></dfn>
   attribute is a <span>CORS settings attribute</span>. Its purpose is to allow images from
@@ -29919,24 +29931,16 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
   and must not use CSS functions other than the <span>math functions</span>.</p>
 
   <p>The keyword <dfn><code data-x="valdef-sizes-auto">auto</code></dfn> is a width that is
-  computed in <span>parse a sizes attribute</span>.</p>
+  computed in <span>parse a sizes attribute</span>. If present, it must be the first entry and the
+  entire <span>&lt;source-size-list></span> value must either be the string "<code
+  data-x="">auto</code>" (<span>ASCII case-insensitive</span>) or start with the string "<code
+  data-x="">auto,</code>" (<span>ASCII case-insensitive</span>).</p>
 
   <p class="note">If the <code>img</code> element that initiated the image loading (with the
   <span>update the image data</span> or <span data-x="img-environment-changes">react to environment
-  changes</span> algorithms) is <span>being rendered</span>, and its <code
-  data-x="attr-img-loading">loading</code> attribute is in the <span
-  data-x="attr-loading-lazy-state">Lazy</span> state, and its <span>concrete object size ignoring
-  natural dimensions</span> width is not zero, then <code data-x="valdef-sizes-auto">auto</code> is
-  the <span>concrete object size ignoring natural dimensions</span> width. Otherwise, <code
-  data-x="valdef-sizes-auto">auto</code> is <code data-x="">100vw</code>.</p>
-
-  <p>The <dfn export>concrete object size ignoring natural dimensions</dfn> of an element is its
-  <span>concrete object size</span> but acting as if there are no <span>natural dimensions</span>,
-  thus producing a rectangle with an absolute width and height. <ref spec=CSSIMAGES></p>
-
-  <p class="note">The <span>concrete object size ignoring natural dimensions</span> of an
-  <code>img</code> element will match the <span>concrete object size</span> before an image has
-  loaded.</p>
+  changes</span> algorithms) <span>allows auto-sizes</span> and is <span>being rendered</span>,
+  then <code data-x="valdef-sizes-auto">auto</code> is the <span>concrete object size</span> width.
+  Otherwise, <code data-x="valdef-sizes-auto">auto</code> is <code data-x="">100vw</code>.</p>
 
   <p>The <code data-x="valdef-sizes-auto">auto</code> keyword may be specified in the <code
   data-x="attr-source-sizes">sizes</code> attribute of <code>source</code> elements and <code
@@ -29950,15 +29954,15 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
    <li><p>The element is an <code>img</code> element.</p></li>
 
-   <li><p>The <code>img</code> element referenced in either condition above has a <code
-   data-x="attr-img-loading">loading</code> attribute which is in the <span
-   data-x="attr-loading-lazy-state">Lazy</span> state.</p></li>
+   <li><p>The <code>img</code> element referenced in either condition above <span>allows
+   auto-sizes</span>.</p></li>
   </ul>
 
   <p class="note">In addition, it is strongly encouraged to specify dimensions using the <code
   data-x="attr-dim-width">width</code> and <code data-x="attr-dim-height">height</code> attributes
-  or with CSS. Without a specified width, the <code data-x="valdef-sizes-auto">auto</code> keyword
-  is equivalent to <code data-x="">100vw</code>.</p>
+  or with CSS. Without specified dimensions, the image will likely render with 0x0 dimensions
+  because <code data-x="">sizes="auto"</code> implies <code data-x="">contain: size</code> in <a
+  href="#img-contain-size">the Rendering section</a>.</p>
 
   <p>The <span>&lt;source-size-value></span> gives the intended layout width of the image. The
   author can specify different widths for different environments with
@@ -30172,14 +30176,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
    <li><p>The element's <span data-x="concept-node-adopt-ext">adopting steps</span> are run.</p></li>
 
-   <li><p>If the element's <code data-x="attr-img-loading">loading</code> attribute is in the <span
-   data-x="attr-loading-lazy-state">Lazy</span> state, and either the element has a <code
-   data-x="attr-img-srcset">srcset</code> attribute with a <span>width descriptor</span> or the
-   element's parent is a <code>picture</code> element and a previous sibling <code>source</code>
-   element that has a <code data-x="attr-source-srcset">srcset</code> attribute with a <span>width
-   descriptor</span>: the element starts or stops <span>being rendered</span>, or its <span>concrete
-   object size ignoring natural dimensions</span> width changes. This must set the <i>maybe omit
-   events</i> flag for the <span>update the image data</span> algorithm.</p></li>
+   <li><p>If the element <span>allows auto-sizes</span>: the element starts or stops <span>being
+   rendered</span>, or its <span>concrete object size</span> width changes. This must set the
+   <i>maybe omit events</i> flag for the <span>update the image data</span> algorithm.</p></li>
 
    <!-- NOT when the base URL changes (except for when adopted into a new doc) -->
 
@@ -31300,14 +31299,12 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
    <li><p>Assert: <var>size</var> is null or <code data-x="valdef-sizes-auto">auto</code>.</p></li>
 
-   <li><p>If <var>img</var> is null, or <var>img</var>'s <code
-   data-x="attr-img-loading">loading</code> attribute is not in the <span
-   data-x="attr-loading-lazy-state">Lazy</span> state, or <var>img</var> is not <span>being
-   rendered</span>, or <var>img</var>'s <span>concrete object size ignoring natural
-   dimensions</span> width is zero, then return <code data-x="">100vw</code>.</p></li>
+   <li><p>If <var>img</var> is null, or <var>img</var> is not <span>being rendered</span>, or
+   <var>img</var> does not <span data-x="allows auto-sizes">allow auto-sizes</span>, then return
+   <code data-x="">100vw</code>.</p></li>
 
-   <li><p>Return the <span>concrete object size ignoring natural dimensions</span> width of
-   <var>img</var>, in <span data-x="'px'">CSS pixels</span>.</p></li>
+   <li><p>Return the <span>concrete object size</span> width of <var>img</var>, in <span
+   data-x="'px'">CSS pixels</span>.</p></li>
   </ol>
 
   <p class="note">It is invalid to use a bare <span>&lt;source-size-value></span> that is a <span>&lt;length></span>
@@ -129754,6 +129751,12 @@ iframe { border: 2px inset; }
 
   <hr>
 
+  <p>The following CSS rules are expected to apply:</p>
+
+  <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
+
+<span id="img-contain-size">img:is([sizes="auto" i], [sizes^="auto," i]) { contain: size !important; }</span></code></pre>
+
   <p>The following CSS rules are expected to apply when the <code>Document</code> is in <span>quirks
   mode</span>:</p>