Support "plus-lighter" in mix-blend mode
[WebKit-https.git] / LayoutTests / css3 / blending / blend-mode-simple-composited.html
1 <!DOCTYPE HTML>
2 <head>
3     <style>
4       img {
5           width: 130px;
6           height: 130px;
7          -webkit-transform: translateZ(0);
8       }
9
10       li {
11           margin: 5px;
12           width: 130px;
13           height: 130px;
14           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));
15           display: block;
16           float: left;
17       }
18     </style>
19 </head>
20
21 <!-- This file should contain a duck on top of a gradient with every type of blending. -->
22 <body>
23     <ul>
24         <!-- Separable blend modes -->
25         <li><img style="mix-blend-mode: normal" src="resources/ducky.png"></li>
26         <li><img style="mix-blend-mode: overlay" src="resources/ducky.png"></li>
27         <li><img style="mix-blend-mode: screen" src="resources/ducky.png"></li>
28         <li><img style="mix-blend-mode: overlay" src="resources/ducky.png"></li>
29         <li><img style="mix-blend-mode: darken" src="resources/ducky.png"></li>
30         <li><img style="mix-blend-mode: lighten" src="resources/ducky.png"></li>
31         <li><img style="mix-blend-mode: color-dodge" src="resources/ducky.png"></li>
32         <li><img style="mix-blend-mode: color-burn" src="resources/ducky.png"></li>
33         <li><img style="mix-blend-mode: hard-light" src="resources/ducky.png"></li>
34         <li><img style="mix-blend-mode: soft-light" src="resources/ducky.png"></li>
35         <li><img style="mix-blend-mode: difference" src="resources/ducky.png"></li>
36         <li><img style="mix-blend-mode: exclusion" src="resources/ducky.png"></li>
37         <li><img style="mix-blend-mode: plus-darker" src="resources/ducky.png"></li>
38         <li><img style="mix-blend-mode: plus-lighter" src="resources/ducky.png"></li>
39     </ul>
40 </body>