<!DOCTYPE html>
<html>
<style>
html {
  width:  100vw;
  height: 100vh;
}

body {
  text-transform: uppercase;
  text-align: center;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  font-size: 12pt;
  padding-top: 12px;
}

img {
  width: 170px;
}

#grayscale { -webkit-filter: grayscale(1) }

#none { -webkit-filter: none }

#brightness { -webkit-filter: brightness(.6) }

#saturation { -webkit-filter: saturate(4) }

#sepia { -webkit-filter: sepia(1) }

#blur { -webkit-filter: blur(2px) }

#opacity { -webkit-filter: opacity(.8) }

#blurhue { -webkit-filter: blur(3px) saturate(3) }

div {
  display: inline-block;
  padding: 8px 8px;
}
</style>

<body>
  <!-- The blue sector of the images should be at 12 o'clock -->
  <div>
    <img id="grayscale" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Grayscale</p>
  </div>
  <div>
    <img id="none" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>None</p>
  </div>
  <div>
    <img id="brightness" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Brightness</p>
  </div>
  <div>
    <img id="saturation" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Saturation</p>
  </div>
  <div>
    <img id="sepia" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Sepia</p>
  </div>
  <div>
    <img id="blur" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Blur</p>
  </div>
  <div>
    <img id="opacity" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Opacity</p>
  </div>
  <div>
    <img id="blurhue" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Blur+Hue</p>
  </div>
</body>

<script>
window.onload = function() {
  if (window.testRunner)
    setTimeout(function() { testRunner.setColorProfile('colorSpin', done) }, 100);
};

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

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