Chromium Code Reviews Chromium Code Reviews
Issue 2495373003:
Match html canvas which is transferred to OffscreenCanvas to CSS style (Closed)
| Index: content/test/data/gpu/pixel_offscreenCanvas_transfer_after_style_resize.html |
| diff --git a/content/test/data/gpu/pixel_offscreenCanvas_transfer_after_style_resize.html b/content/test/data/gpu/pixel_offscreenCanvas_transfer_after_style_resize.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..3c44c496c43d4c2e2a938ef5a0a87ebcdb7153ce |
| --- /dev/null |
| +++ b/content/test/data/gpu/pixel_offscreenCanvas_transfer_after_style_resize.html |
| @@ -0,0 +1,100 @@ |
| +<!DOCTYPE HTML> |
| + |
| +<!-- READ BEFORE UPDATING: |
| +If this test is updated make sure to increment the "revision" value of the |
| +associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure |
| +that the baseline images are regenerated on the next run. |
| +--> |
| + |
| +<html> |
| +<head> |
| +<title>OffscreenCanvas commit with style resize: green rectangle with yellow borderon white background.</title> |
| +<style type="text/css"> |
| +.nomargin { |
| + margin: 0px auto; |
| +} |
| +</style> |
| +<script> |
| +var g_swapsBeforeAck = 15; |
| + |
| +function main() |
| +{ |
| + var canvas = document.getElementById("c"); |
| + window.requestAnimationFrame(function() { |
| + canvas.style.width = '100px'; |
| + canvas.style.height = '200px'; |
| + canvas.style.border = '10px solid yellow'; |
| + window.requestAnimationFrame(function() { |
| + var offscreenCanvas = canvas.transferControlToOffscreen(); |
| + drawTriangle(offscreenCanvas); |
| + }); |
| + }); |
| + waitForFinish(); |
| +} |
| + |
| +function drawTriangle(canvas) |
| +{ |
| + var gl = canvas.getContext("webgl"); |
| + gl.clearColor(0, 1, 0, 1); |
| + gl.clear(gl.COLOR_BUFFER_BIT); |
| + |
| + var prog = gl.createProgram(); |
| + var vs = gl.createShader(gl.VERTEX_SHADER); |
| + gl.shaderSource(vs, ['attribute vec2 pos;', |
| + 'void main() {', |
| + ' gl_Position = vec4(pos, 0., 1.);', |
| + '}'].join('\n')); |
| + gl.compileShader(vs); |
| + if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) { |
| + throw 'failed to compiled shader'; |
| + } |
| + gl.attachShader(prog, vs); |
| + |
| + var fs = gl.createShader(gl.FRAGMENT_SHADER); |
| + gl.shaderSource(fs, ['void main() {', |
| + ' gl_FragColor = vec4(1.);', |
| + '}'].join('\n')); |
| + gl.compileShader(fs); |
| + if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) { |
| + throw 'failed to compiled shader'; |
| + } |
| + gl.attachShader(prog, fs); |
| + |
| + gl.linkProgram(prog); |
| + if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { |
| + throw "Could not link the shader program!"; |
| + } |
| + gl.useProgram(prog); |
| + |
| + gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); |
| + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATIC_DRAW); |
| + var attr = gl.getAttribLocation(prog, 'pos'); |
| + gl.enableVertexAttribArray(attr); |
| + gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0); |
| + |
| + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); |
| + |
| + gl.commit(); |
| +} |
| + |
| +function waitForFinish() |
| +{ |
| + if (g_swapsBeforeAck == 0) { |
| + domAutomationController.setAutomationId(1); |
| + domAutomationController.send("SUCCESS"); |
| + } else { |
| + g_swapsBeforeAck--; |
| + document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; |
| + window.webkitRequestAnimationFrame(waitForFinish); |
|
Justin Novosad
2016/11/18 15:07:27
the "webkit" prefix is obsolete please don't use i
xlai (Olivia)
2016/11/22 16:55:59
Done.
|
| + } |
| +} |
| +</script> |
| +</head> |
| +<body onload="main()"> |
| +<div style="position:relative; width:300px; height:300px; background-color:white"> |
| +</div> |
| +<div id="container" style="position:absolute; top:0px; left:0px"> |
| +<canvas id="c" width="300" height="300" class="nomargin"></canvas> |
| +</div> |
| +</body> |
| +</html> |
