color-profile-animate-rotate.html | Explore in Territory

<!DOCTYPE html>
<html>
<style>
  @keyframes rotate {
    0% { transform: rotate(0deg) }
  }

  img {
    transform: rotate(90deg);
  }
</style>

<!-- The blue sector of the image should be at 3 o'clock (viz., rotated by 90 deg). -->
<img onload="rotate(this)" width="400px" src="resources/red-at-12-oclock-with-color-profile.jpg">

<script>
function rotate(element) {
  element.addEventListener('animationend', end, false);

  if (window.testRunner)
    element.style.cssText += 'animation: rotate linear 1s';
  else
    element.style.cssText += 'animation: rotate linear 4s';
}

function end(event) {
  if (window.testRunner)
    setTimeout(function() { testRunner.notifyDone() }, 0);
}

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

chromium/third_party/blink/web_tests/images/color-profile-animate-rotate.html