Note how orientation metadata affects naturalWidth/Height

Partially addresses #4495.

This also cleans up some of the references and bibliography data for
CSS Images.

Author: heycam

source

@@ -3450,7 +3450,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>
@@ -3515,9 +3514,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
@@ -3552,21 +3548,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>
@@ -26851,6 +26848,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>
 
@@ -124730,7 +124733,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>
@@ -124757,7 +124760,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>