Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / css3 / blending / mix-blend-mode-isolated-group-3.html
blobaced767c5d02ef4a9437f161228cdb3f2521ca36
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <style>
6 body {
7 background: blue;
10 div {
11 margin: 20px;
12 width: 60px;
13 height: 60px;
16 .parent {
17 position: relative;
18 z-index: -1;
19 float: left;
20 background: violet;
23 .child {
24 background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
27 </style>
28 <!-- Test to ensure that blending is performed only with the contents of the element's nearest ancestor stacking context.
29 Test this with a parent element that has zIndex set. Also, tests whether a child element blends if the parent has a blend mode set.-->
30 <body>
31 <div class="parent">
32 <div class="child" style="mix-blend-mode: normal;">
33 <div style="background-color: orange; z-index: 1; position: absolute"></div>
34 </div>
35 </div>
36 <div class="parent">
37 <div class="child" style="mix-blend-mode: multiply;">
38 <div style="background-color: orange; z-index: 1; position: absolute"></div>
39 </div>
40 </div>
41 <div class="parent">
42 <div class="child" style="mix-blend-mode: screen;">
43 <div style="background-color: orange; z-index: 1; position: absolute"></div>
44 </div>
45 </div>
46 <div class="parent">
47 <div class="child" style="mix-blend-mode: overlay;">
48 <div style="background-color: orange; z-index: 1; position: absolute"></div>
49 </div>
50 </div>
51 <div class="parent">
52 <div class="child" style="mix-blend-mode: darken;">
53 <div style="background-color: orange; z-index: 1; position: absolute"></div>
54 </div>
55 </div>
56 <div class="parent">
57 <div class="child" style="mix-blend-mode: lighten;">
58 <div style="background-color: orange; z-index: 1; position: absolute"></div>
59 </div>
60 </div>
61 <div class="parent">
62 <div class="child" style="mix-blend-mode: color-dodge;">
63 <div style="background-color: orange; z-index: 1; position: absolute"></div>
64 </div>
65 </div>
66 <div class="parent">
67 <div class="child" style="mix-blend-mode: color-burn;">
68 <div style="background-color: orange; z-index: 1; position: absolute"></div>
69 </div>
70 </div>
71 <div class="parent">
72 <div class="child" style="mix-blend-mode: hard-light;">
73 <div style="background-color: orange; z-index: 1; position: absolute"></div>
74 </div>
75 </div>
76 <div class="parent">
77 <div class="child" style="mix-blend-mode: soft-light;">
78 <div style="background-color: orange; z-index: 1; position: absolute"></div>
79 </div>
80 </div>
81 <div class="parent">
82 <div class="child" style="mix-blend-mode: difference;">
83 <div style="background-color: orange; z-index: 1; position: absolute"></div>
84 </div>
85 </div>
86 <div class="parent">
87 <div class="child" style="mix-blend-mode: exclusion;">
88 <div style="background-color: orange; z-index: 1; position: absolute"></div>
89 </div>
90 </div>
91 <div class="parent">
92 <div class="child" style="mix-blend-mode: hue;">
93 <div style="background-color: orange; z-index: 1; position: absolute"></div>
94 </div>
95 </div>
96 <div class="parent">
97 <div class="child" style="mix-blend-mode: saturation;">
98 <div style="background-color: orange; z-index: 1; position: absolute"></div>
99 </div>
100 </div>
101 <div class="parent">
102 <div class="child" style="mix-blend-mode: color;">
103 <div style="background-color: orange; z-index: 1; position: absolute"></div>
104 </div>
105 </div>
106 <div class="parent">
107 <div class="child" style="mix-blend-mode: luminosity;">
108 <div style="background-color: orange; z-index: 1; position: absolute"></div>
109 </div>
110 </div>
111 </body>
112 </html>