[CSS Blending] Refactor -webkit-blend-mode to -webkit-mix-blend-mode
[WebKit-https.git] / LayoutTests / css3 / compositing / blend-mode-layers.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: 150px;
11             height: 150px;
12         }
13
14         .div1 {
15             width: 160px;
16             height: 75px;
17             margin: 50px 0px 0px;
18             background-color: cyan;
19         }
20
21         .div2 {
22             width: 160px;
23             height: 160px;
24             background-image: url("resources/ducky.png");
25             background-size: 130px 130px;
26             background-repeat: no-repeat;
27             position: relative;
28             top: -40px;
29             left: 20px;
30         }
31
32         .div3 {
33             width: 80px;
34             height: 150px;
35             background-color: yellow;
36             position: relative;
37             top: 10px;
38             left: -20px;
39         }
40
41         li {
42             margin: 5px 5px 120px;
43             width: 160px;
44             height: 50px;
45             background-color: magenta;
46             display: block;
47             float: left;
48         }
49
50         .composited {
51             -webkit-transform: translateZ(0);
52         }
53     </style>
54 </head>
55
56 <!-- This file tests interaction of blending with stacking contexts.
57 It uses nested content and then set various attributes to show the interaction of stacking contexts. -->
58 <body>
59     <ul>
60         <li><div class="div1"><div class="div2"><div class="div3"></div></div></div></li>
61
62         <!-- setting the blendmode will create a new stacking context which causes z-index to change -->
63         <li><div class="div1"><div class="div2" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
64         <li><div class="div1"><div class="div2 composited" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
65
66         <!-- just setting slight opacity which causes a stacking context. This also causes z-index to be resolved to the stacking context -->
67         <li><div class="div1" style="opacity:.99"><div class="div2"><div class="div3"></div></div></div></li>
68
69         <!-- blending will now only happen upto the stacking context generated by opacity. Z-index is resolved against the stacking context of the div with the blendmode -->
70         <li><div class="div1" style="opacity:.99"><div class="div2" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
71         <li><div class="div1" style="opacity:.99"><div class="div2 composited" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
72     </ul>
73 </body>