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

Side by Side Diff: LayoutTests/css3/compositing/background-blend-mode-data-uri-svg-image.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 border: 5px navy;
7 width: 130px; 7 border-style: dotted double;
8 height: 130px; 8 background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3d y53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogIDxja XJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSJyZWQiLz4KPC9zdmc+'), green;
9 background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, url('re sources/blue-circle.svg'); 9 width: 200px;
10 float: left; 10 height: 200px;
11 } 11 }
12 </style> 12 </style>
13 <!-- This file should contain a duck on top of an svg with every type of blendin g. --> 13 <!-- This file should contain an svg circle on top of a solid color green backgr ound, with every type of blending. The container should have a visible border. - ->
14 <body> 14 <body>
15 <div style="background-blend-mode: normal, normal"></div> 15 <div style="background-blend-mode: normal, normal"></div>
16 <div style="background-blend-mode: multiply, normal"></div> 16 <div style="background-blend-mode: multiply, normal"></div>
17 <div style="background-blend-mode: screen, normal"></div> 17 <div style="background-blend-mode: screen, normal"></div>
18 <div style="background-blend-mode: overlay, normal"></div> 18 <div style="background-blend-mode: overlay, normal"></div>
19 <div style="background-blend-mode: darken, normal"></div> 19 <div style="background-blend-mode: darken, normal"></div>
20 <div style="background-blend-mode: lighten, normal"></div> 20 <div style="background-blend-mode: lighten, normal"></div>
21 <div style="background-blend-mode: color-dodge, normal"></div> 21 <div style="background-blend-mode: color-dodge, normal"></div>
22 <div style="background-blend-mode: color-burn, normal"></div> 22 <div style="background-blend-mode: color-burn, normal"></div>
23 <div style="background-blend-mode: hard-light, normal"></div> 23 <div style="background-blend-mode: hard-light, normal"></div>
24 <div style="background-blend-mode: soft-light, normal"></div> 24 <div style="background-blend-mode: soft-light, normal"></div>
25 <div style="background-blend-mode: difference, normal"></div> 25 <div style="background-blend-mode: difference, normal"></div>
26 <div style="background-blend-mode: exclusion, normal"></div> 26 <div style="background-blend-mode: exclusion, normal"></div>
27 <div style="background-blend-mode: hue, normal;"></div> 27 <div style="background-blend-mode: hue, normal"></div>
28 <div style="background-blend-mode: saturation, normal"></div> 28 <div style="background-blend-mode: saturation, normal"></div>
29 <div style="background-blend-mode: color, normal"></div> 29 <div style="background-blend-mode: color, normal"></div>
30 <div style="background-blend-mode: luminosity, normal"></div> 30 <div style="background-blend-mode: luminosity, normal"></div>
31 </body> 31 </body>
32 32
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698