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

Jump to bottom

Add HTMLImageElement.isTypeSupported() #10055

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add HTMLImageElement.isTypeSupported() #10055

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f6b6bb
Add HTMLImageElement.isTypeSupported()
annevk Jan 12, 2024
51989ee
Update source
annevk Jan 12, 2024
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
60 changes: 53 additions & 7 deletions source
View file
Open in desktop
Expand Up @@ -28840,6 +28840,8 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
[<span>HTMLConstructor</span>] constructor();

static Promise&lt;boolean&gt; <span data-x="dom-img-isTypeSupported">isTypeSupported</span>(DOMString <var>mimeType</var>);

[<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-alt">alt</span>;
[<span>CEReactions</span>] attribute USVString <span data-x="dom-img-src">src</span>;
[<span>CEReactions</span>] attribute USVString <span data-x="dom-img-srcset">srcset</span>;
Expand Down Expand Up @@ -29217,9 +29219,17 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
</div>

<dl class="domintro">
<dt><code data-x=""><var>supported</var> = await <span>HTMLImageElement</span>.<span subdfn data-x="dom-img-isTypeSupported">isTypeSupported</span>(<var>mimeType</var>)</code></dt>
<dd>
<p>Returns a promise resolved with true, if <var>mimeType</var> is supported for the
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be worth linking "supported" to "supported image MIME types" here, just as helpful link for devs?

<code>img</code> element by the user agent; otherwise false.</p>

<p>The promise will be rejected with a <code>TypeError</code> if <var>mimeType</var> cannot be
parsed.</p>
</dd>

<dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-width">width</span> [ = <var>value</var> ]</code></dt>
<dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-height">height</span> [ = <var>value</var> ]</code></dt>

<dd>
<p>These attributes return the actual rendered dimensions of the image, or 0 if the dimensions
are not known.</p>
Expand All @@ -29229,25 +29239,21 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {

<dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-naturalWidth">naturalWidth</span></code></dt>
<dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-naturalHeight">naturalHeight</span></code></dt>

<dd>
<p>These attributes return the natural dimensions of the image, or 0 if the dimensions are not
known.</p>
</dd>

<dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-complete">complete</span></code></dt>

<dd>
<p>Returns true if the image has been completely downloaded or if no image is specified;
otherwise, returns false.</p>
</dd>

<dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-currentSrc">currentSrc</span></code></dt>

<dd><p>Returns the image's <span>absolute URL</span>.</p></dd>

<dt><code data-x=""><var>image</var>.<span subdfn data-x="dom-img-decode">decode</span>()</code></dt>

<dd>
<p>This method causes the user agent to <span data-x="img-decoding-process">decode</span> the
image <span>in parallel</span>, returning a promise that fulfills when decoding is complete.</p>
Expand All @@ -29257,7 +29263,6 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
</dd>

<dt><code data-x=""><var>image</var> = new <span subdfn data-x="dom-image">Image</span>([ <var>width</var> [, <var>height</var> ] ])</code></dt>

<dd>
<p>Returns a new <code>img</code> element, with the <code data-x="attr-dim-width">width</code>
and <code data-x="attr-dim-height">height</code> attributes set to the values passed in the
Expand All @@ -29267,6 +29272,44 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {

<div w-nodev>

<p>The static <dfn method for="HTMLImageElement"
data-x="dom-img-isTypeSupported"><code>isTypeSupported(<var>mimeType</var>)</code></dfn> method
steps are:</p>

<ol>
<li><p>Let <var>mimeTypeRecord</var> be the result of <span data-x="parse a MIME type">parsing a
MIME type</span> given <var>mimeType</var>.</p></li>

<li><p>If <var>mimeTypeRecord</var> is failure, then return <span>a promise rejected with</span>
a <code>TypeError</code>.</p></li>

<li><p>Let <var>promise</var> be a new promise.</p></li>

<li><p>Let <var>global</var> be the <span>current global object</span>.</p></li>

<li>
<p><span>In parallel</span>:</p>

<ol>
<li><p>Let <var>supported</var> be false.</p></li>

<li><p>If <var>mimeTypeRecord</var> is in the user agent's <span>supported image MIME
types</span> (and the user agent thus recognizes the <span data-x="MIME type
essence">essence</span> and all parameters (if any)), set <var>supported</var> to
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure exactly how parameter matching is supposed to work. Let's say a UA supports image/foo with the bar parameter set to any value. The MIME type record you get from parsing image/foo;bar=baz is not literally going to be in the set. (Unless the set is infinite in size; I guess in theory that's allowed.)

It feels like the "supported image MIME types" structure needs to get more complicated, to handle this sort of case?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair, how about a map of MIME type essences to lists of parameter names?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, that would solve my example, but what about if the UA supports image/foo;bar=X but only X? :)

I think it might be best to just have a UA-defined "supports image MIME type mimeType" predicate, which takes a MIME type and returns a boolean.

Copy link
Member Author

@annevk annevk Jan 17, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fair. I guess we do want some words to make it so that unknown parameters or parameter values result in non-support.

true.</p></li>

<li><p><span>Queue a global task</span> on the <span>DOM manipulation task source</span> given
<var>global</var> to resolve <var>promise</var> with <var>supported</var>.</p></li>
</ol>
</li>

<li><p>Return <var>promise</var>.</p></li>
</ol>

<p class="note">This is modeled after <code data-x="">ImageDecoder.isTypeSupported()</code>, but
is its own method as user agents can support non-image formats through the <code>img</code>
element.</p>

<p>The IDL attributes <dfn attribute for="HTMLImageElement"
data-x="dom-img-width"><code>width</code></dfn> and <dfn attribute for="HTMLImageElement"
data-x="dom-img-height"><code>height</code></dfn> must return the rendered width and height of the
Expand Down Expand Up @@ -30488,7 +30531,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
of a multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an
interactive fashion, but should honour any animation in the resource.</p>

<p>This specification does not specify which image types are to be supported.</p>
<p>A user agent has an associated <dfn>supported image MIME types</dfn> (a <span>set</span> of
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can/should we be less implementation-defined for the case of a user agent with images disabled? Chrome still lets you toggle images for a site pretty easily using the site settings button accessed from the URL bar.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that would be good, but do we have a processing model for images being disabled? https://html.spec.whatwg.org/#when-to-obtain-images suggests that images are either obtained immediately or on demand, but doesn't allow for them to be completely disabled. The specification model at least suggests to me that the supported image MIME type situation wouldn't change.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://html.spec.whatwg.org/#update-the-image-data step 2 seems like a reasonable processing model for images disabled. Not sure how battle-tested it is.

<span data-x="MIME type">MIME types</span>). A user agent's <span>supported image MIME
types</span> is <span>implementation-defined</span>.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's worth double-checking there aren't places in "update the image data" that would benefit from direct references to this concept. E.g. maybe step 2? Or maybe the indirect reference in step 27 should be more direct? Not sure though.



<h6>When to obtain images</h6>
Expand Down Expand Up @@ -141942,6 +141987,7 @@ INSERT INTERFACES HERE
Matthew Gregan,
Matthew Mastracci,
Matthew Noorenberghe,
Matthew Petroff,
Matthew Raymond,
Matthew Thomas,
Matthew Tylee Atkinson, <!-- matatk on GitHub -->
Expand Down