Make naturalWidth & naturalHeight return non-0 when the image lacks a dimension

Unfortunately the more correct behavior was never implemented widely enough and web content started to depend on these properties being non-0.

We take special care that dimensions that are missing do not get divided by density so we return the same values for them as CSS (300 by 150).

Tests: web-platform-tests/wpt#59304.

Fixes #11287.

Author: annevk

source

@@ -3800,6 +3800,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-images/#default-object-size">default object size</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-images/#default-sizing">default sizing algorithm</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-images/#concrete-object-size">concrete object size</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-images/#natural-dimensions">natural dimensions</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-images/#natural-height">natural height</dfn></li>
@@ -31280,8 +31281,8 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
    <dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-naturalHeight">naturalHeight</span></code></dt>
 
    <dd>
-    <p>These attributes return the natural dimensions of the image, or 0 if the dimensions are not
-    known.</p>
+    <p>These attributes return the <span>density-corrected natural width and height</span> of the
+    image, or 0 if the image is not <i data-x="img-available">available</i>.</p>
    </dd>
 
    <dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-complete">complete</span></code></dt>
@@ -31329,12 +31330,17 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div algorithm>
-  <p>The IDL attributes <dfn attribute for="HTMLImageElement"
+  <p>The <dfn attribute for="HTMLImageElement"
   data-x="dom-img-naturalWidth"><code>naturalWidth</code></dfn> and <dfn attribute
-  for="HTMLImageElement" data-x="dom-img-naturalHeight"><code>naturalHeight</code></dfn> must return
-  the <span>density-corrected natural width and height</span> of the image, in <span
-  data-x="'px'">CSS pixels</span>, if the image has <span>density-corrected natural width and
-  height</span> and is <i data-x="img-available">available</i>, or else 0. <ref>CSS</ref></p>
+  for="HTMLImageElement" data-x="dom-img-naturalHeight"><code>naturalHeight</code></dfn> getter
+  steps are:</p>
+
+  <ol>
+   <li><p>If the image is not <i data-x="img-available">available</i>, then return 0.</p></li>
+
+   <li><p>Return the respective component of the image's <span>density-corrected natural width and
+   height</span>, in <span data-x="'px'">CSS pixels</span>. <ref>CSS</ref></p></li>
+  </ol>
   </div>
 
   <p class="note">Since the <span>density-corrected natural width and height</span> of an image
@@ -32482,25 +32488,36 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
   natural width and height</dfn> of an <code>img</code> element <var>img</var>:</p>
 
   <ol>
+   <li><p>Let <var>density</var> be <var>img</var>'s <span>current request</span>'s <span>current
+   pixel density</span>.</p></li>
+
    <li>
-    <p>Let <var>dim</var> be <var>img</var>'s <span>current request</span>'s <span>preferred
-    density-corrected dimensions</span>.</p>
+    <p>Let <var>dimensions</var> be <var>img</var>'s <span>current request</span>'s
+    <span>preferred density-corrected dimensions</span>.</p>
 
     <p class="note">The <span>preferred density-corrected dimensions</span> are set in the
     <span>prepare an image for presentation</span> algorithm based on meta information in the
     image.</p>
    </li>
 
-   <li><p>If <var>dim</var> is null, set <var>dim</var> to <var>img</var>'s <span>natural
-   dimensions</span>.</p></li>
+   <li><p>If <var>dimensions</var> is not null, then set
+   <var>dimensions</var>'s width to <var>dimensions</var>'s width divided by
+   <var>density</var>, set <var>dimensions</var>'s height to <var>dimensions</var>'s height
+   divided by <var>density</var>, and return <var>dimensions</var>.</p></li>
+
+   <li><p>Let <var>intrinsicWidth</var>, <var>intrinsicHeight</var>, and
+   <var>intrinsicRatio</var> be <var>img</var>'s <span data-x="natural dimensions">intrinsic
+   width, intrinsic height, and intrinsic aspect ratio</span>, if any, respectively.</p></li>
 
-   <li><p>Set <var>dim</var>'s width to <var>dim</var>'s width divided by <var>img</var>'s
-   <span>current request</span>'s <span>current pixel density</span>.</p></li>
+   <li><p>If <var>intrinsicWidth</var> is not absent, then set <var>intrinsicWidth</var> to
+   <var>intrinsicWidth</var> divided by <var>density</var>.</p></li>
 
-   <li><p>Set <var>dim</var>'s height to <var>dim</var>'s height divided by <var>img</var>'s
-   <span>current request</span>'s <span>current pixel density</span>.</p></li>
+   <li><p>If <var>intrinsicHeight</var> is not absent, then set <var>intrinsicHeight</var> to
+   <var>intrinsicHeight</var> divided by <var>density</var>.</p></li>
 
-   <li><p>Return <var>dim</var>.</p></li>
+   <li><p>Return the result of applying the <span>default sizing algorithm</span> with
+   <var>intrinsicWidth</var>, <var>intrinsicHeight</var>, and <var>intrinsicRatio</var>, using a
+   <span>default object size</span> of 300 by 150.</p></li>
   </ol>
   </div>