<script src="resources/ensure-hidpi.js"></script>
<style>
img {
    width: 200px;
    height: 200px;
}

p {
    width: 200px;
    height: 100px;
    display: inline-block;
    font: 20px/1 Ahem;
}

.filtered {
    -webkit-filter: blur(0px);
}
</style>
<script>
function runTest() {
    if (window.testRunner) {
        scaleFactorIsSet();
        return;
    }

    testRunner.waitUntilDone();
    testRunner.setBackingScaleFactor(2, scaleFactorIsSet);
}

function scaleFactorIsSet() {
    var target = document.getElementById('target');
    target.style.height = 1000;
    scrollBy(0, 200);
    setTimeout(function () {
        scrollBy(0, -200);
        setTimeout(function () {
            if (window.testRunner)
                testRunner.notifyDone();
        }, 0);
    }, 0);
}

window.addEventListener("load", runTest, false);
</script>
<div>This is testing that image buffers for filters are correctly scaled with the device scale factor on the HiDPI environment. If it is wrong, this test causes a crash.</div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect fill='green' width='100%' height='100%'/></svg>">
<img class="filtered" id="target" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect fill='green' width='100%' height='100%'/></svg>">