Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(271)

Side by Side Diff: LayoutTests/css3/compositing/mix-blend-mode-isolated-group-2.html

Issue 23503046: [CSS Blending] Implement mix-blend-mode in software. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebase Created 7 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <style>
5
6 body {
7 background: red;
8 }
9
10 div {
11 margin: 20px;
12 width: 60px;
13 height: 60px;
14 }
15
16 .parent {
17 position: relative;
18 z-index: -1;
19 float: left;
20 background: violet;
21 }
22
23 .child {
24 background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
25 }
26
27 </style>
28 <!-- Test to ensure that blending is performed only with the contents of the ele ment's nearest ancestor stacking context.
29 Test this with a parent element that has zIndex set. -->
30 <body>
31 <div class="parent">
32 <div class="child" style="mix-blend-mode: normal;"></div>
33 </div>
34 <div class="parent">
35 <div class="child" style="mix-blend-mode: multiply;"></div>
36 </div>
37 <div class="parent">
38 <div class="child" style="mix-blend-mode: screen;"></div>
39 </div>
40 <div class="parent">
41 <div class="child" style="mix-blend-mode: overlay;"></div>
42 </div>
43 <div class="parent">
44 <div class="child" style="mix-blend-mode: darken;"></div>
45 </div>
46 <div class="parent">
47 <div class="child" style="mix-blend-mode: lighten;"></div>
48 </div>
49 <div class="parent">
50 <div class="child" style="mix-blend-mode: color-dodge;"></div>
51 </div>
52 <div class="parent">
53 <div class="child" style="mix-blend-mode: color-burn;"></div>
54 </div>
55 <div class="parent">
56 <div class="child" style="mix-blend-mode: hard-light;"></div>
57 </div>
58 <div class="parent">
59 <div class="child" style="mix-blend-mode: soft-light;"></div>
60 </div>
61 <div class="parent">
62 <div class="child" style="mix-blend-mode: difference;"></div>
63 </div>
64 <div class="parent">
65 <div class="child" style="mix-blend-mode: exclusion;"></div>
66 </div>
67 <div class="parent">
68 <div class="child" style="mix-blend-mode: hue;"></div>
69 </div>
70 <div class="parent">
71 <div class="child" style="mix-blend-mode: saturation;"></div>
72 </div>
73 <div class="parent">
74 <div class="child" style="mix-blend-mode: color;"></div>
75 </div>
76 <div class="parent">
77 <div class="child" style="mix-blend-mode: luminosity;"></div>
78 </div>
79 </body>
80 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698