<!DOCTYPE html>
<html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
  .css-shape {
    shape-outside: circle();
    shape-margin: 2px;
    width: 200px;
    border-radius: 50%;
    float: left;
  }

  p {
    font: 10pt Ahem, sans-serif;
    width: 250px;
  }
</style>

<body>
  <!-- The blue sector of the image should be at 12'oclock -->
  <img class="css-shape" src="resources/red-at-12-oclock-with-color-profile.jpg">
  <p>Lorem </p>
</body>

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

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

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

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