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 |