Skip to content

Commit

Permalink
Use width and height as intrinsic aspect ratio for img elements
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
emilio authored and annevk committed Oct 2, 2019
1 parent 259be35 commit 17a3f3c
Showing 1 changed file with 21 additions and 0 deletions.
21 changes: 21 additions & 0 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -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()'
Expand Down Expand Up @@ -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>


Expand Down

0 comments on commit 17a3f3c

Please sign in to comment.