Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(538)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/images/pixelated-canvas-webgl.html

Issue 562583002: Implement image-rendering:pixelated for accelerated 2D canvases. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Add tests. Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « LayoutTests/css3/images/pixelated-canvas-composited.html ('k') | LayoutTests/css3/images/resources/dice_alpha.png » ('j') | Source/core/html/HTMLCanvasElement.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style type="text/css" media="screen"> 4 <style type="text/css" media="screen">
5 canvas { 5 canvas {
6 margin: 20px; 6 width: 1000px;
7 width: 200px; 7 height: 1000px;
8 height: 200px; 8 image-rendering: pixelated;
9 padding: 0 20px;
10 border: 2px solid black;
11 -webkit-box-reflect: below 20px;
12 outline: 10px solid transparent; /* affects layer sizes */
13 } 9 }
14
15 </style> 10 </style>
16 <script id="vertexShader" type="x-shader/x-vertex"> 11 <script id="vertexShader" type="x-shader/x-vertex">
17 attribute vec4 vPosition; 12 attribute vec4 vPosition;
18 13
19 void main() { 14 void main() {
20 gl_Position = vPosition; 15 gl_Position = vPosition;
21 } 16 }
22 </script> 17 </script>
23 18
24 <script id="fragmentShader" type="x-shader/x-fragment"> 19 <script id="fragmentShader" type="x-shader/x-fragment">
25 void main() { 20 void main() {
26 gl_FragColor = vec4(0.0, 0.5, 0.0, 1.0); 21 gl_FragColor = vec4(0.0, 0.5, 0.0, 1.0);
27 } 22 }
28 </script> 23 </script>
29 <script> 24 <script>
30 if (window.testRunner) 25 if (window.testRunner) {
31 testRunner.overridePreference("WebKitWebGLEnabled", "1"); 26 window.testRunner.overridePreference("WebKitWebGLEnabled", "1");
27 window.testRunner.dumpAsTextWithPixelResults();
28 }
32 29
33 var gl = null; 30 var gl = null;
34 31
35 function draw() 32 function draw() {
36 {
37 var vertices = [ 0.0, 0.8, 0.0, 33 var vertices = [ 0.0, 0.8, 0.0,
38 -0.8, -0.8, 0.0, 34 -0.8, -0.8, 0.0,
39 0.8, -0.8, 0.0 ]; 35 0.8, -0.8, 0.0 ];
40 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRA W); 36 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRA W);
41 37
42 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data 38 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data
43 gl.enableVertexAttribArray(0); 39 gl.enableVertexAttribArray(0);
44 gl.drawArrays(gl.TRIANGLES, 0, 3); 40 gl.drawArrays(gl.TRIANGLES, 0, 3);
45 gl.flush(); 41 gl.flush();
46 } 42 }
47 43
48 function getFragmentShader() 44 function getFragmentShader() {
49 {
50 var shaderNode = document.getElementById("fragmentShader"); // fragmentS hader has been defined at the top 45 var shaderNode = document.getElementById("fragmentShader"); // fragmentS hader has been defined at the top
51 var shaderSource = getShaderSource(shaderNode); 46 var shaderSource = getShaderSource(shaderNode);
52 47
53 var shader = gl.createShader(gl.FRAGMENT_SHADER); 48 var shader = gl.createShader(gl.FRAGMENT_SHADER);
54 gl.shaderSource(shader, shaderSource); 49 gl.shaderSource(shader, shaderSource);
55 gl.compileShader(shader); 50 gl.compileShader(shader);
56 51
57 return shader; 52 return shader;
58 } 53 }
59 54
60 function getShaderSource(shaderNode) 55 function getShaderSource(shaderNode) {
61 {
62 var shaderSource = ""; 56 var shaderSource = "";
63 var node = shaderNode.firstChild; 57 var node = shaderNode.firstChild;
64 while (node) { 58 while (node) {
65 if (node.nodeType == 3) // Node.TEXT_NODE 59 if (node.nodeType == 3) // Node.TEXT_NODE
66 shaderSource += node.textContent; 60 shaderSource += node.textContent;
67 node = node.nextSibling; 61 node = node.nextSibling;
68 } 62 }
69 63
70 return shaderSource; 64 return shaderSource;
71 } 65 }
72 66
73 function getVertexShader() 67 function getVertexShader() {
74 {
75 var shaderNode = document.getElementById("vertexShader"); 68 var shaderNode = document.getElementById("vertexShader");
76 var shaderSource = getShaderSource(shaderNode); 69 var shaderSource = getShaderSource(shaderNode);
77 70
78 var shader = gl.createShader(gl.VERTEX_SHADER); 71 var shader = gl.createShader(gl.VERTEX_SHADER);
79 gl.shaderSource(shader, shaderSource); 72 gl.shaderSource(shader, shaderSource);
80 gl.compileShader(shader); 73 gl.compileShader(shader);
81 74
82 return shader; 75 return shader;
83 } 76 }
84 77
85 function initialize() 78 function initialize() {
86 {
87 var theCanvas = document.getElementById("canvas"); 79 var theCanvas = document.getElementById("canvas");
88 gl = theCanvas.getContext("experimental-webgl"); 80 gl = theCanvas.getContext("experimental-webgl");
89 81
90 var vertexShader = getVertexShader(); 82 var vertexShader = getVertexShader();
91 var fragmentShader = getFragmentShader(); 83 var fragmentShader = getFragmentShader();
92 84
93 var shaderProgram = gl.createProgram(); 85 var shaderProgram = gl.createProgram();
94 gl.attachShader(shaderProgram, vertexShader); 86 gl.attachShader(shaderProgram, vertexShader);
95 gl.attachShader(shaderProgram, fragmentShader); 87 gl.attachShader(shaderProgram, fragmentShader);
96 gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has b een defined at the top 88 gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has b een defined at the top
97 gl.linkProgram(shaderProgram); 89 gl.linkProgram(shaderProgram);
98 90
99 gl.useProgram(shaderProgram); 91 gl.useProgram(shaderProgram);
100 92
101 var buffer = gl.createBuffer(); 93 var buffer = gl.createBuffer();
102 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 94 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
103 } 95 }
104 96
105 function drawCanvas() 97 function drawCanvas() {
106 {
107 initialize(); 98 initialize();
108 draw(); 99 draw();
109 } 100 }
110 </script> 101 </script>
111 </head> 102 </head>
112 <body onload="drawCanvas()"> 103 <body onload="drawCanvas()">
113 104 <canvas id="canvas" width="300" height="300"></canvas>
114 <p>You should see a green triangle and its reflection.</p>
115 <canvas id="canvas" style="left: 20px" width="200" height="200"></canvas>
116
117 </body> 105 </body>
118 </html> 106 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/images/pixelated-canvas-composited.html ('k') | LayoutTests/css3/images/resources/dice_alpha.png » ('j') | Source/core/html/HTMLCanvasElement.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698