Skip to content
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

Jump to bottom

Use width and height as intrinsic aspect ratio for img elements #4952

Merged
merged 5 commits into from
Oct 2, 2019
Merged

Use width and height as intrinsic aspect ratio for img elements #4952

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e339649
Use width and height as intrinsic aspect ratio for img elements
emilio Sep 30, 2019
d7bd699
fixup! Use width and height as intrinsic aspect ratio for img elements
emilio Sep 30, 2019
bafb44b
fixup! fixup! Use width and height as intrinsic aspect ratio for img …
emilio Sep 30, 2019
3cd7c02
fixup! fixup! fixup! Use width and height as intrinsic aspect ratio f…
emilio Sep 30, 2019
74a4ae3
nits
annevk Sep 30, 2019
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
21 changes: 21 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
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,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
annevk marked this conversation as resolved.
Show resolved Hide resolved
computed as follows:</p>
annevk marked this conversation as resolved.
Show resolved Hide resolved

<ol>
annevk marked this conversation as resolved.
Show resolved Hide resolved
<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