HTML: Add <source media> to media elements

See whatwg/html#9341
web-platform-tests · Jun 12, 2023 · 0f4b390 · 0f4b390
1 parent d8a00c2
commit 0f4b390
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 51 deletions.
diff --git a/...media-elements/loading-the-media-resource/resource-selection-source-media-env-change.html b/...media-elements/loading-the-media-resource/resource-selection-source-media-env-change.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>the &lt;source> media attribute: no reaction to environment change</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<iframe src="resources/media-min-width.html" width="300"></iframe>
+<script>
+const t = promise_test(async () => {
+  await new Promise(resolve => window.onload = resolve);
+  assert_equals(window[0].beforeEnvChange, '#a', 'beforeEnvChange');
+  assert_equals(window[0].afterEnvChange, '#a', 'afterEnvChange');
+  assert_equals(window[0].afterLoadCalled, '#b', 'afterLoadCalled');
+});
+</script>
diff --git a/...ed-content/media-elements/loading-the-media-resource/resource-selection-source-media.html b/...ed-content/media-elements/loading-the-media-resource/resource-selection-source-media.html
@@ -1,14 +1,14 @@
 <!doctype html>
-<title>the &lt;source> media attribute has no effect</title>
+<title>the &lt;source> media attribute</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <div id=log></div>
-<video><source src="resources/delayed-broken-video.py" media="none"></video>
+<video><source src="resources/delayed-broken-video.py" media="not all"></video>
 <script>
 test(function() {
   var v = document.querySelector('video');
   var s = document.querySelector('source');
-  assert_equals(v.networkState, v.NETWORK_LOADING);
-  assert_equals(v.currentSrc, s.src);
+  assert_equals(v.networkState, v.NETWORK_NO_SOURCE);
+  assert_equals(v.currentSrc, '');
 });
 </script>
diff --git a/...embedded-content/media-elements/loading-the-media-resource/resources/media-min-width.html b/...embedded-content/media-elements/loading-the-media-resource/resources/media-min-width.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<video></video>
+<script>
+function createSource(src, media) {
+  var source = document.createElement('source');
+  source.src = src;
+  if (media) {
+    source.media = media;
+  }
+  return source;
+}
+const rAF = () => new Promise(resolve => requestAnimationFrame(resolve));
+const hash = str => str.substr(str.lastIndexOf('#'));
+(async () => {
+  const v = document.querySelector('video');
+  v.append(createSource('delayed-broken-video.py#a', '(min-width: 200px)'));
+  v.append(createSource('delayed-broken-video.py#b'));
+  await rAF();
+  await rAF();
+  window.beforeEnvChange = hash(v.currentSrc);
+  window.frameElement.width = '150';
+  await rAF();
+  await rAF();
+  window.afterEnvChange = hash(v.currentSrc);
+  v.load()
+  await rAF();
+  await rAF();
+  window.afterLoadCalled = hash(v.currentSrc);
+})();
+</script>
diff --git a/html/semantics/embedded-content/media-elements/video_008.htm b/html/semantics/embedded-content/media-elements/video_008.htm