<!DOCTYPE html>
<html>
  <head>
    <style type="text/css" media="screen">
      body {
        outline: 10px solid transparent; /* affects layer sizes */
      }
      canvas {
        margin: 20px;
        width: 200px;
        height: 200px;
        padding: 0 20px;
      }
    
      .compare {
        margin-left: 40px;
        margin-top: 20px;
        width: 200px;
        height: 200px;
        background-color: rgba(0, 255, 0, 1.0);
      }
    </style>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText(true);

        function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)
        {
            var canvas = document.getElementById(canvasName);
            var gl = canvas.getContext("experimental-webgl", {alpha: false});
            if (!gl) {
                alert("No WebGL context found");
                return null;
            }

            gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
            gl.clearDepth(clearDepth);

            return gl;
        }

        function drawCanvas(canvasID)
        {
          var gl = initWebGL(canvasID, "", "", [], [ 0, 1, 0, 0 ], 1);
          gl.viewport(0, 0, 200, 200);
          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        }

        function init()
        {
          drawCanvas('canvas');
        }
    </script>
  </head>
  <body onload="init()">
   
    <div class="compare"></div>
    <canvas id="canvas" width="200" height="200"></canvas>

    <!-- Top and bottom should look the same. -->
  </body>
</html>