color-profile-image-filter-all.html

<!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>
</html>
chromium/third_party/blink/web_tests/images/color-profile-image-filter-all.html
