background-tile-bleed.html | Explore in Territory

<!DOCTYPE html>
<style>
#div-horizontal {
  width: 200px;
  height: 100px;
  /* red band at the bottom */
  background-image: url("data:image/svg+xml,\
  <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
    <rect width='100%' height='100%' fill='red'/>\
    <rect width='100%' height='100' fill='green'/>\
  </svg>");
}

#div-vertical {
  width: 100px;
  height: 200px;
  /* red band on the right */
  background-image: url("data:image/svg+xml,\
  <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
    <rect width='100%' height='100%' fill='red'/>\
    <rect width='100' height='100%' fill='green'/>\
  </svg>");
}
</style>

<script src="resources/srcset-helper.js"></script>

<!-- There should be no bleeding due to repeat edge wrapping in the dimension
     fully covered by the tile -->
<div id="div-horizontal"></div>
<br>
<div id="div-vertical"></div>

chromium/third_party/blink/web_tests/fast/hidpi/background-tile-bleed.html