<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        background-color: rgba(0, 0, 0, 1);
      }

      .hidden {
        visibility: hidden;
      }

      .visible {
        visibility: visible;
      }

      .composited {
        -webkit-transform: translatez(0);
      }
    </style>

    <script>
      if (window.testRunner)
          testRunner.dumpAsText(true);

      function drawCanvas(canvasID, color)
      {
          var theCanvas = document.getElementById(canvasID);
          var canvasContext = theCanvas.getContext("2d");
          canvasContext.fillStyle = color;
          canvasContext.fillRect(0, 0, 150, 150);
      }

      function init()
      {
          drawCanvas("one", "green");
          drawCanvas("two", "red");
          drawCanvas("three", "red");
      }
    </script>
  </head>

  <body onload="init()">
    <!-- Tests CSS visibility flag for a composited canvas2D layer. -->
    <!-- Pixel test only. Only the green canvas2d should be visible. The other two should be hidden. -->
    <div><canvas id="one" class="composited visible" width="150" height="150"></canvas></div>
    <div><canvas id="two" class="hidden" width="150" height="150"></canvas></div>
    <div><canvas id="three" class="composited hidden" width="150" height="150"></canvas></div>
  </body>
</html>