Add controls attribute to <img>

Add a new `controls` attribute to the `img` element that allows the user agent to add an interactive user interface over the image.

Animated images follow-up tracked by #12318.

Fixes #11856.

Author: yoelhawa

source

@@ -13727,7 +13727,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <li><code>details</code></li>
    <li><code>embed</code></li>
    <li><code>iframe</code></li>
-   <li><code>img</code> (if the <code data-x="attr-hyperlink-usemap">usemap</code> attribute is present)</li>
+   <li><code>img</code> (if the <code data-x="attr-hyperlink-usemap">usemap</code> or <code data-x="attr-img-controls">controls</code> attribute is present)</li>
    <li><code>input</code> (if the <code data-x="attr-input-type">type</code> attribute is <em>not</em> in the <span data-x="attr-input-type-hidden">Hidden</span> state)</li>
    <li><code>label</code></li>
    <li><code>select</code></li>
@@ -30804,7 +30804,7 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Phrasing content</span>.</dd>
    <dd><span>Embedded content</span>.</dd>
    <dd><span>Form-associated element</span>.</dd>
-   <dd>If the element has a <code data-x="attr-hyperlink-usemap">usemap</code> attribute: <span>Interactive content</span>.</dd>
+   <dd>If the element has a <code data-x="attr-hyperlink-usemap">usemap</code> or <code data-x="attr-img-controls">controls</code> attribute: <span>Interactive content</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>embedded content</span> is expected.</dd>
@@ -30820,6 +30820,7 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
    <dd><code data-x="attr-img-crossorigin">crossorigin</code></dd>
    <dd><code data-x="attr-hyperlink-usemap">usemap</code></dd>
    <dd><code data-x="attr-img-ismap">ismap</code></dd>
+   <dd><code data-x="attr-img-controls">controls</code></dd>
    <dd><code data-x="attr-dim-width">width</code></dd>
    <dd><code data-x="attr-dim-height">height</code></dd>
    <dd><code data-x="attr-img-referrerpolicy">referrerpolicy</code></dd>
@@ -30848,6 +30849,7 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   [<span>CEReactions</span>] attribute DOMString? <span data-x="dom-img-crossOrigin">crossOrigin</span>;
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLImageElement" data-x="dom-img-useMap">useMap</dfn>;
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLImageElement" data-x="dom-img-isMap">isMap</dfn>;
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLImageElement" data-x="dom-img-controls">controls</dfn>;
   [<span>CEReactions</span>, <span data-x="xattr-ReflectSetter">ReflectSetter</span>] attribute unsigned long <span data-x="dom-img-width">width</span>;
   [<span>CEReactions</span>, <span data-x="xattr-ReflectSetter">ReflectSetter</span>] attribute unsigned long <span data-x="dom-img-height">height</span>;
   readonly attribute unsigned long <span data-x="dom-img-naturalWidth">naturalWidth</span>;
@@ -31198,6 +31200,29 @@ interface <dfn interface>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   together with <code>source</code> elements with the <code data-x="attr-source-media">media</code>
   attribute specified in a <code>picture</code> element.</p>
 
+  <p>The <dfn element-attr for="img"><code data-x="attr-img-controls">controls</code></dfn>
+  attribute is a <span>boolean attribute</span>. If present, it indicates that the user agent may
+  expose a user interface to the user.</p>
+
+  <div w-nodev>
+
+  <p>If the <code data-x="attr-img-controls">controls</code> attribute is present, the user agent
+  may expose controls over the image (e.g., a control for fullscreen viewing). The specific
+  controls provided are <span>implementation-defined</span>, and can be platform-specific or based
+  on the user's preferences.</p>
+
+  <p>If the user agent exposes a user interface by displaying controls over the <code>img</code>
+  element, then the user agent should suppress any user interaction events while the user agent is
+  interacting with this interface.</p>
+
+  <p class="XXX"><a href="https://github.com/whatwg/html/issues/12318">Issue #12318</a> tracks
+  the interaction between image controls and animated images. User agents should not expose
+  animation controls for images before that issue is resolved.</p>
+
+  </div>
+
+  <hr>
+
   <p>The <code>img</code> element supports <span>dimension
   attributes</span>.</p>
 
@@ -152476,6 +152501,7 @@ interface <dfn interface>External</dfn> {
          <code data-x="attr-img-crossorigin">crossorigin</code>;
          <code data-x="attr-hyperlink-usemap">usemap</code>;
          <code data-x="attr-img-ismap">ismap</code>;
+         <code data-x="attr-img-controls">controls</code>;
          <code data-x="attr-dim-width">width</code>;
          <code data-x="attr-dim-height">height</code>;
          <code data-x="attr-img-referrerpolicy">referrerpolicy</code>;
@@ -153707,7 +153733,7 @@ interface <dfn interface>External</dfn> {
      <td>
       <code>a</code> (if the <code data-x="attr-hyperlink-href">href</code> attribute is present);
       <code>audio</code> (if the <code data-x="attr-media-controls">controls</code> attribute is present);
-      <code>img</code> (if the <code data-x="attr-hyperlink-usemap">usemap</code> attribute is present);
+      <code>img</code> (if the <code data-x="attr-hyperlink-usemap">usemap</code> or <code data-x="attr-img-controls">controls</code> attribute is present);
       <code>input</code> (if the <code data-x="attr-input-type">type</code> attribute is <em>not</em> in the <span data-x="attr-input-type-hidden">Hidden</span> state);
       <code>video</code> (if the <code data-x="attr-media-controls">controls</code> attribute is present)
 
@@ -154116,6 +154142,7 @@ interface <dfn interface>External</dfn> {
      <th> <code data-x="">controls</code>
      <td> <code data-x="attr-media-controls">audio</code>;
           <code data-x="attr-media-controls">video</code>
+          <code data-x="attr-img-controls">img</code>;
      <td> Show user agent controls
      <td> <span>Boolean attribute</span>
     <tr>
@@ -158352,6 +158379,7 @@ INSERT INTERFACES HERE
   Yi-An Huang,
   Yngve Nysaeter Pettersen,
   Yoav Weiss,
+  Yoel Hawa, <!-- yoelhawa on GitHub -->
   Yonathan Randolph,
   Yu Huojiang,
   Yuki Okushi, <!-- JohnTitor on GitHub -->