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