<!DOCTYPE html>
<html>
<script src="../../resources/run-after-layout-and-paint.js"></script>

<style>
  div {
    background-image: url("resources/red-at-12-oclock-with-color-profile.jpg");
    background-size: 49% 49%;
    background-repeat: space;
    display: inline-block;
    height: 376px;
    width: 48%;
  }
  div, img {
    margin: 5px;
  }
</style>

<body>
  <!-- The _blue_ sector of the <img> image should be at 12 o'clock. -->
  <img width="48%" src="resources/red-at-12-oclock-with-color-profile.jpg">
  <!-- Same for the <div> background image: should be at 12 o'clock. -->
  <div></div>
</body>

<script>
window.onload = function() {
  if (window.testRunner)
    runAfterLayoutAndPaint(changeColorProfile);
};

function changeColorProfile() {
  setTimeout(function() { testRunner.setColorProfile('colorSpin', done) }, 100);
}

function done() {
  setTimeout(function() { testRunner.notifyDone() }, 0);
}

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