diff --git a/src/Core.js b/src/Core.js index b60b30e..b7efc58 100644 --- a/src/Core.js +++ b/src/Core.js @@ -34,13 +34,16 @@ _html2canvas.Util.backgroundImage = function (src) { _html2canvas.Util.parseBackgroundImage = function (value) { var whitespace = ' \r\n\t', method, definition, prefix, prefix_i, block, results = [], - c, mode = 0, numParen = 0; + c, mode = 0, numParen = 0, quote, args; var appendResult = function(){ if(method) { if(definition.substr( 0, 1 ) === '"') { definition = definition.substr( 1, definition.length - 2 ); } + if(definition) { + args.push(definition); + } if(method.substr( 0, 1 ) === '-' && (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) { prefix = method.substr( 0, prefix_i); @@ -49,10 +52,11 @@ _html2canvas.Util.parseBackgroundImage = function (value) { results.push({ prefix: prefix, method: method, - definition: definition, - value: block + value: block, + args: args }); } + args = []; //for some odd reason, setting .length = 0 didn't work in safari method = prefix = definition = @@ -66,8 +70,18 @@ _html2canvas.Util.parseBackgroundImage = function (value) { continue; } switch(c) { + case '"': + if(!quote) { + quote = c; + } + else if(quote === c) { + quote = null; + } + break; + case '(': - if(mode === 0) { + if(quote) { break; } + else if(mode === 0) { mode = 1; block += c; continue; @@ -77,7 +91,8 @@ _html2canvas.Util.parseBackgroundImage = function (value) { break; case ')': - if(mode === 1) { + if(quote) { break; } + else if(mode === 1) { if(numParen === 0) { mode = 0; block += c; @@ -90,10 +105,19 @@ _html2canvas.Util.parseBackgroundImage = function (value) { break; case ',': - if(mode === 0) { + if(quote) { break; } + else if(mode === 0) { appendResult(); continue; } + else if (mode === 1) { + if(numParen === 0 && !method.match(/^url$/i)) { + args.push(definition); + definition = ''; + block += c; + continue; + } + } break; } diff --git a/src/Preload.js b/src/Preload.js index ee9700f..0c7bbde 100644 --- a/src/Preload.js +++ b/src/Preload.js @@ -133,7 +133,7 @@ _html2canvas.Preload = function( options ) { img = _html2canvas.Generate.Gradient( background_image.value, _html2canvas.Util.Bounds( el ) ); if ( img !== undefined ){ - images[background_image] = { + images[background_image.value] = { img: img, succeeded: true }; diff --git a/tests/qunit/unit/css.js b/tests/qunit/unit/css.js index 485ad72..5b492cd 100644 --- a/tests/qunit/unit/css.js +++ b/tests/qunit/unit/css.js @@ -146,15 +146,34 @@ $(function() { }); test('background-image', function () { + + test_parse_background_image( + 'url("te)st")', + { prefix: '', method: 'url', value: 'url("te)st")', args: ['te)st'] }, + 'test quoted' + ); + + test_parse_background_image( + 'url("te,st")', + { prefix: '', method: 'url', value: 'url("te,st")', args: ['te,st'] }, + 'test quoted' + ); + + test_parse_background_image( + 'url(te,st)', + { prefix: '', method: 'url', value: 'url(te,st)', args: ['te,st'] }, + 'test quoted' + ); + test_parse_background_image( 'url(test)', - { prefix: '', method: 'url', definition: 'test', value: 'url(test)' }, + { prefix: '', method: 'url', value: 'url(test)', args: ['test'] }, 'basic url' ); test_parse_background_image( 'url("test")', - { prefix: '', method: 'url', definition: 'test', value: 'url("test")' }, + { prefix: '', method: 'url', value: 'url("test")', args: ['test'] }, 'quoted url' ); @@ -162,36 +181,44 @@ $(function() { 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)', { prefix: '', method: 'url', - definition: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', - value: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)' + value: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)', + args: ['data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'] }, 'data url' ); test_parse_background_image( 'linear-gradient(red,black)', - { prefix: '', method: 'linear-gradient', definition: 'red,black', value: 'linear-gradient(red,black)' }, + { prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'] }, 'linear-gradient' ); test_parse_background_image( 'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))', - { prefix: '', method: 'linear-gradient', definition: 'top,rgb(255,0,0),rgb(0,0,0)', value: 'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))' }, + { + prefix: '', method: 'linear-gradient', + value: 'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))', + args: ['top', 'rgb(255,0,0)', 'rgb(0,0,0)'] + }, 'linear-gradient' ); test_parse_background_image( '-webkit-linear-gradient(red,black)', - { prefix: '-webkit-', method: 'linear-gradient', definition: 'red,black', value: '-webkit-linear-gradient(red,black)' }, + { + prefix: '-webkit-', method: 'linear-gradient', + value: '-webkit-linear-gradient(red,black)', + args: ['red','black'] + }, 'linear-gradient' ); test_parse_background_image( 'linear-gradient(red,black), url(test), url("test"),\n none, ', [ - { prefix: '', method: 'linear-gradient', definition: 'red,black', value: 'linear-gradient(red,black)' }, - { prefix: '', method: 'url', definition: 'test', value: 'url(test)' }, - { prefix: '', method: 'url', definition: 'test', value: 'url("test")' }, - { prefix: '', method: 'none', definition: '', value: 'none' } + { prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'] }, + { prefix: '', method: 'url', value: 'url(test)', args: ['test'] }, + { prefix: '', method: 'url', value: 'url("test")', args: ['test'] }, + { prefix: '', method: 'none', value: 'none', args: [] } ], 'multiple backgrounds' );