LayoutTests/css3/images/pixelated-canvas-webgl.html - Issue 562583002: Implement image-rendering:pixelated for accelerated 2D canvases.

Unified 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 side-by-side diff with in-line comments

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')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: LayoutTests/css3/images/pixelated-canvas-webgl.html

diff --git a/LayoutTests/compositing/webgl/webgl-reflection.html b/LayoutTests/css3/images/pixelated-canvas-webgl.html

similarity index 73%

copy from LayoutTests/compositing/webgl/webgl-reflection.html

copy to LayoutTests/css3/images/pixelated-canvas-webgl.html

index 866fc448112d1c8c1fdc77f5c5b2386ab11c14ab..d27bd2baee1f3cbd088ae12d716c8e684582d25e 100644

--- a/LayoutTests/compositing/webgl/webgl-reflection.html

+++ b/LayoutTests/css3/images/pixelated-canvas-webgl.html

@@ -3,15 +3,10 @@

<head>

canvas {

- margin: 20px;

- width: 200px;

- height: 200px;

- padding: 0 20px;

- border: 2px solid black;

- -webkit-box-reflect: below 20px;

- outline: 10px solid transparent; /* affects layer sizes */

+ width: 1000px;

+ height: 1000px;

+ image-rendering: pixelated;

}

</style>

attribute vec4 vPosition;

@@ -27,26 +22,26 @@

}

</script>

- if (window.testRunner)

- testRunner.overridePreference("WebKitWebGLEnabled", "1");

+ if (window.testRunner) {

+ window.testRunner.overridePreference("WebKitWebGLEnabled", "1");

+ window.testRunner.dumpAsTextWithPixelResults();

+ }

var gl = null;

- function draw()

- {

+ function draw() {

var vertices = [ 0.0, 0.8, 0.0,

-0.8, -0.8, 0.0,

- 0.8, -0.8, 0.0 ];

+ 0.8, -0.8, 0.0 ];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data

- gl.enableVertexAttribArray(0);

- gl.drawArrays(gl.TRIANGLES, 0, 3);

+ gl.enableVertexAttribArray(0);

+ gl.drawArrays(gl.TRIANGLES, 0, 3);

gl.flush();

}

- function getFragmentShader()

- {

+ function getFragmentShader() {

var shaderNode = document.getElementById("fragmentShader"); // fragmentShader has been defined at the top

var shaderSource = getShaderSource(shaderNode);

@@ -57,8 +52,7 @@

return shader;

}

- function getShaderSource(shaderNode)

- {

+ function getShaderSource(shaderNode) {

var shaderSource = "";

var node = shaderNode.firstChild;

while (node) {

@@ -70,8 +64,7 @@

return shaderSource;

}

- function getVertexShader()

- {

+ function getVertexShader() {

var shaderNode = document.getElementById("vertexShader");

var shaderSource = getShaderSource(shaderNode);

@@ -82,8 +75,7 @@

return shader;

}

- function initialize()

- {

+ function initialize() {

var theCanvas = document.getElementById("canvas");

gl = theCanvas.getContext("experimental-webgl");

@@ -98,21 +90,17 @@

gl.useProgram(shaderProgram);

- var buffer = gl.createBuffer();

+ var buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

}

- function drawCanvas()

- {

+ function drawCanvas() {

initialize();

draw();

}

</script>

</head>

- <p>You should see a green triangle and its reflection.</p>

- <canvas id="canvas" style="left: 20px" width="200" height="200"></canvas>

+ <canvas id="canvas" width="300" height="300"></canvas>

</body>

-</html>

+</html>