Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
annevk merged 1 commit into from
Apr 22, 2026
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 33 additions & 16 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -31278,8 +31279,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>
Expand Down Expand Up @@ -31327,12 +31328,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
Expand Down Expand Up @@ -32480,25 +32486,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>

Expand Down
Loading