blob: 5448d5b4b89e93e947b925ccb72d29607b5a8af6 [file] [log] [blame]
<html>
<head>
<script>
function startTest() {
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.setBackingScaleFactor(2, finishTest);
}
}
function finishTest() {
setTimeout(function() { testRunner.notifyDone(); }, 0);
}
</script>
<style>
div {
box-sizing: border-box;
width: 40px;
height: 13px;
border-style: solid;
}
.test1 {
border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url('resources/Breakpoint-2x.png') 2x) 3 7 3 3 fill / 3px 7px 3px 3px;
}
.test2 {
border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url('resources/Breakpoint-2x.png') 2x) 3 7 3 3 fill;
border-width: 3px 7px 3px 3px;
}
.test3 {
border-image: url('resources/Breakpoint.png') 3 7 3 3 fill / 3px 7px 3px 3px;
}
.test4 {
border-image: url('resources/Breakpoint.png') 3 7 3 3 fill;
border-width: 3px 7px 3px 3px;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.test3, .test4 {
border-image-source: url('resources/Breakpoint-2x.png');
border-image-slice: 6 14 6 6 fill;
}
}
</style>
</head>
<body onload="startTest();">
The first two tests should match the last two.<br><br>
<div class="test1"></div><br>
<div class="test2"></div><br>
<div class="test3"></div><br>
<div class="test4"></div><br>
</body>
</html>