Rendering SVG images with same size as WebGL texture doesn't work correctly
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Feb 2018 02:51:01 +0000 (02:51 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Feb 2018 02:51:01 +0000 (02:51 +0000)
https://bugs.webkit.org/show_bug.cgi?id=182367

Patch by Said Abou-Hallawa <sabouhallawa@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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@228213 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/webgl/webgl-texture-image-buffer-reuse-expected.html [new file with mode: 0644]
LayoutTests/webgl/webgl-texture-image-buffer-reuse.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/html/canvas/WebGLRenderingContextBase.cpp

index d04b60a..68a815c 100644 (file)
@@ -1,3 +1,13 @@
+2018-02-06  Said Abou-Hallawa  <sabouhallawa@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-06  Matt Lewis  <jlewis3@apple.com>
 
         Marked transitions/transition-display-property.html as flaky.
diff --git a/LayoutTests/webgl/webgl-texture-image-buffer-reuse-expected.html b/LayoutTests/webgl/webgl-texture-image-buffer-reuse-expected.html
new file mode 100644 (file)
index 0000000..aec216a
--- /dev/null
@@ -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>
diff --git a/LayoutTests/webgl/webgl-texture-image-buffer-reuse.html b/LayoutTests/webgl/webgl-texture-image-buffer-reuse.html
new file mode 100644 (file)
index 0000000..f6e43bd
--- /dev/null
@@ -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 = url;
+            });
+        }
+
+        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>
index 2847f0e..c929766 100644 (file)
@@ -1,3 +1,18 @@
+2018-02-06  Said Abou-Hallawa  <sabouhallawa@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-06  Youenn Fablet  <youenn@apple.com>
 
         Use downcast in createLinkPreloadResourceClient
index 8fc871f..61031c4 100644 (file)
@@ -5922,6 +5922,7 @@ ImageBuffer* WebGLRenderingContextBase::LRUImageBufferCache::imageBuffer(const I
         if (buf->logicalSize() != size)
             continue;
         bubbleToFront(i);
+        buf->context().clearRect(FloatRect({ }, FloatSize(size)));
         return buf;
     }