<!DOCTYPE html>
<html>
<style>
  .t0 { -webkit-transform: translate(-60px, 0px); }
  .t1 { -webkit-transform: translate(405px, 0px); }
  .t2 { top: -462px; left: 240px; -webkit-transform: rotate(-90deg); }

  img {
    position: absolute;
    clip: rect(30px, 300px, 240px, 90px);
  }
</style>

<body style="overflow: hidden">
  <!-- There should be no red on this page. -->
  <img class="t0" title="jpg image" onload="load()" src="resources/red-at-12-oclock-with-color-profile.jpg">
  <img class="t1" title="png image" onload="load()" src="resources/red-at-12-oclock-with-color-profile.png">
  <img class="t2" title="jpg image" onload="load()" src="resources/red-at-12-oclock-with-color-profile.jpg">
</body>

<script>
var images = 0;

function load() {
  if (++images == 3 && window.testRunner)
    setTimeout(function() { testRunner.notifyDone() }, 0);
}

if (window.testRunner) {
  testRunner.dumpAsTextWithPixelResults();
  testRunner.waitUntilDone();
}
</script>
</html>