<!DOCTYPE html>
<script>
    window.targetScaleFactor = 1;
</script>
<script src="resources/srcset-helper.js"></script>
<script src="../../resources/js-test.js"></script>
<script>
    addEventListener("load", function() {
        shouldBeTrue('document.getElementById("foo").clientWidth==200');
        shouldBeTrue('document.getElementById("foo2").clientWidth==200');
        shouldBeTrue('document.getElementById("foo3").clientWidth==200');
        shouldBeTrue('document.getElementById("foo4").clientWidth==200');
        shouldBeTrue('document.getElementById("foo5").clientWidth==200');
        shouldBeTrue('document.getElementById("foo6").clientWidth==200');
        shouldBeTrue('document.getElementById("foo7").clientWidth==200');
        shouldBeTrue('document.getElementById("foo8").clientWidth==200');
        shouldBeTrue('document.getElementById("foo9").clientWidth==200');
        shouldBeTrue('document.getElementById("foo10").clientWidth==200');
    }, false);
</script>
<div>This test passes if the image below is a 200px green square when the deviceScaleFactor is 1.</div>
<div>It tests that the 1x resource is ignored since it contains invalid descriptors.</div>
<div>The 2x resource has an intrinsic width of 200px, since it's a 400px wide image at 2x DPR.</div>
<img id="foo" src="" srcset="resources/blue-100-px-square.png 43q 1x dfs 3dd, resources/green-400-px-square.png 2x">
<img id="foo2" src="" srcset="resources/blue-100-px-square.png 300q, resources/green-400-px-square.png 2x">
<img id="foo3" src="" srcset="resources/blue-100-px-square.png 100w 100w, resources/green-400-px-square.png 2x">
<img id="foo4" src="" srcset="resources/blue-100-px-square.png 100h 100h, resources/green-400-px-square.png 2x">
<img id="foo5" src="" srcset="resources/blue-100-px-square.png 100x 100h, resources/green-400-px-square.png 2x">
<img id="foo6" src="" srcset="resources/blue-100-px-square.png 100x 100w, resources/green-400-px-square.png 2x">
<img id="foo7" src="" srcset="resources/blue-100-px-square.png -100w, resources/green-400-px-square.png 2x">
<img id="foo8" src="" srcset="resources/blue-100-px-square.png -100h, resources/green-400-px-square.png 2x">
<img id="foo9" src="" srcset="resources/blue-100-px-square.png -1x, resources/green-400-px-square.png 2x">
<img id="foo10" src="" srcset="resources/blue-100-px-square.png 100h, resources/green-400-px-square.png 2x">
