﻿<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL canvas to 2D canvas test</title>
<link rel="stylesheet" href="../../resources/js-test-style.css"/>
<script src="../../js/js-test-pre.js"></script>
<script src="../../js/webgl-test-utils.js"> </script>
<style>
canvas {
    border: 1px solid black;
    margin: 3px;
    display: block;
}
</style>
</head>
<body>
<div id="description"></div>
<div id="console"></div>
<script type="application/javascript">
var wtu = WebGLTestUtils;
var diff;
var consoleElem = document.querySelector('#console');

var main = function() {
  description();

  test({ premultipliedAlpha: true, }, [171, 234, 172, 191], [128, 255, 177, 128]);
  test({ premultipliedAlpha: false, }, [170, 234, 171, 191], [128, 255, 177, 128]);
  test({ alpha: false, }, [127, 255, 178, 255], [128, 255, 178, 255]);
  test({ premultipliedAlpha: false, alpha: false, }, [127, 255, 178, 255], [128, 255, 178, 255]);

  function test(attrs, expected, expected2) {
    debug(`test: ${JSON.stringify(attrs)}`);

    const canvas = document.createElement('canvas');
    canvas.width = 64;
    canvas.height = 64;

    const gl = wtu.create3DContext(canvas, attrs);
    if (!gl) {
      testFailed("can't create 3d context");
      return;
    }
    const alpha = 0.5;
    const effectiveAlpha = attrs.premultipliedAlpha ? alpha : 1.0;
    const color = [0.5, 1.0, 0.7].map(v => v * effectiveAlpha);
    color.push(0.5);
    debug(`clearColor: ${color.join(', ')}`);
    gl.clearColor(...color);
    gl.clear(gl.COLOR_BUFFER_BIT);
    consoleElem.appendChild(canvas);

    const ctx = document.createElement('canvas').getContext('2d');
    ctx.canvas.width = 128;
    ctx.canvas.height = 128;
    ctx.fillStyle = 'rgba(255, 190, 160, 0.5)';
    ctx.fillRect(0, 0, 64, 64);
    ctx.drawImage(canvas, 32, 32);
    consoleElem.appendChild(ctx.canvas);

    wtu.checkCanvasRect(ctx, 33, 33, 1, 1, expected, 'canvas 2d is correct color', 3);
    wtu.checkCanvasRect(ctx, 65, 65, 1, 1, expected2, 'canvas 2d is correct color', 3);
    debug('----------------------------------');
  }
  finishTest();
};
main();
var successfullyParsed = true;
</script>
</body>
</html>

