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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/css3/compositing/svg-blend-multiply-expected.html

Issue 17115010: Add support for element blending to SVG (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: updated patch with more test files Created 7 years, 5 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 side-by-side diff with in-line comments
Download patch
« LayoutTests/css3/compositing/svg-blend-multiply.html ('K') | « LayoutTests/css3/compositing/svg-blend-multiply.html ('k') | LayoutTests/css3/compositing/svg-blend-normal.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/css3/compositing/svg-blend-multiply-expected.html
diff --git a/LayoutTests/css3/compositing/svg-blend-multiply-expected.html b/LayoutTests/css3/compositing/svg-blend-multiply-expected.html
new file mode 100644
index 0000000000000000000000000000000000000000..cda571ca8813d5686b24d217867b7ddd5224af93
--- /dev/null
+++ b/LayoutTests/css3/compositing/svg-blend-multiply-expected.html
@@ -0,0 +1,130 @@
+<!DOCTYPE HTML>
pdr. 2013/07/17 22:17:24 Because reftests can't be automatically rebaseline
+<html>
+<head>
+<script>
+function camelCase(input) {
+ return input.toLowerCase().replace(/-(.)/g, function(match, group1) {
+ return group1.toUpperCase();
+ });
+}
+window.addEventListener("load", function(){
+ var g = document.getElementById("emulate").firstElementChild;
+ var rect = document.getElementById("r");
pdr. 2013/07/17 22:17:24 Too many id='r's! You may confuse getElementById's
+ 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
+ var blendmodes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge","color-burn", "hard-light", "soft-light", "difference", "exclusion"];
+ var blendfunctions = {
+ normal: function(a, b) {
pdr. 2013/07/17 22:17:24 Nit: indent the blendFunctions
+ return a;
+ },
+ multiply: function(a, b) {
+ return a * b;
+ },
+ screen: function(a, b) {
+ return a + b - a * b;
+ },
+ overlay: function(a, b) {
+ return blendfunctions.hardLight(b, a);
+ },
+ darken: function(a, b) {
+ return Math.min(a, b);
+ },
+ lighten: function(a, b) {
+ return Math.max(a, b);
+ },
+ colorDodge: function(a, b) {
+ if(b == 0)
+ return 0;
+ if(a == 1)
+ return 1;
+ return Math.min(1, b / (1 - a));
+ },
+ colorBurn: function(a, b) {
+ if(b == 1)
+ return 1;
+ if(a == 0)
+ return 0;
+ return 1 - Math.min(1, (1 - b) / a);
+ },
+ hardLight: function(a, b) {
+ if(a <= 0.5)
+ return blendfunctions.multiply(b, 2 * a);
pdr. 2013/07/17 22:17:24 indentation
+
+ return blendfunctions.screen(b, 2 * a - 1);
+ },
+ softLight: function(a, b) {
+ var c = 0;
+ if(b <= 0.25)
+ c = ((16 * b - 12) * b + 4) * b;
+ else
+ c = Math.sqrt(b);
+
+ if(a <= 0.5)
+ return b - (1 - 2 * a) * b * (1 - b);
+
+ return b + (2 * a - 1) * (c - b);
+ },
+ difference: function(a, b) {
+ return Math.abs(a - b);
+ },
+ exclusion: function(a, b) {
+ return b + a - 2 * b * a;
+ }
+ };
+ var blend = function (a, b, f) {
+ var ret = "rgba(";
+
+ for(var z = 0; z < 3; z++) {
+ 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;
+ ret += Math.floor(n) + ",";
+ }
+ return ret + "1)";
+ }
+ blendmodes.forEach(function(b){
+ if(window.location.pathname.indexOf(b) != -1)
+ for(var y = 0; y < 4; y++) {
+ for(var x = 0; x < 4; x++) {
+ var newrect = rect.cloneNode(0);
pdr. 2013/07/17 22:17:24 I'm confused how this works. The test file has jus
+ newrect.x.baseVal.value = x * 10;
+ newrect.y.baseVal.value = y * 10;
+ newrect.attributes.fill.value = blend(colors[y], colors[x], blendfunctions[camelCase(b)]);
+ g.appendChild(newrect);
+ }
+ }
+ });
+});
+</script>
+</head>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px">
+<defs>
+ <g id="patch">
pdr. 2013/07/17 22:17:24 Is patch used?
+ <rect x="0" y="0" width="10" height="40" fill="rgb(255,0,0)"></rect>
+ <rect x="10" y="0" width="10" height="40" fill="rgb(0,255,0)"></rect>
+ <rect x="20" y="0" width="10" height="40" fill="rgb(0,0,255)"></rect>
+ <rect x="30" y="0" width="10" height="40" fill="rgb(255,255,0)"></rect>
+ </g>
+ <rect id="r" x="0" y="0" width="10" height="10" fill="rgb(255,0,0)"></rect>
+</defs>
+<g id="emulate" transform="scale(4 4)">
+ <g>
+ <rect id="r" x="0" y="0" width="10" height="10" fill="rgba(255,0,0,1)"></rect>
+ <rect id="r" x="10" y="0" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="20" y="0" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="30" y="0" width="10" height="10" fill="rgba(127,0,0,1)"></rect>
+ <rect id="r" x="0" y="10" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="10" y="10" width="10" height="10" fill="rgba(0,255,0,1)"></rect>
+ <rect id="r" x="20" y="10" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="30" y="10" width="10" height="10" fill="rgba(0,127,0,1)"></rect>
+ <rect id="r" x="0" y="20" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="10" y="20" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="20" y="20" width="10" height="10" fill="rgba(0,0,255,1)"></rect>
+ <rect id="r" x="30" y="20" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="0" y="30" width="10" height="10" fill="rgba(127,0,0,1)"></rect>
+ <rect id="r" x="10" y="30" width="10" height="10" fill="rgba(0,127,0,1)"></rect>
+ <rect id="r" x="20" y="30" width="10" height="10" fill="rgba(0,0,0,1)"></rect>
+ <rect id="r" x="30" y="30" width="10" height="10" fill="rgba(63,63,0,1)"></rect>
+ </g>
+</g>
+</svg>
+</body>
+</html>
« LayoutTests/css3/compositing/svg-blend-multiply.html ('K') | « LayoutTests/css3/compositing/svg-blend-multiply.html ('k') | LayoutTests/css3/compositing/svg-blend-normal.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698