2011-05-23 Mike Lawther <mikelawther@chromium.org>
[WebKit-https.git] / LayoutTests / css3 / images / optimize-contrast-canvas.html
1 <!DOCTYPE html> 
2 <style> 
3         canvas {
4                 display: block;
5                 position: fixed;
6                 left: 0px;
7                 top: 0px;
8                 right: 0px;
9                 bottom: 0px;
10                 border: none;
11                 width: 100px;
12                 height: 100px;
13                 margin: 0px;
14                 padding: 0px;
15                 image-rendering: -webkit-optimize-contrast;
16         }
17 </style> 
18 <body> 
19     <!-- The resulting image should be 100x100, consisting of 4 50x50 blocks of solid color, with no blurring of edges -->
20         <canvas width="2" height="2"></canvas> 
21 </body> 
22 <script> 
23     if (window.layoutTestController)
24         layoutTestController.dumpAsText(true);
25         
26         var canvas;
27         var imageHandle;
28         canvas = document.getElementsByTagName("canvas")[0].getContext("2d");
29         canvas.width = 2;
30         canvas.height = 2;
31         imageHandle = canvas.createImageData(2, 2);
32
33         var index = 0;
34         var length = imageHandle.data.length;
35
36     imageHandle.data[index++] = 255;
37     imageHandle.data[index++] = 0;
38     imageHandle.data[index++] = 0;
39     imageHandle.data[index++] = 255;
40
41     imageHandle.data[index++] = 0;
42     imageHandle.data[index++] = 255;
43     imageHandle.data[index++] = 0;
44     imageHandle.data[index++] = 255;
45
46     imageHandle.data[index++] = 0;
47     imageHandle.data[index++] = 0;
48     imageHandle.data[index++] = 255;
49     imageHandle.data[index++] = 255;
50
51     imageHandle.data[index++] = 0;
52     imageHandle.data[index++] = 0;
53     imageHandle.data[index++] = 0;
54     imageHandle.data[index++] = 255;
55
56         canvas.putImageData(imageHandle, 0, 0);
57 </script>