| OLD | NEW |
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <!-- Test based on that found at | 2 <!-- Test based on that found at |
| 3 http://philip.html5.org/tests/canvas/suite/tests/index.2d.transformation.tr
ansform.html | 3 http://philip.html5.org/tests/canvas/suite/tests/index.2d.transformation.tr
ansform.html |
| 4 --> | 4 --> |
| 5 <title>Canvas test: 2d.transformation.transform.skewed</title> | 5 <title>Canvas test: 2d.transformation.transform.skewed</title> |
| 6 <canvas id="canvas" class="output" width="100" height="100"><p class="fallback">
FAIL (fallback content)</p></canvas> | 6 <canvas id="canvas" class="output" width="100" height="100"><p class="fallback">
FAIL (fallback content)</p></canvas> |
| 7 <script> | 7 <script> |
| 8 if (window.testRunner) | 8 if (window.testRunner) |
| 9 testRunner.dumpAsText(true); | 9 testRunner.dumpAsTextWithPixelResults(); |
| 10 | 10 |
| 11 var ctx = document.getElementById("canvas").getContext("2d"); | 11 var ctx = document.getElementById("canvas").getContext("2d"); |
| 12 // Create green with a red square ring inside it | 12 // Create green with a red square ring inside it |
| 13 ctx.fillStyle = '#0f0'; | 13 ctx.fillStyle = '#0f0'; |
| 14 ctx.fillRect(0, 0, 100, 100); | 14 ctx.fillRect(0, 0, 100, 100); |
| 15 ctx.fillStyle = '#f00'; | 15 ctx.fillStyle = '#f00'; |
| 16 ctx.fillRect(20, 10, 60, 30); | 16 ctx.fillRect(20, 10, 60, 30); |
| 17 ctx.fillStyle = '#0f0'; | 17 ctx.fillStyle = '#0f0'; |
| 18 ctx.fillRect(40, 20, 20, 10); | 18 ctx.fillRect(40, 20, 20, 10); |
| 19 | 19 |
| 20 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly | 20 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly |
| 21 ctx.transform(1,4, 2,3, 5,6); | 21 ctx.transform(1,4, 2,3, 5,6); |
| 22 | 22 |
| 23 // Post-transform coordinates: | 23 // Post-transform coordinates: |
| 24 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[4
0,20],[20,10]]; | 24 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[4
0,20],[20,10]]; |
| 25 // Hence pre-transform coordinates: | 25 // Hence pre-transform coordinates: |
| 26 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2], | 26 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2], |
| 27 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2], | 27 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2], |
| 28 [-7.4,11.2]]; | 28 [-7.4,11.2]]; |
| 29 ctx.beginPath(); | 29 ctx.beginPath(); |
| 30 ctx.moveTo(pts[0][0], pts[0][1]); | 30 ctx.moveTo(pts[0][0], pts[0][1]); |
| 31 for (var i = 0; i < pts.length; ++i) | 31 for (var i = 0; i < pts.length; ++i) |
| 32 ctx.lineTo(pts[i][0], pts[i][1]); | 32 ctx.lineTo(pts[i][0], pts[i][1]); |
| 33 ctx.fill(); | 33 ctx.fill(); |
| 34 </script> | 34 </script> |
| OLD | NEW |