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
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 for this change are at:

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 committed Sep 30, 2019
1 parent 562631f commit 3b07788
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions source
Expand Up @@ -3638,6 +3638,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 @@ -115556,6 +115561,13 @@ 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>Additionally, for <code>img</code> elements for which their <span>current request</span> is not
<span data-x="img-available">available</span> or does not have an intrinsic ratio, their
<span>intrinsic aspect ratio</span> is computed as the ratio between the <code
data-x="attr-dim-width">width</code> and <code data-x="attr-dim-height">height</code> attributes,
if both are present, non-zero, and not a percentage when parsed using the <span>rules for parsing
dimension values</span>.</p>

</div>


Expand Down

0 comments on commit 3b07788

Please sign in to comment.