diff --git a/test/public/tests.js b/test/public/tests.js index 36375fe..d66dba8 100644 --- a/test/public/tests.js +++ b/test/public/tests.js @@ -1,7 +1,94 @@ var tests = {}; -tests['linear gradients'] = function(ctx){ +tests['clearRect()'] = function(ctx){ + ctx.fillRect(25,25,100,100); + ctx.clearRect(45,45,60,60); + ctx.fillRect(50,50,50,50); +}; + +tests['strokeRect()'] = function(ctx){ + ctx.fillRect(25,25,100,100); + ctx.clearRect(45,45,60,60); + ctx.strokeRect(50,50,50,50); +}; + +tests['lineTo()'] = function(ctx){ + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25.5,25); + ctx.lineTo(105,25); + ctx.lineTo(25,105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125,125); + ctx.lineTo(125,45); + ctx.lineTo(45,125); + ctx.closePath(); + ctx.stroke(); +}; + +tests['arc()'] = function(ctx){ + ctx.beginPath(); + ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle + ctx.moveTo(110,75); + ctx.arc(75,75,35,0,Math.PI,false); // Mouth + ctx.moveTo(65,65); + ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye + ctx.moveTo(95,65); + ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye + ctx.stroke(); +}; + +tests['bezierCurveTo()'] = function(ctx){ + ctx.beginPath(); + ctx.moveTo(75,40); + ctx.bezierCurveTo(75,37,70,25,50,25); + ctx.bezierCurveTo(20,25,20,62.5,20,62.5); + ctx.bezierCurveTo(20,80,40,102,75,120); + ctx.bezierCurveTo(110,102,130,80,130,62.5); + ctx.bezierCurveTo(130,62.5,130,25,100,25); + ctx.bezierCurveTo(85,25,75,37,75,40); + ctx.fill(); +}; + +tests['quadraticCurveTo()'] = function(ctx){ + ctx.beginPath(); + ctx.moveTo(75,25); + ctx.quadraticCurveTo(25,25,25,62.5); + ctx.quadraticCurveTo(25,100,50,100); + ctx.quadraticCurveTo(50,120,30,125); + ctx.quadraticCurveTo(60,120,65,100); + ctx.quadraticCurveTo(125,100,125,62.5); + ctx.quadraticCurveTo(125,25,75,25); + ctx.stroke(); +}; + +tests['rotate()'] = function(ctx){ + ctx.rotate(0.4); + ctx.translate(30,0); + ctx.rect(0,0,50,50); + ctx.stroke(); +}; + +tests['rect()'] = function(ctx){ + ctx.rect(5,5,50,50); + ctx.strokeStyle = 'yellow'; + ctx.fill(); + ctx.stroke(); +}; + +tests['clip()'] = function(ctx){ + ctx.arc(50,50,50,0,Math.PI * 2); + ctx.stroke(); + ctx.clip(); + ctx.fillStyle = 'rgba(0,0,0,.5)'; + ctx.fillRect(0,0,100,100); +}; + +tests['createLinearGradient()'] = function(ctx){ var lingrad = ctx.createLinearGradient(0,0,0,150); lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(0.5, '#fff'); @@ -19,7 +106,40 @@ tests['linear gradients'] = function(ctx){ ctx.strokeRect(50,50,50,50); }; -tests['global alpha'] = function(ctx){ +tests['createRadialGradient()'] = function(ctx){ + // Create gradients + var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); + radgrad.addColorStop(0, '#A7D30C'); + radgrad.addColorStop(0.9, '#019F62'); + radgrad.addColorStop(1, 'rgba(1,159,98,0)'); + + var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); + radgrad2.addColorStop(0, '#FF5F98'); + radgrad2.addColorStop(0.75, '#FF0188'); + radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); + + var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); + radgrad3.addColorStop(0, '#00C9FF'); + radgrad3.addColorStop(0.8, '#00B5E2'); + radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); + + var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); + radgrad4.addColorStop(0, '#F4F201'); + radgrad4.addColorStop(0.8, '#E4C700'); + radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); + + // draw shapes + ctx.fillStyle = radgrad4; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad3; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad2; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad; + ctx.fillRect(0,0,150,150); +}; + +tests['globalAlpha'] = function(ctx){ ctx.globalAlpha = 0.5; ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.strokeRect(0,0,50,50); @@ -30,4 +150,264 @@ tests['global alpha'] = function(ctx){ ctx.fillStyle = 'black'; ctx.globalAlpha = 1; ctx.fillRect(25,25,10,10); +}; + +tests['fillStyle'] = function(ctx){ + ctx.fillStyle = 'rgb(0,55,0)'; + ctx.fillRect(10, 10, 50, 50); + + ctx.fillStyle = 'rgba(0,0,0,0.1)'; + ctx.fillRect(60, 60, 50, 50); + + ctx.fillStyle = '#000'; + ctx.fillRect(110, 110, 50, 50); +}; + +tests['fill with stroke'] = function(ctx){ + ctx.beginPath(); + ctx.arc(75,75,50,0,Math.PI*2,true); + ctx.fill(); + ctx.closePath(); + ctx.beginPath(); + ctx.fillStyle = 'red'; + ctx.strokeStyle = 'yellow'; + ctx.arc(75,75,30,0,Math.PI*2,true); + ctx.fill(); + ctx.stroke(); +}; + +tests['lineWidth'] = function(ctx){ + ctx.beginPath(); + ctx.lineWidth = 10.0; + ctx.moveTo(50, 50); + ctx.lineTo(50, 100); + ctx.lineTo(80, 120); + ctx.stroke(); +}; + +tests['lineCap'] = function(ctx){ + ctx.beginPath(); + ctx.lineWidth = 10.0; + ctx.lineCap = 'round'; + ctx.moveTo(50, 50); + ctx.lineTo(50, 100); + ctx.lineTo(80, 120); + ctx.stroke(); +}; + +tests['lineJoin'] = function(ctx){ + ctx.beginPath(); + ctx.lineWidth = 10.0; + ctx.lineJoin = 'round'; + ctx.moveTo(50, 50); + ctx.lineTo(50, 100); + ctx.lineTo(80, 120); + ctx.stroke(); +}; + +tests['states'] = function(ctx){ + ctx.arc(5,5,-1) + ctx.save(); + ctx.rect(50, 50, 100, 100); + ctx.stroke(); + + ctx.restore(); + ctx.save(); + ctx.translate(50,50); + ctx.scale(.5,.5); + ctx.strokeRect(51, 51, 100, 100); + + ctx.restore(); + ctx.translate(95,95); + ctx.fillRect(0,0,10,10); +}; + +tests['states with stroke/fill/globalAlpha'] = function(ctx){ + ctx.fillRect(0,0,150,150); + ctx.save(); + + ctx.fillStyle = '#09F' + ctx.fillRect(15,15,120,120); + + ctx.save(); + ctx.fillStyle = '#FFF' + ctx.globalAlpha = 0.5; + ctx.fillRect(30,30,90,90); + + ctx.restore(); + ctx.fillRect(45,45,60,60); + + ctx.restore(); + ctx.fillRect(60,60,30,30); +}; + +tests['invalid stroke/fill styles'] = function(ctx){ + ctx.fillStyle = 'red'; + ctx.strokeStyle = 'yellow'; + ctx.rect(50,50,50,50); + ctx.fill(); + ctx.stroke(); + ctx.beginPath(); + ctx.fillStyle = 'asdf'; + ctx.strokeStyle = 'asdf'; + ctx.rect(100,80,15,15); + ctx.fill(); + ctx.stroke(); +}; + +tests['fillText()'] = function(ctx){ + ctx.font = '30px Arial'; + ctx.rotate(.1); + ctx.lineTo(10,10); + ctx.fillText("Awesome!", 50, 100); + + var te = ctx.measureText('Awesome!'); + + ctx.strokeStyle = 'rgba(0,0,0,0.5)'; + ctx.lineTo(50, 102); + ctx.lineTo(50 + te.width, 102); + ctx.stroke(); +}; + +tests['fillText() transformations'] = function(ctx){ + ctx.font = 'bold 12px Helvetica'; + + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.beginPath(); + ctx.lineTo(100,0); + ctx.lineTo(100,200); + ctx.stroke(); + + ctx.rotate(0.2); + ctx.fillText("foo", 150, 100); + ctx.font = 'normal 30px Arial'; + ctx.fillText("bar", 50, 100); +}; + +tests['strokeText()'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.beginPath(); + ctx.lineTo(100,0); + ctx.lineTo(100,200); + ctx.stroke(); + + ctx.strokeStyle = 'red'; + ctx.font = 'normal 50px Arial'; + ctx.strokeText("bar", 100, 100); +}; + +tests['textAlign right'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.beginPath(); + ctx.lineTo(100,0); + ctx.lineTo(100,200); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textAlign = 'right'; + ctx.fillText("Wahoo", 100, 100); +}; + +tests['textAlign left'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.beginPath(); + ctx.lineTo(100,0); + ctx.lineTo(100,200); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textAlign = 'left'; + ctx.fillText("Wahoo", 100, 100); +}; + +tests['textAlign center'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.beginPath(); + ctx.lineTo(100,0); + ctx.lineTo(100,200); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textAlign = 'center'; + ctx.fillText("Wahoo", 100, 100); +}; + +tests['textBaseline alphabetic'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textBaseline = 'alphabetic'; + ctx.textAlign = 'center'; + ctx.fillText("alphabetic", 100, 100); +}; + +tests['textBaseline top'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textBaseline = 'top'; + ctx.textAlign = 'center'; + ctx.fillText("top", 100, 100); +}; + +tests['textBaseline hanging'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textBaseline = 'hanging'; + ctx.textAlign = 'center'; + ctx.fillText("hanging", 100, 100); +}; + +tests['textBaseline bottom'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textBaseline = 'bottom'; + ctx.textAlign = 'center'; + ctx.fillText("bottom", 100, 100); +}; + +tests['textBaseline ideographic'] = function(ctx){ + ctx.strokeRect(0,0,200,200); + ctx.lineTo(0,100); + ctx.lineTo(200,100); + ctx.stroke(); + + ctx.font = 'normal 20px Arial'; + ctx.textBaseline = 'ideographic'; + ctx.textAlign = 'center'; + ctx.fillText("ideographic", 100, 100); }; \ No newline at end of file