Title: [228644] releases/WebKitGTK/webkit-2.20
Revision
228644
Author
carlo...@webkit.org
Date
2018-02-19 03:02:34 -0800 (Mon, 19 Feb 2018)

Log Message

Merge r228213 - Rendering SVG images with same size as WebGL texture doesn't work correctly
https://bugs.webkit.org/show_bug.cgi?id=182367

Patch by Said Abou-Hallawa <sabouhall...@apple.com> on 2018-02-06
Reviewed by Dean Jackson.

Source/WebCore:

If am image buffer is created for a webgl texture and then it is reused
for another texture, it has to be cleared before drawing.

Test: webgl/webgl-texture-image-buffer-reuse.html

* html/canvas/WebGLRenderingContextBase.cpp:
(WebCore::WebGLRenderingContextBase::LRUImageBufferCache::imageBuffer):

LayoutTests:

* webgl/webgl-texture-image-buffer-reuse-expected.html: Added.
* webgl/webgl-texture-image-buffer-reuse.html: Added.

Modified Paths

Added Paths

Diff

Modified: releases/WebKitGTK/webkit-2.20/LayoutTests/ChangeLog (228643 => 228644)


--- releases/WebKitGTK/webkit-2.20/LayoutTests/ChangeLog	2018-02-19 11:02:28 UTC (rev 228643)
+++ releases/WebKitGTK/webkit-2.20/LayoutTests/ChangeLog	2018-02-19 11:02:34 UTC (rev 228644)
@@ -1,3 +1,13 @@
+2018-02-06  Said Abou-Hallawa  <sabouhall...@apple.com>
+
+        Rendering SVG images with same size as WebGL texture doesn't work correctly
+        https://bugs.webkit.org/show_bug.cgi?id=182367
+
+        Reviewed by Dean Jackson.
+
+        * webgl/webgl-texture-image-buffer-reuse-expected.html: Added.
+        * webgl/webgl-texture-image-buffer-reuse.html: Added.
+
 2018-02-05  Zan Dobersek  <zdober...@igalia.com>
 
         Unreviewed GTK+ gardening.

Added: releases/WebKitGTK/webkit-2.20/LayoutTests/webgl/webgl-texture-image-buffer-reuse-expected.html (0 => 228644)


--- releases/WebKitGTK/webkit-2.20/LayoutTests/webgl/webgl-texture-image-buffer-reuse-expected.html	                        (rev 0)
+++ releases/WebKitGTK/webkit-2.20/LayoutTests/webgl/webgl-texture-image-buffer-reuse-expected.html	2018-02-19 11:02:34 UTC (rev 228644)
@@ -0,0 +1,17 @@
+<style>
+   canvas {
+       width: 100px;
+       height: 100px;
+       border: 1px solid green;
+   }
+</style>
+<body>
+    <p>Ensure if an image buffer is reused for a webgl texture, it will be cleared before drawing.</p>
+    <canvas width="100" height="100"/>
+    <script>
+        const canvas = document.querySelector('canvas');
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = 'green';
+        ctx.fillRect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
+    </script>
+</body>

Added: releases/WebKitGTK/webkit-2.20/LayoutTests/webgl/webgl-texture-image-buffer-reuse.html (0 => 228644)


--- releases/WebKitGTK/webkit-2.20/LayoutTests/webgl/webgl-texture-image-buffer-reuse.html	                        (rev 0)
+++ releases/WebKitGTK/webkit-2.20/LayoutTests/webgl/webgl-texture-image-buffer-reuse.html	2018-02-19 11:02:34 UTC (rev 228644)
@@ -0,0 +1,112 @@
+<style>
+    canvas {
+        width: 100px;
+        height: 100px;
+        border: 1px green solid;
+    }    
+</style>
+<body>
+    <p>Ensure if an image buffer is reused for a webgl texture, it will be cleared before drawing.</p>
+    <canvas width="100" height="100"></canvas>
+    <script>
+        (function() {
+            const canvas = document.querySelector('canvas');
+            const gl = canvas.getContext("webgl");
+            const program = createProgram(gl);
+            gl.useProgram(program);
+
+            createTextureBuffer(program, gl, new Float32Array([ 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), "a_texCoord");
+
+            const images = [
+                'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect width="100%" height="100%" fill="green"/></svg>',
+                'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect x="25%" y="25%" width="50%" height="50%" fill="green"/></svg>',
+            ];
+
+            const promises = [];
+            for (var index = 0; index < images.length; ++index)
+                promises.push(drawTexture(program, gl, images[index]));
+
+            if (window.testRunner) {
+                testRunner.waitUntilDone();
+                Promise.all(promises).then(() => {
+                    testRunner.notifyDone();
+                });
+            }
+        })();
+
+        function createProgram(gl) {
+            const vsSource = `
+                attribute vec4 a_position;
+                uniform vec2 u_resolution;
+                attribute vec2 a_texCoord;
+                varying vec2 v_texCoord;
+
+                void main() {
+                    gl_Position = a_position;
+                    v_texCoord = a_texCoord;
+                }
+            `;
+
+            const fsSource = `
+                precision mediump float;
+
+                uniform sampler2D u_sampler;
+                varying vec2 v_texCoord;
+
+                void main() {
+                    gl_FragColor = texture2D(u_sampler, v_texCoord);
+                } 
+            `;
+
+            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+            const program = gl.createProgram();
+            gl.attachShader(program, vertexShader);
+            gl.attachShader(program, fragmentShader);
+            gl.linkProgram(program);
+            return program;
+        }
+
+        function loadShader(gl, type, source) {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            return shader;
+        }
+
+        function drawTexture(program, gl, url) {
+            return loadTexture(gl, url).then(function() {
+                createTextureBuffer(program, gl, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), "a_position");
+                gl.drawArrays(gl.TRIANGLES, 0, 6);
+            });
+        }
+
+        function loadTexture(gl, url) {
+            return new Promise((resolve) => {
+                const image = new Image();
+                image._onload_ = function() {
+                    const texture = gl.createTexture();
+                    gl.bindTexture(gl.TEXTURE_2D, texture);
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                    resolve();
+                };
+                image.src = ""
+            });
+        }
+
+        function createTextureBuffer(program, gl, bufferData, positionAttribute) {
+            const buffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
+
+            const positionLocation = gl.getAttribLocation(program, positionAttribute);
+            gl.enableVertexAttribArray(positionLocation);
+            gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+        }
+    </script>
+</body>

Modified: releases/WebKitGTK/webkit-2.20/Source/WebCore/ChangeLog (228643 => 228644)


--- releases/WebKitGTK/webkit-2.20/Source/WebCore/ChangeLog	2018-02-19 11:02:28 UTC (rev 228643)
+++ releases/WebKitGTK/webkit-2.20/Source/WebCore/ChangeLog	2018-02-19 11:02:34 UTC (rev 228644)
@@ -1,3 +1,18 @@
+2018-02-06  Said Abou-Hallawa  <sabouhall...@apple.com>
+
+        Rendering SVG images with same size as WebGL texture doesn't work correctly
+        https://bugs.webkit.org/show_bug.cgi?id=182367
+
+        Reviewed by Dean Jackson.
+
+        If am image buffer is created for a webgl texture and then it is reused 
+        for another texture, it has to be cleared before drawing.
+
+        Test: webgl/webgl-texture-image-buffer-reuse.html
+
+        * html/canvas/WebGLRenderingContextBase.cpp:
+        (WebCore::WebGLRenderingContextBase::LRUImageBufferCache::imageBuffer):
+
 2018-02-07  Ross Kirsling  <ross.kirsl...@sony.com>
 
         Add missing #if ENABLE(VIDEO_TRACK) after r228201.

Modified: releases/WebKitGTK/webkit-2.20/Source/WebCore/html/canvas/WebGLRenderingContextBase.cpp (228643 => 228644)


--- releases/WebKitGTK/webkit-2.20/Source/WebCore/html/canvas/WebGLRenderingContextBase.cpp	2018-02-19 11:02:28 UTC (rev 228643)
+++ releases/WebKitGTK/webkit-2.20/Source/WebCore/html/canvas/WebGLRenderingContextBase.cpp	2018-02-19 11:02:34 UTC (rev 228644)
@@ -5922,6 +5922,7 @@
         if (buf->logicalSize() != size)
             continue;
         bubbleToFront(i);
+        buf->context().clearRect(FloatRect({ }, FloatSize(size)));
         return buf;
     }
 
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to