Add width and height attributes to source elements

Closes #4968.

Author: yoavweiss

source

@@ -26034,6 +26034,8 @@ interface <dfn>HTMLPictureElement</dfn> : <span>HTMLElement</span> {
    <dd><code data-x="attr-source-srcset">srcset</code></dd>
    <dd><code data-x="attr-source-sizes">sizes</code></dd>
    <dd><code data-x="attr-source-media">media</code></dd>
+   <dd><code data-x="attr-dim-width">width</code></dd>
+   <dd><code data-x="attr-dim-height">height</code></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
    <dd><a href="https://w3c.github.io/html-aria/#el-source">For authors</a>.</dd>
@@ -26049,6 +26051,8 @@ interface <dfn>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
   [<span>CEReactions</span>] attribute USVString <span data-x="dom-source-srcset">srcset</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-source-sizes">sizes</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-source-media">media</span>;
+  [<span>CEReactions</span>] attribute unsigned long <span data-x="dom-dim-width">width</span>;
+  [<span>CEReactions</span>] attribute unsigned long <span data-x="dom-dim-height">height</span>;
 };</code></pre>
    </dd>
    <dd w-dev>Uses <code>HTMLSourceElement</code>.</dd>
@@ -26088,6 +26092,13 @@ interface <dfn>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
     skip to the next <code>source</code> element if the value does not <span data-x="matches the
     environment">match the environment</span>.</p>
 
+    <p>The <span>source</span> element supports <span>dimension attributes</span>. These attributes
+    can <span>map to the aspect-ratio property</span> as well as the rendered dimensions of
+    sibling <span>img</span> element, if <span>source</span> element's parent is a
+    <span>picture</span> element and <span>source</span> element's <span>source set</span> is
+    returned as a result of <span>update the source set</span> for that sibling
+    <span>img</span>.</p>
+
     <p>The <code data-x="attr-source-type">type</code> attribute gives the type of the images in the
     <span>source set</span>, to allow the user agent to skip to the next <code>source</code> element
     if it does not support the given type.</p>
@@ -26341,6 +26352,9 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
   <p>An <code>img</code> element represents an image.</p>
 
+  <p>An <code>img</code> element has a <dfn data-x="concept-img-dimension-attribute-source">dimension
+  attribute source</dfn>, initially set to the element itself.</p>
+
   <!-- v2 ideas for <img>:
 
      * Maps sites would like to know which images are already cached, so that they can use images
@@ -27879,8 +27893,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
    <li><p>The element's parent is a <code>picture</code> element and a <code>source</code> element
    that is a previous sibling has its <code data-x="attr-source-srcset">srcset</code>, <code
-   data-x="attr-source-sizes">sizes</code>, <code data-x="attr-source-media">media</code>, or <code
-   data-x="attr-source-type">type</code> attributes set, changed, or removed.</p></li>
+   data-x="attr-source-sizes">sizes</code>, <code data-x="attr-source-media">media</code>, <code
+   data-x="attr-source-type">type</code>, <code data-x="attr-dim-width">width</code> or <code
+   data-x="attr-dim-height">height</code> attributes set, changed, or removed.</p></li>
 
    <li><p>The element's <span data-x="concept-node-adopt-ext">adopting steps</span> are run.</p></li>
 
@@ -28525,6 +28540,13 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
      <li><p>If <var>child</var> has a <code data-x="attr-source-type">type</code> attribute, and its
      value is an unknown or unsupported <span>MIME type</span>, continue to the next child.</p></li>
 
+     <li><p>If <var>child</var> has <code data-x="attr-dim-width">width</code> or <code
+     data-x="attr-dim-height">height</code> attributes, set <var>el</var>'s <span
+     data-x="concept-img-dimension-attribute-source">dimension attribute source</span> to
+     <var>child</var>. Otherwise, set <var>el</var>'s <span
+     data-x="concept-img-dimension-attribute-source">dimension attribute source</span> to
+     <var>el</var>.</p></li>
+
      <li><p><span>Normalize the source densities</span> of <var>source set</var>.</p></li>
 
      <li><p>Let <var>el</var>'s <span>source set</span> be <var>source set</var>.</p></li>
@@ -39397,16 +39419,16 @@ interface <dfn>HTMLAreaElement</dfn> : <span>HTMLElement</span> {
   <h4><dfn>Dimension attributes</dfn></h4>
 
   <p><span w-nodev><strong>Author requirements</strong>:</span> The <dfn element-attr
-  for="img,iframe,embed,object,video"><code data-x="attr-dim-width">width</code></dfn> and <dfn
-  element-attr for="img,iframe,embed,object,video"><code
+  for="img,iframe,embed,object,source,video"><code data-x="attr-dim-width">width</code></dfn> and
+  <dfn element-attr for="img,iframe,embed,object,source,video"><code
   data-x="attr-dim-height">height</code></dfn> attributes on <code>img</code>, <code>iframe</code>,
-  <code>embed</code>, <code>object</code>, <code>video</code>, and, when their <code
-  data-x="attr-input-type">type</code> attribute is in the <span
-  data-x="attr-input-type-image">Image Button</span> state, <code>input</code> elements may be
-  specified to give the dimensions of the visual content of the element (the width and height
-  respectively, relative to the nominal direction of the output medium), in <span data-x="'px'">CSS
-  pixels</span>. The attributes, if specified, must have values that are <span data-x="valid
-  non-negative integer">valid non-negative integers</span>.</p>
+  <code>embed</code>, <code>object</code>, <code>video</code>, <code>source</code> when the parent
+  is a <code>picture</code> element and, when their <code data-x="attr-input-type">type</code>
+  attribute is in the <span data-x="attr-input-type-image">Image Button</span> state,
+  <code>input</code> elements may be specified to give the dimensions of the visual content of the
+  element (the width and height respectively, relative to the nominal direction of the output
+  medium), in <span data-x="'px'">CSS pixels</span>. The attributes, if specified, must have values
+  that are <span data-x="valid non-negative integer">valid non-negative integers</span>.</p>
 
   <p>The specified dimensions given may differ from the dimensions specified in the resource itself,
   since the resource may have a resolution that differs from the CSS pixel resolution. (On screens,
@@ -39446,17 +39468,19 @@ interface <dfn>HTMLAreaElement</dfn> : <span>HTMLElement</span> {
   <p><strong>User agent requirements</strong>: User agents are expected to use these attributes <a
   href="#dimRendering">as hints for the rendering</a>.</p>
 
+
   <p>The <dfn attribute
-  for="HTMLImageElement,HTMLIFrameElement,HTMLEmbedElement,HTMLObjectElement,HTMLVideoElement"><code
+  for="HTMLImageElement,HTMLIFrameElement,HTMLEmbedElement,HTMLObjectElement,HTMLSourceElement,HTMLVideoElement"><code
   data-x="dom-dim-width">width</code></dfn> and <dfn attribute
-  for="HTMLImageElement,HTMLIFrameElement,HTMLEmbedElement,HTMLObjectElement,HTMLVideoElement"><code
+  for="HTMLImageElement,HTMLIFrameElement,HTMLEmbedElement,HTMLObjectElement,HTMLSourceElement,HTMLVideoElement"><code
   data-x="dom-dim-height">height</code></dfn> IDL attributes on the <code>iframe</code>,
-  <code>embed</code>, <code>object</code>, and <code>video</code> elements must <span>reflect</span>
-  the respective content attributes of the same name.</p>
+  <code>embed</code>, <code>object</code>, <code>source</code>, and <code>video</code> elements must
+  <span>reflect</span> the respective content attributes of the same name.</p>
 
-  <p class="note">For <code>iframe</code>, <code>embed</code>, and <code>object</code> the IDL
-  attributes are <code data-x="idl-DOMString">DOMString</code>; for <code>video</code> the IDL attributes are <code
-  data-x="idl-unsigned-long">unsigned long</code>.</p>
+  <p class="note">For <code>iframe</code>, <code>embed</code> and <code>object</code> the IDL
+  attributes are <code data-x="idl-DOMString">DOMString</code>; for <code>video</code> and
+  <code>source</code> the IDL attributes are <code data-x="idl-unsigned-long">unsigned
+  long</code>.</p>
 
   <p class="note">The corresponding IDL attributes for <code data-x="dom-img-height">img</code> and
   <code data-x="dom-input-height">input</code> elements are defined in those respective elements'
@@ -114341,13 +114365,19 @@ input[type=image i][align=bottom i], object[align=bottom i] {
   'solid'.</p>
 
   <p id="dimRendering">The <code data-x="attr-dim-width">width</code> and <code
-  data-x="attr-dim-height">height</code> attributes on <code>embed</code>, <code>iframe</code>,
-  <code>img</code>, <code>object</code> or <code>video</code> elements, and <code>input</code>
-  elements with a <code data-x="attr-input-type">type</code> attribute in the <span
-  data-x="attr-input-type-image">Image Button</span> state and that either represents an image or
-  that the user expects will eventually represent an image, <span data-x="maps to the dimension
-  property">map to the dimension properties</span> <span>'width'</span> and <span>'height'</span> on
-  the element respectively.</p>
+  data-x="attr-dim-height">height</code> attributes on an <code>img</code> element's <span
+  data-x="concept-img-dimension-attribute-source">dimension attribute source</span> <span
+  data-x="maps to the dimension property">map to the dimension properties</span>
+  <span>'width'</span> and <span>'height'</span> on the <code>img</code> element respectively. They
+  similarly <span>map to the aspect-ratio property</span> of the <code>img</code> element.</p>
+
+  <p>The <code data-x="attr-dim-width">width</code> and <code data-x="attr-dim-height">height</code>
+  attributes on <code>embed</code>, <code>iframe</code>, <code>object</code> or <code>video</code>
+  elements, and <code>input</code> elements with a <code data-x="attr-input-type">type</code>
+  attribute in the <span data-x="attr-input-type-image">Image Button</span> state and that either
+  represents an image or that the user expects will eventually represent an image, <span
+  data-x="maps to the dimension property">map to the dimension properties</span>
+  <span>'width'</span> and <span>'height'</span> on the element respectively.</p>
 
   <p>The <code data-x="attr-dim-width">width</code> and <code data-x="attr-dim-height">height</code>
   attributes <span>map to the aspect-ratio property</span> on <code>img</code>, <code>canvas</code>,
@@ -119277,7 +119307,9 @@ interface <dfn>MimeType</dfn> {
          <code data-x="attr-source-type">type</code>;
          <code data-x="attr-source-srcset">srcset</code>;
          <code data-x="attr-source-sizes">sizes</code>;
-         <code data-x="attr-source-media">media</code></td>
+         <code data-x="attr-source-media">media</code>;
+         <code data-x="attr-dim-width">width</code>;
+         <code data-x="attr-dim-height">height</code></td>
      <td><code>HTMLSourceElement</code></td>
     </tr>
 
@@ -120408,6 +120440,7 @@ interface <dfn>MimeType</dfn> {
           <code data-x="attr-dim-height">img</code>;
           <code data-x="attr-dim-height">input</code>;
           <code data-x="attr-dim-height">object</code>;
+          <code data-x="attr-dim-width">source</code>;
           <code data-x="attr-dim-height">video</code>
      <td> Vertical dimension
      <td> <span>Valid non-negative integer</span>
@@ -121037,6 +121070,7 @@ interface <dfn>MimeType</dfn> {
           <code data-x="attr-dim-width">img</code>;
           <code data-x="attr-dim-width">input</code>;
           <code data-x="attr-dim-width">object</code>;
+          <code data-x="attr-dim-width">source</code>;
           <code data-x="attr-dim-width">video</code>
      <td> Horizontal dimension
      <td> <span>Valid non-negative integer</span>