image-set-border-image-dynamic.html

<!DOCTYPE html>
<script src="resources/srcset-helper.js"></script>
<style>
  #standard {
    -webkit-border-image: image-set(
      url('resources/blue-100-px-square.png') 1x,
      url('resources/green-400-px-square.png') 2x
    ) 10 10 10 10 stretch stretch;
  }

  #prefixed {
    -webkit-border-image: -webkit-image-set(
      url('resources/blue-100-px-square.png') 1x,
      url('resources/green-400-px-square.png') 2x
    ) 10 10 10 10 stretch stretch;
  }

  .foo {
    width: 100px;
    height: 100px;
  }
</style>

<div>
  This test passes if the divs below are 100px blue squares when the
  deviceScaleFactor is 1, and 100px green squares when the deviceScaleFactor
  is 2.
</div>
<div>
  When run in the test harness,
  this test is distinct from image-set-border-image,
  because it ensures that the green image loads
  dynamically when the scale factor changes.
</div>
<br>
<div id="standard" class="foo"></div>
<br>
<div id="prefixed" class="foo"></div>

chromium/third_party/blink/web_tests/fast/hidpi/image-set-border-image-dynamic.html