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.

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

Support zero dimension values for aspect-ratio #6529

Merged
merged 3 commits into from May 12, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
48 changes: 30 additions & 18 deletions source
Expand Up @@ -1977,7 +1977,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
making the experience more accessible and usable to the user.</p>

<p>User agents that are designated as supporting the suggested default rendering must, while so
designated, implement the rules <a href="#rendering">the rendering section</a> defines as the
designated, implement the rules <a href="#rendering">the Rendering section</a> defines as the
behavior that user agents are <em>expected</em> to implement.</p>
</dd>

Expand Down Expand Up @@ -18524,7 +18524,7 @@ interface <dfn>HTMLOListElement</dfn> : <span>HTMLElement</span> {
data-x="attr-ol-type">type</code> attribute.</p>

<p class="note">For CSS user agents, a mapping for this attribute to the
<span>'list-style-type'</span> CSS property is given <a href="#decohints">in the rendering
<span>'list-style-type'</span> CSS property is given <a href="#decohints">in the Rendering
section</a> (the mapping is straightforward: the states above have the same names as their
corresponding CSS values).</p>

Expand Down Expand Up @@ -26102,12 +26102,11 @@ 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>source</code> element supports <span>dimension attributes</span>. The
annevk marked this conversation as resolved.
Show resolved Hide resolved
<code>img</code> element can use the <code data-x="attr-dim-width">width</code> and <code
data-x="attr-dim-height">height</code> attributes of a <code>source</code> element, instead of
annevk marked this conversation as resolved.
Show resolved Hide resolved
those on the <code>img</code> element itself, to determine its rendered dimensions and
aspect-ratio, <a href="#dimRendering">as defined in the Rendering section</a>.</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
Expand Down Expand Up @@ -32224,7 +32223,7 @@ interface <dfn>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span> {
that do not contain the video represent nothing.</p>

<p class="note">In user agents that implement CSS, the above requirement can be implemented by
using the <a href="#video-object-fit">style rule suggested in the rendering section</a>.</p>
using the <a href="#video-object-fit">style rule suggested in the Rendering section</a>.</p>

<p>The <span>intrinsic width</span> of a <code>video</code> element's playback area is the
<span>intrinsic width</span> of the <span>poster frame</span>, if that is available and the
Expand Down Expand Up @@ -57421,7 +57420,7 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
specified should not be shown to the user. This requirement may be implemented indirectly through
the style layer. For example, user agents that <a href="#renderingUA">support the suggested
default rendering</a> implement this requirement using the CSS rules described in the <a
href="#rendering">rendering section</a>.</p>
href="#rendering">Rendering section</a>.</p>

</div>

Expand Down Expand Up @@ -62620,7 +62619,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>
Expand Down Expand Up @@ -112822,7 +112821,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
Expand Down Expand Up @@ -114485,21 +114492,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>


Expand Down Expand Up @@ -116520,7 +116532,7 @@ interface <dfn>HTMLFrameElement</dfn> : <span>HTMLElement</span> {
data-x="dom-body-background">background</code></dfn> IDL attribute of the <code>body</code>
element must <span>reflect</span> the element's <code data-x="attr-background">background</code>
content attribute. (The <code data-x="attr-background">background</code> content is <em>not</em>
defined to contain a <span>URL</span>, despite rules regarding its handling in the rendering
defined to contain a <span>URL</span>, despite rules regarding its handling in the Rendering
section above.)</p>

<hr>
Expand Down