Chromium Code Reviews Chromium Code Reviews
Issue 562583002:
Implement image-rendering:pixelated for accelerated 2D canvases. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/canvas/pixelated.html |
| diff --git a/LayoutTests/fast/canvas/pixelated.html b/LayoutTests/fast/canvas/pixelated.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..facf53f31f6f2bc6e05b31c078d1b94a963356a1 |
| --- /dev/null |
| +++ b/LayoutTests/fast/canvas/pixelated.html |
| @@ -0,0 +1,62 @@ |
| +<!DOCTYPE html> |
| +<style> |
| + img { |
| + display: none; |
| + } |
| + canvas { |
| + width: 1000px; |
|
Justin Novosad
2014/11/18 16:32:50
This is larger than the area that is captured by t
jackhou1
2014/12/01 07:00:08
Ah, I wanted the canvas to be larger than 256x257
Stephen White
2014/12/01 15:53:48
As you probably know, the layout tests will automa
jackhou1
2014/12/02 00:50:48
Done.
|
| + height: 1000px; |
| + image-rendering: pixelated; |
| + } |
| + .canvas0 { |
| + position: absolute; |
| + top: 0; |
| + left: 0; |
| + z-index: 0; |
| + } |
| + .canvas1 { |
| + position: absolute; |
| + top: 250px; |
| + left: 250px; |
| + z-index: 1; |
| + } |
| + .canvas2 { |
| + position: absolute; |
| + top: 500px; |
| + left: 500px; |
| + z-index: 2; |
| + image-rendering: auto; |
| + } |
| +</style> |
| +<body> |
| + <img src="resources/dice_alpha.png"> |
| + <!-- Test that gpu accelerated canvases work with pixelated. --> |
| + <!-- Canvases should be overlaid at an offset. Only the middle one should be blurred. --> |
| + <canvas class="canvas0" width="300" height="300"></canvas> |
| + <canvas class="canvas1" width="300" height="300"></canvas> |
| + <canvas class="canvas2" width="300" height="300"></canvas> |
| +</body> |
| +<script> |
| + // Ignore the render tree. |
| + if (window.testRunner) |
| + window.testRunner.dumpAsTextWithPixelResults(); |
| + |
| + var image = document.getElementsByTagName("img")[0]; |
| + |
| + function drawToCanvas(canvas) { |
| + canvas.getContext("2d").drawImage(image, -0.5, -0.5, 300, 300); |
| + } |
| + |
| + function draw() { |
| + drawToCanvas(document.getElementsByTagName("canvas")[0]); |
| + var canvas1 = document.getElementsByTagName("canvas")[1]; |
| + var canvas2 = document.getElementsByTagName("canvas")[2]; |
| + drawToCanvas(canvas1); |
| + drawToCanvas(canvas2); |
| + // The first canvas stays pixelated. Flip the pixelated-ness of the |
| + // other two. |
| + canvas1.style.imageRendering = "auto"; |
| + canvas2.style.imageRendering = "pixelated"; |
| + } |
| + window.onload = draw; |
| +</script> |
