<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/currentSrcHelper.js"></script>

<picture>
    <source id="src" srcset="../../hidpi/resources/image-set-1x.png?1 1x">
    <img id="simple" src="resources/blue_rect.jpg?1">
</picture>

<script>
    jsTestIsAsync = true;

    var iteration = 0;

    var simple = document.getElementById('simple');
    var src = document.getElementById('src');

    simple.addEventListener('load', function() {
        switch (iteration) {
        case 0:
            shouldBe('document.getElementById("simple").clientWidth', '400');
            shouldBe('currentSrcFileName("simple")', '"image-set-1x.png?1"');

            src.srcset = 'resources/image-set-4x.png 1x';
            break;
        case 1:
            shouldBe('document.getElementById("simple").clientWidth', '1600');
            shouldBe('currentSrcFileName("simple")', '"image-set-4x.png"');

            src.parentNode.removeChild(src);
            break;
        case 2:
            shouldBe('document.getElementById("simple").clientWidth', '75');
            shouldBe('currentSrcFileName("simple")', '"blue_rect.jpg?1"');

            src.srcset = '../../hidpi/resources/image-set-1x.png?2 1x';
            simple.parentNode.insertBefore(src, simple);
            break;
        case 3:
            shouldBe('document.getElementById("simple").clientWidth', '400');
            shouldBe('currentSrcFileName("simple")', '"image-set-1x.png?2"');


            // When there is a <source>, changing the <src> should have no effect
            simple.src = 'resources/blue_rect.jpg?2';
            shouldBe('currentSrcFileName("simple")', '"image-set-1x.png?2"');

            finishJSTest();
            break;
        };
        ++iteration;
    }, false);
</script>