third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-modify-emptyPath.js

   1 description("This tests behaviour of path modification APIs on an empty path.");
   2 var canvas = document.createElement('canvas');
   3 canvas.width=300;
   4 canvas.height=300;
   5 var ctx = canvas.getContext('2d');
   6
   7 function getColor(x,y) {
   8     var imageData = ctx.getImageData(x, y, 1, 1);
   9     var data = imageData.data;
  10     return [data[0], data[1], data[2], data[3]];
  11 }
  12
  13 // Test no drawing cases
  14 ctx.fillStyle = 'green';
  15 ctx.strokeStyle = 'red';
  16 ctx.lineWidth = 50;
  17
  18 debug("Test lineTo")
  19 ctx.beginPath();
  20 ctx.fillRect(0, 0, 100, 100);
  21 ctx.lineTo(50, 50);
  22 ctx.stroke();
  23 shouldBe("getColor(40,40)", "[0,128,0,255]");
  24 ctx.clearRect(0, 0, 300, 300);
  25
  26 // Test when create rectangle path using a rectangle with width = height = 0.
  27 debug("Test canvas.rect() with width = height = 0.");
  28 ctx.strokeStyle = 'red';
  29 ctx.lineWidth = 10;
  30 ctx.beginPath();
  31 ctx.rect(0, 0, 0, 0);
  32 ctx.stroke();
  33 shouldBe("getColor(1,1)", "[0,0,0,0]");
  34 ctx.clearRect(0, 0, 300, 300);
  35
  36 // Test path modifications that result in drawing
  37 ctx.fillStyle = 'red';
  38 ctx.strokeStyle = 'green';
  39
  40 debug("Test lineTo sequence")
  41 ctx.beginPath();
  42 ctx.fillRect(0, 0, 100, 100);
  43 ctx.lineTo(0, 50);
  44 ctx.lineTo(100, 50);
  45 ctx.stroke();
  46 shouldBe("getColor(0,0)", "[255,0,0,255]");
  47 shouldBe("getColor(50,50)", "[0,128,0,255]");
  48 ctx.clearRect(0, 0, 300, 300);
  49
  50 debug("Test quadraticCurveTo")
  51 ctx.beginPath();
  52 ctx.fillRect(0, 0, 100, 100);
  53 ctx.quadraticCurveTo(0, 50, 100, 50);
  54 ctx.stroke();
  55 shouldBe("getColor(10,10)", "[255,0,0,255]");
  56 shouldBe("getColor(50,50)", "[0,128,0,255]");
  57 ctx.clearRect(0, 0, 300, 300);
  58
  59 debug("Test quadraticCurveTo endpoint")
  60 ctx.beginPath();
  61 ctx.fillRect(0, 0, 100, 100);
  62 ctx.quadraticCurveTo(0, 50, 100, 50);
  63 ctx.lineTo(50, 100);
  64 ctx.stroke();
  65 shouldBe("getColor(10,10)", "[255,0,0,255]");
  66 shouldBe("getColor(99,51)", "[0,128,0,255]");
  67 shouldBe("getColor(50,50)", "[0,128,0,255]");
  68 ctx.clearRect(0, 0, 300, 300);
  69
  70 debug("Test bezierCurveTo")
  71 ctx.beginPath();
  72 ctx.fillRect(0, 0, 100, 100);
  73 ctx.bezierCurveTo(0, 50, 50, 50, 100, 50);
  74 ctx.stroke();
  75 shouldBe("getColor(10,10)", "[255,0,0,255]");
  76 shouldBe("getColor(50,50)", "[0,128,0,255]");
  77 ctx.clearRect(0, 0, 300, 300);
  78
  79 debug("Test bezierCurveTo endpoint")
  80 ctx.beginPath();
  81 ctx.fillRect(0, 0, 100, 100);
  82 ctx.bezierCurveTo(0, 50, 50, 50, 100, 50);
  83 ctx.stroke();
  84 ctx.lineTo(50, 100);
  85 ctx.stroke();
  86 shouldBe("getColor(10,10)", "[255,0,0,255]");
  87 shouldBe("getColor(99,51)", "[0,128,0,255]");
  88 shouldBe("getColor(50,50)", "[0,128,0,255]");
  89 ctx.clearRect(0, 0, 300, 300);