1<!DOCTYPE html>
2<html>
3<body>
4<script src="/resources/runner.js"></script>
5<script src="resources/canvas_runner.js"></script>
6<script>
7var canvas2D = document.createElement("canvas");
8var ctx2D = canvas2D.getContext("2d");
9var canvas3D = document.createElement('canvas');
10var gl = canvas3D.getContext('experimental-webgl');
11if (!gl)
12    CanvasRunner.logFatalError("\nWebGL is not supported or enabled on this platform!\n");
13
14function setSize(canvas2DWidth, canvas2DHeight, webglWidth, webglHeight) {
15    canvas2D.width = canvas2DWidth;
16    canvas2D.height = canvas2DHeight;
17    canvas3D.width = webglWidth;
18    canvas3D.height = webglHeight;
19}
20
21function rand(range) {
22    return Math.floor(Math.random() * range);
23}
24
25function renderWebGL(gl) {
26    gl.disable(gl.SCISSOR_TEST);
27    gl.clear(gl.COLOR_BUFER_BIT);
28    gl.enable(gl.SCISSOR_TEST);
29    gl.scissor(rand(1024), rand(1024), rand(1024), rand(1024));
30    gl.clearColor(Math.random(), Math.random(), Math.random(), 1);
31    gl.clear(gl.COLOR_BUFFER_BIT);
32}
33
34function doRun() {
35    // draw static WebGL
36    ctx2D.drawImage(canvas3D, 0, 0);
37}
38
39function ensureComplete() {
40    // Calling getImageData() is just to flush out the content when
41    // accelerated 2D canvas is in use. The cost of reading 1x1 pixels is low.
42    ctx2D.getImageData(0, 0, 1, 1);
43}
44
45window.onload = function () {
46    // It should use setMinimumAccelerated2dCanvasSize() to enable accelerated Canvas for a specified size
47    // but this API is not available in JS or WebPage. Assume the threshold size is 256x257
48    // and the dest canvas is HW accelerated Canvas when setting its size to 1024x1024.
49    setSize(1024, 1024, 1024, 1024);
50    renderWebGL(gl);
51    CanvasRunner.start({
52        description: "This bench test checks the speed on drawing static WebGL(1024x1024) to HW accelerated Canvas2D(1024x1024).",
53        doRun: doRun,
54        ensureComplete: ensureComplete});
55}
56
57</script>
58</body>
59</html>
60