Re-add <source media> for media elements

Fixes whatwg#6363

Author: zcorpan

source

@@ -28130,10 +28130,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-src">src</code> (in <code>video</code> or <code>audio</code>)</dd>
+   <dd><code data-x="attr-source-media">media</code></dd>
+   <dd><code data-x="attr-source-src">src</code> (in <code>audio</code> or <code>video</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
@@ -28166,6 +28166,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 <span data-x="media element">media elements</span>. 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>.</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>
 
@@ -28190,11 +28201,6 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
     attribute</span>, which 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
@@ -28333,9 +28339,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>
 
@@ -35715,6 +35720,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
@@ -130649,11 +130659,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>
@@ -131978,7 +131988,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>