tiled-background-image.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
  #div1 {
    width: 64px;
    height: 32px;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><circle fill="#3364c2" cx="64" cy="64" r="64" /></svg>');
    background-size: 32px 32px;
    background-repeat: repeat;
  }
  #div2 {
    width: 64px;
    height: 32px;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><circle fill="#f31900" cx="64" cy="64" r="64" /></svg>');
    background-size: 50% 100%;
    background-repeat: repeat;
  }
  #div3 {
    width: 64px;
    height: 32px;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle fill="#f7d72b" cx="16" cy="16" r="16" /></svg>');
    background-size: 32px 32px;
    background-repeat: repeat;
  }
  #div4 {
    width: 64px;
    height: 32px;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle fill="#44c400" cx="16" cy="16" r="16" /></svg>');
    background-size: 50% 100%;
    background-repeat: repeat;
  }
  p {
    font-size: x-small;
  }
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
</style>
<script>
  function setScale() {
    if (window.internals)
      internals.setPageScaleFactor(2);
  }
</script>
</head>
<body onload="setScale()">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<p>Test for WK110047: This test passes if there are 4 rows of 2 circles and they all have sharp edges.</p>
</body>
</html>
chromium/third_party/blink/web_tests/svg/as-background-image/tiled-background-image.html
