third_party/WebKit/LayoutTests/compositing/visibility/visibility-simple-canvas2d-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       canvas {
   6         background-color: rgba(0, 0, 0, 1);
   7       }
   8
   9       .hidden {
  10         visibility: hidden;
  11       }
  12
  13       .visible {
  14         visibility: visible;
  15       }
  16
  17       .composited {
  18         transform: translatez(0);
  19       }
  20     </style>
  21
  22     <script>
  23       if (window.testRunner)
  24           testRunner.dumpAsTextWithPixelResults();
  25
  26       function drawCanvas(canvasID, color)
  27       {
  28           var theCanvas = document.getElementById(canvasID);
  29           var canvasContext = theCanvas.getContext("2d");
  30           canvasContext.fillStyle = color;
  31           canvasContext.fillRect(0, 0, 150, 150);
  32       }
  33
  34       function init()
  35       {
  36           drawCanvas("one", "green");
  37           drawCanvas("two", "red");
  38           drawCanvas("three", "red");
  39       }
  40     </script>
  41   </head>
  42
  43   <body onload="init()">
  44     <!-- Tests CSS visibility flag for a composited canvas2D layer. -->
  45     <!-- Pixel test only. Only the green canvas2d should be visible. The other two should be hidden. -->
  46     <div><canvas id="one" class="composited visible" width="150" height="150"></canvas></div>
  47     <div><canvas id="two" class="hidden" width="150" height="150"></canvas></div>
  48     <div><canvas id="three" class="composited hidden" width="150" height="150"></canvas></div>
  49   </body>
  50 </html>