describe('Gradients', function() { var expected = [ { method: 'linear-gradient', args: ['left', ' rgb(255, 0, 0)', ' rgb(255, 255, 0)', ' rgb(0, 255, 0)'] }, { method: 'linear-gradient', args: ['left', ' red', ' rgb(255, 255, 0)', ' rgb(0, 255, 0)'] }, { method: 'linear-gradient', args: [ 'left', ' rgb(206, 219, 233) 0%', ' rgb(170, 197, 222) 17%', ' rgb(97, 153, 199) 50%', ' rgb(58, 132, 195) 51%', ' rgb(65, 154, 214) 59%', ' rgb(75, 184, 240) 71%', ' rgb(58, 139, 194) 84%', ' rgb(38, 85, 139) 100%' ] }, { method: 'linear-gradient', args: [ 'left', ' rgb(206, 219, 233) 0%', ' rgb(170, 197, 222) 17px', ' rgb(97, 153, 199) 50%', ' rgb(58, 132, 195) 51px', ' rgb(65, 154, 214) 59%', ' rgb(75, 184, 240) 71px', ' rgb(58, 139, 194) 84%', ' rgb(38, 85, 139) 100px' ] }, { method: 'gradient', args: [ 'linear', ' 50% 0%', ' 50% 100%', ' from(rgb(240, 183, 161))', ' color-stop(0.5, rgb(140, 51, 16))', ' color-stop(0.51, rgb(117, 34, 1))', ' to(rgb(191, 110, 78))' ] }, { method: 'gradient', args: [ 'linear', ' 50% 0%', ' 50% 100%', ' from(rgb(255, 0, 0))', ' color-stop(0.314159, green)', ' color-stop(0.51, rgb(0, 0, 255))', // temporary workaround for Blink/WebKit bug: crbug.com/453414 //" to(rgba(0, 0, 0, 0.5))" ' to(rgba(0, 0, 0, 0))' ] }, { method: 'linear-gradient', args: ['0deg', ' rgb(221, 221, 221)', ' rgb(221, 221, 221) 50%', ' transparent 50%'] }, { method: 'radial-gradient', args: [ '75% 19%', ' ellipse closest-side', ' rgb(171, 171, 171)', ' rgb(0, 0, 255) 33%', ' rgb(153, 31, 31) 100%' ] }, { method: 'radial-gradient', args: [ '75% 19%', ' ellipse closest-corner', ' rgb(171, 171, 171)', ' rgb(0, 0, 255) 33%', ' rgb(153, 31, 31) 100%' ] }, { method: 'radial-gradient', args: [ '75% 19%', ' ellipse farthest-side', ' rgb(171, 171, 171)', ' rgb(0, 0, 255) 33%', ' rgb(153, 31, 31) 100%' ] }, { method: 'radial-gradient', args: [ '75% 19%', ' ellipse farthest-corner', ' rgb(171, 171, 171)', ' rgb(0, 0, 255) 33%', ' rgb(153, 31, 31) 100%' ] }, { method: 'radial-gradient', args: [ '75% 19%', ' ellipse contain', ' rgb(171, 171, 171)', ' rgb(0, 0, 255) 33%', ' rgb(153, 31, 31) 100%' ] }, { method: 'radial-gradient', args: [ '75% 19%', ' ellipse cover', ' rgb(171, 171, 171)', ' rgb(0, 0, 255) 33%', ' rgb(153, 31, 31) 100%' ] } ]; [].slice .call(document.querySelectorAll('#backgroundGradients div'), 0) .forEach(function(node, i) { var container = new html2canvas.NodeContainer(node, null); var value = container.css('backgroundImage'); it(value, function() { var parsedBackground = html2canvas.utils.parseBackgrounds(value); if (parsedBackground[0].args[0] === '0% 50%') { parsedBackground[0].args[0] = 'left'; } expect(parsedBackground[0].args).to.eql(expected[i].args); expect(parsedBackground[0].method).to.eql(expected[i].method); }); }); });