Re-add <source media> for media elements

Fixes #6363
whatwg · May 26, 2023 · 57ad41c · 57ad41c
1 parent e85c0bf
commit 57ad41c
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/source b/source
@@ -28099,10 +28099,10 @@ interface <dfn interface>HTMLPictureElement</dfn> : <span>HTMLElement</span> {
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-source-type">type</code></dd>
+   <dd><code data-x="attr-source-media">media</code></dd>
    <dd><code data-x="attr-source-src">src</code> (in <code>video</code> or <code>audio</code>)</dd>
    <dd><code data-x="attr-source-srcset">srcset</code> (in <code>picture</code>)</dd>
    <dd><code data-x="attr-source-sizes">sizes</code> (in <code>picture</code>)</dd>
-   <dd><code data-x="attr-source-media">media</code> (in <code>picture</code>)</dd>
    <dd><code data-x="attr-dim-width">width</code> (in <code>picture</code>)</dd>
    <dd><code data-x="attr-dim-height">height</code> (in <code>picture</code>)</dd>
    <dt><span
@@ -28135,6 +28135,17 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
   <p>The <dfn element-attr for="source" data-x="attr-source-type"><code>type</code></dfn> attribute
   may be present. If present, the value must be a <span>valid MIME type string</span>.</p>
 
+  <p>The <dfn element-attr for="source" data-x="attr-source-media"><code>media</code></dfn>
+  attribute may also be present.  If present, the value must contain a <span>valid media query
+  list</span>. The user agent will 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 class="note">The <code data-x="attr-source-media">media</code> attribute is only evaluated
+  once during the <span data-x="concept-media-load-algorithm">resource selection algorithm</span>
+  for <code>audio</code> and <code>video</code> elements. In contrast, when using the
+  <code>picture</code> element, the user agent will <a href="#img-environment-changes">react to
+  changes in the environment</a> automatically.</p>
+
   <p>The remainder of the requirements depend on whether the parent is a <code>picture</code>
   element or a <span>media element</span>:</p>
 
@@ -28156,11 +28167,6 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
     data-x="attr-source-sizes">sizes</code> attribute contributes the <span>source size</span> to
     the <span>source set</span>, if the <code>source</code> element is selected.</p>
 
-    <p>The <dfn element-attr for="source" data-x="attr-source-media"><code>media</code></dfn>
-    attribute may also be present.  If present, the value must contain a <span>valid media query
-    list</span>. The user agent will 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 <code>source</code> element supports <span>dimension attributes</span>. The
     <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
@@ -28299,9 +28305,8 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
      </dl>
     </div>
 
-    <p>The <code data-x="attr-source-srcset">srcset</code>, <code
-    data-x="attr-source-sizes">sizes</code>, and <code data-x="attr-source-media">media</code>
-    attributes must not be present.</p>
+    <p>The <code data-x="attr-source-srcset">srcset</code> and <code
+    data-x="attr-source-sizes">sizes</code> attributes must not be present.</p>
    </dd>
   </dl>
 
@@ -35552,6 +35557,11 @@ interface <dfn interface>MediaError</dfn> {
        <span>synchronous section</span>, and jump down to the <i>failed with elements</i> step
        below.</p></li>
 
+       <li><p>&#x231B; If <var>candidate</var> has a <code data-x="attr-source-media">media</code>
+       attribute whose value does not <span data-x="matches the environment">match the
+       environment</span>, then end the <span>synchronous section</span>, and jump down to the
+       <i>failed with elements</i> step below.</p></li>
+
        <li><p>&#x231B; Let <var>urlString</var> and <var>urlRecord</var> be the <span>resulting URL
        string</span> and the <span>resulting URL record</span>, respectively, that would have
        resulted from <span data-x="parse a url">parsing</span> the <span>URL</span> specified by
@@ -130197,11 +130207,11 @@ interface <dfn interface>External</dfn> {
          <code>audio</code></td>
      <td>empty</td>
      <td><span data-x="global attributes">globals</span>;
-         <code data-x="attr-source-src">src</code>;
          <code data-x="attr-source-type">type</code>;
+         <code data-x="attr-source-media">media</code>;
+         <code data-x="attr-source-src">src</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>;
          <code data-x="attr-dim-width">width</code>;
          <code data-x="attr-dim-height">height</code></td>
      <td><code>HTMLSourceElement</code></td>
@@ -131526,7 +131536,7 @@ interface <dfn interface>External</dfn> {
      <th> <code data-x="">media</code>
      <td> <code data-x="attr-link-media">link</code>;
           <code data-x="attr-meta-media">meta</code>;
-          <code data-x="attr-source-media">source</code> (in <code>picture</code>);
+          <code data-x="attr-source-media">source</code>;
           <code data-x="attr-style-media">style</code>
      <td> Applicable media
      <td> <span>Valid media query list</span>