<html>
<head>
<script>
    function runTest() {
        if (!window.testRunner || !window.sessionStorage)
            return;

        if (!sessionStorage.scaleFactorIsSet) {
            testRunner.waitUntilDone();
            testRunner.setBackingScaleFactor(2, scaleFactorIsSet);
        }
        
        if (sessionStorage.pageReloaded && sessionStorage.scaleFactorIsSet) {
            delete sessionStorage.pageReloaded;
            delete sessionStorage.scaleFactorIsSet;
            testRunner.notifyDone();
        } else {
            // Right now there is a bug that image-set does not properly deal with dynamic changes to the scale factor,
            // so to work around that, we must reload the page to get the 2x image.
            sessionStorage.pageReloaded = true;
            document.location.reload(true);
        }
    }
    
    function scaleFactorIsSet() {
        sessionStorage.scaleFactorIsSet = true;
    }

    window.onload = runTest;
</script>
    
<style>
    #foo {
        width:100px;
        height:100px;
        border-width: 10px;
        -webkit-border-image: -webkit-image-set(url('resources/blue-100-px-square.png') 1x, url('resources/green-200-px-square.png') 2x) 10 10 10 10 stretch stretch;
        border-style: solid;
    }
</style>
</head>

<body id="body">
    <div>This test passes if the div below is a blue 100px square when the deviceScaleFactor is 1, and if it is a 100px green square when the deviceScaleFactor is 2.</div>
    <div id=foo></div>
</body>
</html>