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

Side by Side Diff: LayoutTests/css3/compositing/background-blend-mode-crossfade-image-gradient.html

Issue 22596003: Fix background blending for some cases where it did not work at all. The fix adds the blendMode par… (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: adding TestExpectation lines for rebaselining Created 7 years, 4 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
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 div { 5 div {
6 margin: 5px; 6 margin: 5px;
7 width: 130px; 7 width: 130px;
8 height: 130px; 8 height: 130px;
9 background: linear-gradient(to right, white 0%, gray 100%), green; 9 background: -webkit-cross-fade(url('resources/ducky.png'), url('resource s/blue-circle.svg'), 50%) no-repeat 0 0 /100% 100%,
10 linear-gradient(to right, #00ffff 0%, rgba(0,0,255,0) 24%, #ff0000 50%, #ffff00 75%, #00ff00 100%) 0 0 /100% 100%;
10 float: left; 11 float: left;
11 } 12 }
12 </style> 13 </style>
13 <!-- This file should contain a gradient on top of a background color for every type of blending. --> 14 <!-- This file should contain a corss-faded image between a duck and a circle, o n top of a linear gradient for every type of blending -->
14 <body> 15 <body>
15 <div style="background-blend-mode: normal, normal"></div> 16 <div style="background-blend-mode: normal, normal"></div>
16 <div style="background-blend-mode: multiply, normal"></div> 17 <div style="background-blend-mode: multiply, normal"></div>
17 <div style="background-blend-mode: screen, normal"></div> 18 <div style="background-blend-mode: screen, normal"></div>
18 <div style="background-blend-mode: overlay, normal"></div> 19 <div style="background-blend-mode: overlay, normal"></div>
19 <div style="background-blend-mode: darken, normal"></div> 20 <div style="background-blend-mode: darken, normal"></div>
20 <div style="background-blend-mode: lighten, normal"></div> 21 <div style="background-blend-mode: lighten, normal"></div>
21 <div style="background-blend-mode: color-dodge, normal"></div> 22 <div style="background-blend-mode: color-dodge, normal"></div>
22 <div style="background-blend-mode: color-burn, normal"></div> 23 <div style="background-blend-mode: color-burn, normal"></div>
23 <div style="background-blend-mode: hard-light, normal"></div> 24 <div style="background-blend-mode: hard-light, normal"></div>
24 <div style="background-blend-mode: soft-light, normal"></div> 25 <div style="background-blend-mode: soft-light, normal"></div>
25 <div style="background-blend-mode: difference, normal"></div> 26 <div style="background-blend-mode: difference, normal"></div>
26 <div style="background-blend-mode: exclusion, normal"></div> 27 <div style="background-blend-mode: exclusion, normal"></div>
27 <div style="background-blend-mode: hue, normal;"></div> 28 <div style="background-blend-mode: hue, normal;"></div>
28 <div style="background-blend-mode: saturation, normal"></div> 29 <div style="background-blend-mode: saturation, normal"></div>
29 <div style="background-blend-mode: color, normal"></div> 30 <div style="background-blend-mode: color, normal"></div>
30 <div style="background-blend-mode: luminosity, normal"></div> 31 <div style="background-blend-mode: luminosity, normal"></div>
31 </body> 32 </body>
32 </html> 33 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698