| OLD | NEW | 
|---|
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <script src="../../resources/testharness.js"></script> | 
| 2 <html> | 2 <script src="../../resources/testharnessreport.js"></script> | 
| 3 <head> |  | 
| 4 <script src="../../resources/js-test.js"></script> |  | 
| 5 </head> |  | 
| 6 <body> | 3 <body> | 
| 7 <script src="script-tests/canvas-strokePath-cap-join.js"></script> | 4 <script> | 
|  | 5 | 
|  | 6 var canvas = document.createElement('canvas'); | 
|  | 7 document.body.appendChild(canvas); | 
|  | 8 canvas.setAttribute('width', '700'); | 
|  | 9 canvas.setAttribute('height', '200'); | 
|  | 10 var ctx = canvas.getContext('2d'); | 
|  | 11 | 
|  | 12 ctx.miterLimit = 5; | 
|  | 13 ctx.lineWidth = 15; | 
|  | 14 | 
|  | 15 ctx.fillStyle="rgba(255, 255, 255, 1.0)"; | 
|  | 16 ctx.fillRect(0, 0, 700, 200); | 
|  | 17 | 
|  | 18 ctx.strokeStyle="rgba(0, 0, 0, 1.0)"; | 
|  | 19 ctx.lineJoin = "miter"; | 
|  | 20 ctx.lineCap = "round"; | 
|  | 21 | 
|  | 22 ctx.translate(0, 50); | 
|  | 23 ctx.save(); | 
|  | 24 | 
|  | 25 ctx.beginPath(); | 
|  | 26 ctx.moveTo(10, 100); | 
|  | 27 ctx.lineTo(30, 2); | 
|  | 28 ctx.lineTo(50, 100); | 
|  | 29 ctx.stroke(); | 
|  | 30 | 
|  | 31 ctx.translate(60 ,0); | 
|  | 32 ctx.beginPath(); | 
|  | 33 ctx.moveTo(10, 100); | 
|  | 34 ctx.lineTo(30, 3); | 
|  | 35 ctx.lineTo(50, 100); | 
|  | 36 ctx.stroke(); | 
|  | 37 | 
|  | 38 ctx.translate(90 ,0); | 
|  | 39 ctx.save(); | 
|  | 40 ctx.rotate(0.2); | 
|  | 41 ctx.beginPath(); | 
|  | 42 ctx.moveTo(10, 100); | 
|  | 43 ctx.lineTo(30, 3); | 
|  | 44 ctx.lineTo(50, 100); | 
|  | 45 ctx.closePath(); | 
|  | 46 ctx.stroke(); | 
|  | 47 ctx.restore(); | 
|  | 48 | 
|  | 49 ctx.restore(); | 
|  | 50 | 
|  | 51 ctx.lineJoin = "bevel"; | 
|  | 52 ctx.lineCap = "square"; | 
|  | 53 | 
|  | 54 ctx.translate(200, 0); | 
|  | 55 ctx.save(); | 
|  | 56 | 
|  | 57 ctx.beginPath(); | 
|  | 58 ctx.moveTo(10, 100); | 
|  | 59 ctx.lineTo(30, 2); | 
|  | 60 ctx.lineTo(50, 100); | 
|  | 61 ctx.stroke(); | 
|  | 62 | 
|  | 63 ctx.translate(60 ,0); | 
|  | 64 ctx.beginPath(); | 
|  | 65 ctx.moveTo(10, 100); | 
|  | 66 ctx.lineTo(30, 3); | 
|  | 67 ctx.lineTo(50, 100); | 
|  | 68 ctx.stroke(); | 
|  | 69 | 
|  | 70 ctx.translate(90 ,0); | 
|  | 71 ctx.save(); | 
|  | 72 ctx.rotate(0.2); | 
|  | 73 ctx.beginPath(); | 
|  | 74 ctx.moveTo(10, 100); | 
|  | 75 ctx.lineTo(30, 3); | 
|  | 76 ctx.lineTo(50, 100); | 
|  | 77 ctx.closePath(); | 
|  | 78 ctx.stroke(); | 
|  | 79 ctx.restore(); | 
|  | 80 | 
|  | 81 ctx.restore(); | 
|  | 82 | 
|  | 83 ctx.lineJoin = "round"; | 
|  | 84 ctx.lineCap = "butt"; | 
|  | 85 | 
|  | 86 ctx.translate(200, 0); | 
|  | 87 ctx.save(); | 
|  | 88 | 
|  | 89 ctx.beginPath(); | 
|  | 90 ctx.moveTo(10, 100); | 
|  | 91 ctx.lineTo(30, 2); | 
|  | 92 ctx.lineTo(50, 100); | 
|  | 93 ctx.stroke(); | 
|  | 94 | 
|  | 95 ctx.translate(60 ,0); | 
|  | 96 ctx.beginPath(); | 
|  | 97 ctx.moveTo(10, 100); | 
|  | 98 ctx.lineTo(30, 3); | 
|  | 99 ctx.lineTo(50, 100); | 
|  | 100 ctx.stroke(); | 
|  | 101 | 
|  | 102 ctx.translate(90 ,0); | 
|  | 103 ctx.save(); | 
|  | 104 ctx.rotate(0.2); | 
|  | 105 ctx.beginPath(); | 
|  | 106 ctx.moveTo(10, 100); | 
|  | 107 ctx.lineTo(30, 3); | 
|  | 108 ctx.lineTo(50, 100); | 
|  | 109 ctx.closePath(); | 
|  | 110 ctx.stroke(); | 
|  | 111 ctx.restore(); | 
|  | 112 | 
|  | 113 ctx.restore(); | 
|  | 114 | 
|  | 115 function checkPixel(x, y, redComponent) | 
|  | 116 { | 
|  | 117     assert_equals(ctx.getImageData(x, y, 1, 1).data[0], redComponent); | 
|  | 118 } | 
|  | 119 | 
|  | 120 var testScenarios = [ | 
|  | 121     ['Verify Join : miter, Cap : round. 1', 30, 51, 0], | 
|  | 122     ['Verify Join : miter, Cap : round. 2', 30, 49, 255], | 
|  | 123     ['Verify Join : miter, Cap : round. 3', 14, 154, 0], | 
|  | 124     ['Verify Join : miter, Cap : round. 4', 14, 157, 255], | 
|  | 125     ['Verify Join : miter, Cap : round. 5', 89, 22, 0], | 
|  | 126     ['Verify Join : miter, Cap : round. 6', 89, 12, 255], | 
|  | 127     ['Verify Join : miter, Cap : round. 7', 184, 29, 0], | 
|  | 128     ['Verify Join : miter, Cap : round. 8', 180, 27, 255], | 
|  | 129     ['Verify Join : miter, Cap : round. 9', 132, 152, 0], | 
|  | 130     ['Verify Join : miter, Cap : round. 10', 130, 157, 255], | 
|  | 131 | 
|  | 132     ['Verify Join : bevel, Cap : square. 1', 202, 154, 0], | 
|  | 133     ['Verify Join : bevel, Cap : square. 2', 201, 150, 255], | 
|  | 134     ['Verify Join : bevel, Cap : square. 3', 228, 52, 0], | 
|  | 135     ['Verify Join : bevel, Cap : square. 4', 225, 48, 255], | 
|  | 136     ['Verify Join : bevel, Cap : square. 5', 316, 154, 0], | 
|  | 137     ['Verify Join : bevel, Cap : square. 6', 316, 157, 255], | 
|  | 138     ['Verify Join : bevel, Cap : square. 7', 289, 52, 0], | 
|  | 139     ['Verify Join : bevel, Cap : square. 8', 289, 48, 255], | 
|  | 140     ['Verify Join : bevel, Cap : square. 9', 372, 58, 0], | 
|  | 141     ['Verify Join : bevel, Cap : square. 10', 373, 54, 255], | 
|  | 142     ['Verify Join : bevel, Cap : square. 11', 380, 159, 0], | 
|  | 143     ['Verify Join : bevel, Cap : square. 12', 383, 162, 255], | 
|  | 144 | 
|  | 145     ['Verify Join : round, Cap : butt. 1', 405, 147, 0], | 
|  | 146     ['Verify Join : round, Cap : butt. 2', 405, 151, 255], | 
|  | 147     ['Verify Join : round, Cap : butt. 3', 429, 46, 0], | 
|  | 148     ['Verify Join : round, Cap : butt. 4', 429, 43, 255], | 
|  | 149     ['Verify Join : round, Cap : butt. 5', 464, 146, 0], | 
|  | 150     ['Verify Join : round, Cap : butt. 6', 464, 150, 255], | 
|  | 151     ['Verify Join : round, Cap : butt. 7', 489, 46, 0], | 
|  | 152     ['Verify Join : round, Cap : butt. 8', 489, 43, 255], | 
|  | 153     ['Verify Join : round, Cap : butt. 9', 534, 151, 0], | 
|  | 154     ['Verify Join : round, Cap : butt. 10', 531, 153, 255], | 
|  | 155     ['Verify Join : round, Cap : butt. 11', 579, 52, 0], | 
|  | 156     ['Verify Join : round, Cap : butt. 12', 579, 48, 255], | 
|  | 157 ]; | 
|  | 158 | 
|  | 159 generate_tests(checkPixel, testScenarios); | 
|  | 160 | 
|  | 161 </script> | 
| 8 </body> | 162 </body> | 
| 9 </html> |  | 
| OLD | NEW | 
|---|