Use width and height as intrinsic aspect ratio for img elements

For when the current request is not available or it doesn't have an intrinsic ratio (such as some SVG content).

This specifies the proposal in WICG/intrinsicsize-attribute#16, which is implemented in both Firefox and Chromium behind a flag.

Tests: https://github.com/web-platform-tests/wpt/blob/a57ec1432f22ac42e8e219a32e2abd7c0baa5b09/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html.

Author: emilio

source

@@ -3641,6 +3641,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#transparent-black">transparent black</dfn></li>
     </ul>
 
+    <p>The term <dfn
+    data-x-href="https://drafts.csswg.org/css-images/#intrinsic-aspect-ratio">intrinsic aspect
+    ratio</dfn> is used as defined in <cite>CSS Image Values and Replaced Content</cite> to define
+    the sizing of replaced content. <ref spec=CSSIMAGES></p>
+
     <p>The term <dfn data-x-href="https://drafts.csswg.org/css-images-4/#paint-source">paint
     source</dfn> is used as defined in <cite>CSS Image Values and Replaced Content</cite>
     to define the interaction of certain HTML elements with the CSS 'element()'
@@ -115559,6 +115564,22 @@ input[type=image i][align=bottom i], object[align=bottom i] {
   property">map to the dimension properties</span> <span>'width'</span> and <span>'height'</span> on
   the element respectively.</p>
 
+  <p>The <span>intrinsic aspect ratio</span> for an <code>img</code> element <var>img</var> is
+  computed as follows:</p>
+
+  <ol>
+   <li><p>If <var>img</var>'s <span>current request</span> is <span
+   data-x="img-available">available</span> and has an <span>intrinsic aspect ratio</span>, then
+   use that intrinsic aspect ratio.</p></li>
+
+   <li><p>If <var>img</var>'s <code data-x="attr-dim-width">width</code> and <code
+   data-x="attr-dim-height">height</code> attribute values, when parsed using the <span>rules for
+   parsing dimension values</span>, are both not an error, not a percentage, and non-zero, then use
+   the ratio resulting from dividing the <code data-x="attr-dim-width">width</code> attribute value
+   by the <code data-x="attr-dim-height">height</code> attribute value.</p></li>
+
+   <li><p>Otherwise, <var>img</var> has no <span>intrinsic aspect ratio</span>.</p></li>
+   </ol>
   </div>