image-picture-react-to-media-changes.html

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script>
var jsTestIsAsync = true;
var img;

onload = function() {
    // Ensure a layout happened by using rAF.
    requestAnimationFrame(function() {
        var iframe = document.getElementById('frame');
        var iframeDoc = iframe.contentWindow.document;

        iframeDoc.body.innerHTML = '<picture id="pic">' +
            '<source media="(max-width: 90px)" srcset="resources/blue_rect.jpg"></source>' +
            '<source media="(max-width: 120px)" srcset="resources/image-set-4x.png"></source>' +
            '</picture>';

        img = iframeDoc.createElement('img');

        var first = true;
        img.onload = function() {
            if (first) {
                first = false;
                shouldNotBe('-1', 'img.currentSrc.indexOf("image-set-4x")');
                iframe.style.width = '80px';
            } else {
                shouldNotBe('-1', 'img.currentSrc.indexOf("blue_rect")');
                finishJSTest();
            }
        };
        img.onerror = function() {
            testFailed('Image should have loaded');
        };
        iframeDoc.getElementById('pic').appendChild(img);
    });
}
</script>

<iframe id="frame" style="width: 100px;"></iframe>

chromium/third_party/blink/web_tests/fast/dom/HTMLImageElement/image-picture-react-to-media-changes.html