Chromium Code Reviews Chromium Code Reviews
Issue 17115010:
Add support for element blending to SVG (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> | |
|
pdr.
2013/07/17 22:17:24
Because reftests can't be automatically rebaseline
| |
| 2 <html> | |
| 3 <head> | |
| 4 <script> | |
| 5 function camelCase(input) { | |
| 6 return input.toLowerCase().replace(/-(.)/g, function(match, group1) { | |
| 7 return group1.toUpperCase(); | |
| 8 }); | |
| 9 } | |
| 10 window.addEventListener("load", function(){ | |
| 11 var g = document.getElementById("emulate").firstElementChild; | |
| 12 var rect = document.getElementById("r"); | |
|
pdr.
2013/07/17 22:17:24
Too many id='r's! You may confuse getElementById's
| |
| 13 var colors = [ [1, 0, 0, 1], [0, 1, 0, 1], [0, 0, 1, 1], [.5, .5, 0, 1]] ; | |
|
pdr.
2013/07/17 22:17:24
Are these just test colors? If so, can you do one
| |
| 14 var blendmodes = ["normal", "multiply", "screen", "overlay", "darken", " lighten", "color-dodge","color-burn", "hard-light", "soft-light", "difference", "exclusion"]; | |
| 15 var blendfunctions = { | |
| 16 normal: function(a, b) { | |
|
pdr.
2013/07/17 22:17:24
Nit: indent the blendFunctions
| |
| 17 return a; | |
| 18 }, | |
| 19 multiply: function(a, b) { | |
| 20 return a * b; | |
| 21 }, | |
| 22 screen: function(a, b) { | |
| 23 return a + b - a * b; | |
| 24 }, | |
| 25 overlay: function(a, b) { | |
| 26 return blendfunctions.hardLight(b, a); | |
| 27 }, | |
| 28 darken: function(a, b) { | |
| 29 return Math.min(a, b); | |
| 30 }, | |
| 31 lighten: function(a, b) { | |
| 32 return Math.max(a, b); | |
| 33 }, | |
| 34 colorDodge: function(a, b) { | |
| 35 if(b == 0) | |
| 36 return 0; | |
| 37 if(a == 1) | |
| 38 return 1; | |
| 39 return Math.min(1, b / (1 - a)); | |
| 40 }, | |
| 41 colorBurn: function(a, b) { | |
| 42 if(b == 1) | |
| 43 return 1; | |
| 44 if(a == 0) | |
| 45 return 0; | |
| 46 return 1 - Math.min(1, (1 - b) / a); | |
| 47 }, | |
| 48 hardLight: function(a, b) { | |
| 49 if(a <= 0.5) | |
| 50 return blendfunctions.multiply(b, 2 * a); | |
|
pdr.
2013/07/17 22:17:24
indentation
| |
| 51 | |
| 52 return blendfunctions.screen(b, 2 * a - 1); | |
| 53 }, | |
| 54 softLight: function(a, b) { | |
| 55 var c = 0; | |
| 56 if(b <= 0.25) | |
| 57 c = ((16 * b - 12) * b + 4) * b; | |
| 58 else | |
| 59 c = Math.sqrt(b); | |
| 60 | |
| 61 if(a <= 0.5) | |
| 62 return b - (1 - 2 * a) * b * (1 - b); | |
| 63 | |
| 64 return b + (2 * a - 1) * (c - b); | |
| 65 }, | |
| 66 difference: function(a, b) { | |
| 67 return Math.abs(a - b); | |
| 68 }, | |
| 69 exclusion: function(a, b) { | |
| 70 return b + a - 2 * b * a; | |
| 71 } | |
| 72 }; | |
| 73 var blend = function (a, b, f) { | |
| 74 var ret = "rgba("; | |
| 75 | |
| 76 for(var z = 0; z < 3; z++) { | |
| 77 var n = (a[3] * (1 - b[3]) * a[z] + a[3] * b[3] * f(a[z] , b[z]) + (1 - a[3]) * b[3] * b[z]) * 255; | |
| 78 ret += Math.floor(n) + ","; | |
| 79 } | |
| 80 return ret + "1)"; | |
| 81 } | |
| 82 blendmodes.forEach(function(b){ | |
| 83 if(window.location.pathname.indexOf(b) != -1) | |
| 84 for(var y = 0; y < 4; y++) { | |
| 85 for(var x = 0; x < 4; x++) { | |
| 86 var newrect = rect.cloneNode(0); | |
|
pdr.
2013/07/17 22:17:24
I'm confused how this works. The test file has jus
| |
| 87 newrect.x.baseVal.value = x * 10; | |
| 88 newrect.y.baseVal.value = y * 10; | |
| 89 newrect.attributes.fill.value = blend(colors[y ], colors[x], blendfunctions[camelCase(b)]); | |
| 90 g.appendChild(newrect); | |
| 91 } | |
| 92 } | |
| 93 }); | |
| 94 }); | |
| 95 </script> | |
| 96 </head> | |
| 97 <body> | |
| 98 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400p x"> | |
| 99 <defs> | |
| 100 <g id="patch"> | |
|
pdr.
2013/07/17 22:17:24
Is patch used?
| |
| 101 <rect x="0" y="0" width="10" height="40" fill="rgb(255,0,0)"></rect> | |
| 102 <rect x="10" y="0" width="10" height="40" fill="rgb(0,255,0)"></rect> | |
| 103 <rect x="20" y="0" width="10" height="40" fill="rgb(0,0,255)"></rect> | |
| 104 <rect x="30" y="0" width="10" height="40" fill="rgb(255,255,0)"></rect> | |
| 105 </g> | |
| 106 <rect id="r" x="0" y="0" width="10" height="10" fill="rgb(255,0,0)"></rect> | |
| 107 </defs> | |
| 108 <g id="emulate" transform="scale(4 4)"> | |
| 109 <g> | |
| 110 <rect id="r" x="0" y="0" width="10" height="10" fill="rgba(255,0,0,1)"></rec t> | |
| 111 <rect id="r" x="10" y="0" width="10" height="10" fill="rgba(0,0,0,1)"></rect > | |
| 112 <rect id="r" x="20" y="0" width="10" height="10" fill="rgba(0,0,0,1)"></rect > | |
| 113 <rect id="r" x="30" y="0" width="10" height="10" fill="rgba(127,0,0,1)"></re ct> | |
| 114 <rect id="r" x="0" y="10" width="10" height="10" fill="rgba(0,0,0,1)"></rect > | |
| 115 <rect id="r" x="10" y="10" width="10" height="10" fill="rgba(0,255,0,1)"></r ect> | |
| 116 <rect id="r" x="20" y="10" width="10" height="10" fill="rgba(0,0,0,1)"></rec t> | |
| 117 <rect id="r" x="30" y="10" width="10" height="10" fill="rgba(0,127,0,1)"></r ect> | |
| 118 <rect id="r" x="0" y="20" width="10" height="10" fill="rgba(0,0,0,1)"></rect > | |
| 119 <rect id="r" x="10" y="20" width="10" height="10" fill="rgba(0,0,0,1)"></rec t> | |
| 120 <rect id="r" x="20" y="20" width="10" height="10" fill="rgba(0,0,255,1)"></r ect> | |
| 121 <rect id="r" x="30" y="20" width="10" height="10" fill="rgba(0,0,0,1)"></rec t> | |
| 122 <rect id="r" x="0" y="30" width="10" height="10" fill="rgba(127,0,0,1)"></re ct> | |
| 123 <rect id="r" x="10" y="30" width="10" height="10" fill="rgba(0,127,0,1)"></r ect> | |
| 124 <rect id="r" x="20" y="30" width="10" height="10" fill="rgba(0,0,0,1)"></rec t> | |
| 125 <rect id="r" x="30" y="30" width="10" height="10" fill="rgba(63,63,0,1)"></r ect> | |
| 126 </g> | |
| 127 </g> | |
| 128 </svg> | |
| 129 </body> | |
| 130 </html> | |
| OLD | NEW |
