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

note how orientation metadata affects naturalWidth/Height #5358

Merged
merged 5 commits into from
Mar 18, 2020
Merged

note how orientation metadata affects naturalWidth/Height #5358

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1a5eee8
Point intrinsic dimension related terms to css-images-3
heycam Mar 16, 2020
b07b778
Editorial: punctuation fix
heycam Mar 16, 2020
23108b1
Note effect of orientation metadata on naturalWidth and naturalHeight
heycam Mar 16, 2020
d5ebf27
Other fixups to CSS Images spec references
domenic Mar 16, 2020
fc117e3
Note fixups
domenic Mar 16, 2020
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
42 changes: 24 additions & 18 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3449,7 +3449,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#line-box">line box</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#x24">out-of-flow</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#x25">in-flow</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/conform.html#intrinsic">intrinsic dimensions</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/box.html#box-content-area">content area</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/box.html#x10">content box</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/box.html#x14">border box</dfn></li>
Expand Down Expand Up @@ -3514,9 +3513,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<td><dfn data-x-href="https://drafts.csswg.org/css2/box.html#propdef-border-right-color">'border-right-color'</dfn>
</table>

<p>The terms <dfn>intrinsic width</dfn> and <dfn>intrinsic height</dfn> refer to the width dimension and the height
dimension, respectively, of <span>intrinsic dimensions</span>.</p>

<p>The basic version of the <dfn
data-x-href="https://drafts.csswg.org/css2/visuren.html#display-prop">'display'</dfn> property
is defined in <cite>CSS</cite>, and the property is extended by other CSS
Expand Down Expand Up @@ -3551,21 +3547,22 @@ 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 following terms are defined in <cite>CSS Images</cite>: <ref spec=CSSIMAGES></p>

<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/#intrinsic-dimensions">intrinsic dimensions</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-images/#intrinsic-aspect-ratio">intrinsic aspect ratio</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-images/#intrinsic-height">intrinsic height</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-images/#intrinsic-width">intrinsic width</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-images-3/#the-image-orientation">'image-orientation'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-images/#the-object-fit">'object-fit'</dfn> property</li>
</ul>

<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>
source</dfn> is used as defined in <cite>CSS Images Level 4</cite>
to define the interaction of certain HTML elements with the CSS 'element()'
function. <ref spec=CSSIMAGES></p>

<p>The term <dfn data-x-href="https://drafts.csswg.org/css-images/#default-object-size">default
object size</dfn> and the <dfn
data-x-href="https://drafts.csswg.org/css-images/#the-object-fit">'object-fit'</dfn> property
are also defined in <cite>CSS Image Values and Replaced Content</cite>: <ref
spec=CSSIMAGES></p>
function. <ref spec=CSSIMAGES4></p>

<p>The following features are defined in <cite>CSS Backgrounds and Borders</cite>: <ref
spec=CSSBG></p>
Expand Down Expand Up @@ -26850,6 +26847,12 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
data-x="'px'">CSS pixels</span>, if the image has <span>intrinsic dimensions</span> and is <i
data-x="img-available">available</i>, or else 0. <ref spec=CSS></p>

<p class="note">Since the <span>intrinsic dimensions</span> of an image take into account any
orientation specified in its metadata, <code data-x="dom-img-naturalWidth">naturalWidth</code> and
<code data-x="dom-img-naturalHeight">naturalHeight</code> reflect the dimensions after applying
any rotation needed to correctly orient the image, regardless of the value of the
<span>'image-orientation'</span> property.</p>

<p>The IDL attribute <dfn data-x="dom-img-complete"><code>complete</code></dfn> must return true if
any of the following conditions is true:</p>

Expand Down Expand Up @@ -124758,7 +124761,7 @@ INSERT INTERFACES HERE
<dd><cite><a href="https://drafts.csswg.org/css-style-attr/">CSS Style Attributes</a></cite>, T. &Ccedil;elik, E. Etemad. W3C.</dd>

<dt id="refsCSSBG">[CSSBG]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-backgrounds/">CSS Backgrounds and Borders </a></cite>, B. Bos, E. Etemad, B. Kemper. W3C.</dd>
<dd><cite><a href="https://drafts.csswg.org/css-backgrounds/">CSS Backgrounds and Borders</a></cite>, B. Bos, E. Etemad, B. Kemper. W3C.</dd>

<dt id="refsCSSCASCADE">[CSSCASCADE]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-cascade/">CSS Cascading and Inheritance</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
Expand All @@ -124785,7 +124788,10 @@ INSERT INTERFACES HERE
<dd><cite><a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a></cite>, T. Atkins, E. Etemad, R. Atanassov. W3C.</dd>

<dt id="refsCSSIMAGES">[CSSIMAGES]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-images/">CSS Image Values and Replaced Content Module</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
<dd><cite><a href="https://drafts.csswg.org/css-images/">CSS Images Module</a></cite>, E. Etemad, T. Atkins, L. Verou. W3C.</dd>

<dt id="refsCSSIMAGES4">[CSSIMAGES4]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-images-4/">CSS Images Module Level 4</a></cite>, E. Etemad, T. Atkins, L. Verou. W3C.</dd>

<dt id="refsCSSLISTS">[CSSLISTS]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-lists/">CSS Lists and Counters</a></cite>, T. Atkins. W3C.</dd>
Expand Down