Support zero dimension values for aspect-ratio

Also map <canvas width height> to aspect-ratio consistently with how the attributes are parsed.

Tests: web-platform-tests/wpt#28229.

Follow-up: #6528.

Closes #4961 and closes #6527.

source

@@ -26103,9 +26103,9 @@ interface <dfn>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
     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
+    can <span>map to the aspect-ratio property (using dimension rules)</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>
 
@@ -62620,7 +62620,7 @@ try {
   <code>CanvasRenderingContext2D</code> APIs, and the source image's dimensions must be the <span
   data-x="concept-video-intrinsic-width">intrinsic width</span> and <span
   data-x="concept-video-intrinsic-height">intrinsic height</span> of the <span>media resource</span>
-  (i.e. after any aspect-ratio correction has been applied).</p>
+  (i.e., after any aspect-ratio correction has been applied).</p>
 
   <p>When a <code>CanvasImageSource</code> object represents an <code>HTMLCanvasElement</code>, the
   element's bitmap must be used as the source image.</p>
@@ -112822,7 +112822,15 @@ console.assert(container.firstChild instanceof SuperP);
   <p>When the text below says that a pair of attributes <var>w</var> and <var>h</var> on an
   element <var>element</var> <dfn>map to the aspect-ratio property</dfn>, it means that if
   <var>element</var> has both attributes <var>w</var> and <var>h</var>, and parsing those
-  attributes' values using the <span>rules for parsing nonzero dimension values</span> doesn't
+  attributes' values using the <span>rules for parsing non-negative integers</span> doesn't
+  generate an error for either, then the user agent is expected to use the parsed integers as a
+  <span data-x="presentational hints">presentational hint</span> for the <span>'aspect-ratio'</span>
+  property of the form <code data-x="">auto <var>w</var> / <var>h</var></code>.</p>
+
+  <p>When the text below says that a pair of attributes <var>w</var> and <var>h</var> on an
+  element <var>element</var> <dfn>map to the aspect-ratio property (using dimension rules)</dfn>, it
+  means that if <var>element</var> has both attributes <var>w</var> and <var>h</var>, and parsing
+  those attributes' values using the <span>rules for parsing dimension values</span> doesn't
   generate an error or return a percentage for either, then the user agent is expected to use the
   parsed dimensions as a <span data-x="presentational hints">presentational hint</span> for the
   <span>'aspect-ratio'</span> property of the form <code data-x="">auto
@@ -114485,21 +114493,26 @@ input[type=image i][align=bottom i], object[align=bottom i] {
   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>
+  similarly <span>map to the aspect-ratio property (using dimension rules)</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>
+  attributes on <code>embed</code>, <code>iframe</code>, <code>object</code>, and <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>,
-  and <code>video</code> elements, and <code>input</code> elements with a <code
+  attributes <span>map to the aspect-ratio property (using dimension rules)</span> on
+  <code>img</code> and <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.
+  Button</span> state.</p>
+
+  <p>The <code data-x="attr-canvas-width">width</code> and <code
+  data-x="attr-canvas-height">height</code> attributes <span>map to the aspect-ratio property</span>
+  on <code>canvas</code> elements.</p>
   </div>