image-set-border-image-comparison.html

<!DOCTYPE html>
<script src="resources/srcset-helper.js"></script>
<style>
  div {
    box-sizing: border-box;
    width: 40px;
    height: 13px;
    border-style: solid;
  }

  .test1 {
    border-image: 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: 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;
  }

  .test5 {
    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;
  }

  .test6 {
    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;
  }

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

The first two and last two tests should match the middle two tests.
<br><br>

<div class="test1"></div><br>
<div class="test2"></div><br>
<div class="test3"></div><br>
<div class="test4"></div><br>
<div class="test5"></div><br>
<div class="test6"></div><br>
chromium/third_party/blink/web_tests/fast/hidpi/image-set-border-image-comparison.html
