1 files changed, 50 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html
new file mode 100644
index 0000000000..5997e14e4b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>Image source selection using media queries is performed for img elements outside the document</title>
+<link rel="help" href="https://html.spec.whatwg.org/#reacting-to-environment-changes">
+<link rel="help" href="https://html.spec.whatwg.org/#reacting-to-dom-mutations">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<iframe width="350" height="100" onload="async_test(this.contentWindow.run)" srcdoc="
+<!DOCTYPE html>
+<script>
+const { assert_equals } = parent;
+const iframe = parent.document.querySelector('iframe');
+
+function run(t) {
+  const picture = document.createElement('picture');
+
+  const source1 = document.createElement('source');
+  source1.setAttribute('media', '(min-width: 300px)');
+  source1.setAttribute('srcset', 'data:,a');
+  picture.append(source1);
+
+  const source2 = document.createElement('source');
+  source2.setAttribute('media', '(min-width: 200px)');
+  source2.setAttribute('srcset', 'data:,b');
+  picture.append(source2);
+
+  const img = document.createElement('img');
+  img.src = 'data:,c';
+  picture.append(img);
+
+  queueMicrotask(t.step_func(function() {
+    assert_equals(img.currentSrc, 'data:,a', 'Initial currentSrc value');
+    matchMedia(source1.media).addEventListener(
+      'change',
+      function() {
+        queueMicrotask(t.step_func(function() {
+          assert_equals(img.currentSrc, 'data:,b', 'After MQ change');
+          img.remove();
+          queueMicrotask(t.step_func(function() {
+            assert_equals(img.currentSrc, 'data:,c', 'After removing img');
+            t.done();
+          }));
+        }));
+      },
+      { once: true }
+    );
+    iframe.width = 250;
+  }));
+}
+</script>
+"></iframe>