blob: bab6732c6296a22d1c78aed7fd021f9cd53b85cd [file] [log] [blame]
<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>