source-media-outside-doc.html (1735B)
1 <!DOCTYPE html> 2 <title>Image source selection using media queries is performed for img elements outside the document</title> 3 <link rel="help" href="https://html.spec.whatwg.org/#reacting-to-environment-changes"> 4 <link rel="help" href="https://html.spec.whatwg.org/#reacting-to-dom-mutations"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <iframe width="350" height="100" onload="async_test(this.contentWindow.run)" srcdoc=" 8 <!DOCTYPE html> 9 <script> 10 const { assert_equals } = parent; 11 const iframe = parent.document.querySelector('iframe'); 12 13 function run(t) { 14 const picture = document.createElement('picture'); 15 16 const source1 = document.createElement('source'); 17 source1.setAttribute('media', '(min-width: 300px)'); 18 source1.setAttribute('srcset', 'data:,a'); 19 picture.append(source1); 20 21 const source2 = document.createElement('source'); 22 source2.setAttribute('media', '(min-width: 200px)'); 23 source2.setAttribute('srcset', 'data:,b'); 24 picture.append(source2); 25 26 const img = document.createElement('img'); 27 img.src = 'data:,c'; 28 picture.append(img); 29 30 queueMicrotask(t.step_func(function() { 31 assert_equals(img.currentSrc, 'data:,a', 'Initial currentSrc value'); 32 matchMedia(source1.media).addEventListener( 33 'change', 34 function() { 35 queueMicrotask(t.step_func(function() { 36 assert_equals(img.currentSrc, 'data:,b', 'After MQ change'); 37 img.remove(); 38 queueMicrotask(t.step_func(function() { 39 assert_equals(img.currentSrc, 'data:,c', 'After removing img'); 40 t.done(); 41 })); 42 })); 43 }, 44 { once: true } 45 ); 46 iframe.width = 250; 47 })); 48 } 49 </script> 50 "></iframe>