<!DOCTYPE html>
<!--
 | Tests that opaque images render correctly with transform.
 -->
<html>
<head>
  <style>
    div {
      /* Matches the width/height ratio of the image. */
      width: 65px;
      height: 75px;
      background-color: #f88;
      background-repeat: no-repeat;
      background-size: contain;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    var image = new Image();
    var image_name = 'cobalt_logo.jpg';

    image.onload = function() {
      var image_elements = document.getElementsByClassName('image');
      for (var i = 0; i < image_elements.length; ++i) {
        image_elements[i].style.backgroundImage =
            'url(' + image_name + ')';
      }

      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }

    image.src = image_name;
  </script>
</head>
<body>
  <div class='image' style="transform: translate(10px, 10px)"></div>
  <div class='image' style="transform: scale(0.5, 0.5)"></div>
  <div class='image' style="transform: rotate(45deg)"></div>
  <div class='image' style="transform: translate(30px, 30px) scale(1.1, 1.1) rotate(-45deg)"></div>
</body>
</html>