<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>