<!doctype html> <meta charset=utf-8> <title>img update media</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> var t = async_test('set media after src updates selected image'); var img; onload = t.step_func(function() { img = document.querySelector('img'); img.addEventListener('load', t.step_func_done(onImgLoad)); var source = document.querySelector('source[data-media]'); source.setAttribute('media', source.getAttribute('data-media')); }); function onImgLoad() { img.removeEventListener('load', onImgLoad); assert_true(img.currentSrc.indexOf(img.getAttribute('data-expect')) > -1); } </script> <div id="log"></div> <picture> <source srcset="/images/fail.gif" data-media="(max-width: 1px)" /> <source srcset="/images/smiley.png" /> <img data-expect="/images/smiley.png"> </picture>