blob: 7ac17cb59bdbea67e14d1d16f5ab332c0600cb44 [file] [log] [blame]
<html>
<head>
<script>
function runTest() {
if (!window.layoutTestController || !window.sessionStorage)
return;
if (!sessionStorage.scaleFactorIsSet) {
layoutTestController.waitUntilDone();
internals.settings.setDeviceScaleFactor(2);
setTimeout(scaleFactorIsSet, 0);
}
if (sessionStorage.pageReloaded && sessionStorage.scaleFactorIsSet) {
delete sessionStorage.pageReloaded;
delete sessionStorage.scaleFactorIsSet;
layoutTestController.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:90px;
height:90px;
background-image: -webkit-image-set(url('resources/deleteButton.png') 1x, url('resources/deleteButton-2x.png') 2x);
background-repeat: repeat;
background-size: 30 30;
}
</style>
</head>
<body id="body">
<div>This test passes if the div below contains 9 evenly spaced delete buttons, and if the high resolution resource is used when the deviceScaleFactor is 2.</div>
<div id=foo></div>
</body>
</html>