<!DOCTYPE HTML>
<head>
<script>
if (window.internals)
window.internals.settings.setAcceleratedCompositingEnabled(true);
</script>
<style>
img {
width: 130px;
height: 130px;
}
li {
margin: 5px;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0ff), color-stop(24%,#00f), color-stop(50%,#f00), color-stop(75%,#ff0), color-stop(100%,#0f0));
display: block;
float: left;
</style>
</head>
<!-- This file should contain a duck on top of a gradient with every type of blending. -->
<body>
<ul>
<!-- Separable blend modes -->
<li><img style="mix-blend-mode: normal" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: overlay" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: screen" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: darken" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: lighten" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: color-dodge" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: color-burn" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: hard-light" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: soft-light" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: difference" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: exclusion" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: plus-darker" src="resources/ducky.png"></li>
<li><img style="mix-blend-mode: plus-lighter" src="resources/ducky.png"></li>
</ul>
</body>
