third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-lineDash.js

   1 description("Basic test for setLineDash, getLineDash and lineDashOffset");
   2
   3 var canvas = document.createElement('canvas');
   4 document.body.appendChild(canvas);
   5 canvas.setAttribute('width', '700');
   6 canvas.setAttribute('height', '700');
   7 var ctx = canvas.getContext('2d');
   8
   9 function dataToArray(data) {
  10     var result = new Array(data.length)
  11     for (var i = 0; i < data.length; i++)
  12         result[i] = data[i];
  13     return result;
  14 }
  15
  16 function getPixel(x, y) {
  17     var data = ctx.getImageData(x,y,1,1);
  18     if (!data) // getImageData failed, which should never happen
  19         return [-1,-1,-1,-1];
  20     return dataToArray(data.data);
  21 }
  22
  23 function pixelShouldBe(x, y, colour) {
  24     shouldBe("getPixel(" + [x, y] +")", "["+colour+"]");
  25 }
  26
  27 // Verify default values.
  28 shouldBe('ctx.lineDashOffset', '0');
  29
  30 // Set dash-style.
  31 ctx.setLineDash([15, 10]);
  32 ctx.lineDashOffset = 5;
  33 ctx.strokeRect (10,10,100,100);
  34
  35 // Verify dash and offset.
  36 var lineDash;
  37 lineDash = ctx.getLineDash();
  38 shouldBe('lineDash[0]', '15');
  39 shouldBe('lineDash[1]', '10');
  40 shouldBe('ctx.lineDashOffset', '5');
  41
  42 // Set dash style to even number
  43 ctx.setLineDash([5, 10, 15]);
  44 ctx.strokeRect(20, 20, 120, 120);
  45
  46 // Verify dash pattern is normalized
  47 lineDash = ctx.getLineDash();
  48 shouldBe('lineDash[0]', '5');
  49 shouldBe('lineDash[1]', '10');
  50 shouldBe('lineDash[2]', '15');
  51 shouldBe('lineDash[3]', '5');
  52 shouldBe('lineDash[4]', '10');
  53 shouldBe('lineDash[5]', '15');
  54
  55 // Verify that conversion from string works
  56 ctx.setLineDash(["1", 2]);
  57 lineDash = ctx.getLineDash();
  58 shouldBe('lineDash[0]', '1');
  59 shouldBe('lineDash[1]', '2');
  60
  61 // Verify that line dash offset persists after
  62 // clearRect (which causes a save/restore of the context
  63 // state to the stack).
  64 ctx.clearRect(0, 0, 700, 700);
  65 shouldBe('ctx.lineDashOffset', '5');
  66
  67 // Verify dash rendering
  68 ctx.setLineDash([20, 10]);
  69 ctx.lineDashOffset = 0;
  70 ctx.lineWidth = 4; // To make the test immune to plaform anti-aliasing discrepancies
  71 ctx.strokeStyle = '#00FF00';
  72 ctx.strokeRect(10.5, 10.5, 30, 30);
  73
  74 pixelShouldBe(25, 10, [0, 255, 0, 255]);
  75 pixelShouldBe(35, 10, [0, 0, 0, 0]);
  76 pixelShouldBe(40, 25, [0, 255, 0, 255]);
  77 pixelShouldBe(40, 35, [0, 0, 0, 0]);
  78 pixelShouldBe(25, 40, [0, 255, 0, 255]);
  79 pixelShouldBe(15, 40, [0, 0, 0, 0]);
  80 pixelShouldBe(10, 25, [0, 255, 0, 255]);
  81 pixelShouldBe(10, 15, [0, 0, 0, 0]);
  82
  83 // Verify that lineDashOffset works as expected
  84 ctx.lineDashOffset = 20;
  85 ctx.strokeRect(50.5, 10.5, 30, 30);
  86 pixelShouldBe(55, 10, [0, 0, 0, 0]);
  87 pixelShouldBe(65, 10, [0, 255, 0, 255]);
  88 pixelShouldBe(80, 15, [0, 0, 0, 0]);
  89 pixelShouldBe(80, 25, [0, 255, 0, 255]);
  90 pixelShouldBe(75, 40, [0, 0, 0, 0]);
  91 pixelShouldBe(65, 40, [0, 255, 0, 255]);
  92 pixelShouldBe(50, 35, [0, 0, 0, 0]);
  93 pixelShouldBe(50, 25, [0, 255, 0, 255]);
  94
  95 // Verify negative lineDashOffset
  96 ctx.lineDashOffset = -10;
  97 ctx.strokeRect(90.5, 10.5, 30, 30);
  98 pixelShouldBe(95, 10, [0, 0, 0, 0]);
  99 pixelShouldBe(105, 10, [0, 255, 0, 255]);
 100 pixelShouldBe(120, 15, [0, 0, 0, 0]);
 101 pixelShouldBe(120, 25, [0, 255, 0, 255]);
 102 pixelShouldBe(115, 40, [0, 0, 0, 0]);
 103 pixelShouldBe(105, 40, [0, 255, 0, 255]);
 104 pixelShouldBe(90, 35, [0, 0, 0, 0]);
 105 pixelShouldBe(90, 25, [0, 255, 0, 255]);
 106