src/third_party/WebKit/LayoutTests/compositing/contents-opaque/background-color.html

   1 <html>
   2     <head>
   3         <style type="text/css">
   4             .box {
   5                 width: 100px;
   6                 height: 100px;
   7             }
   8             .opaque {
   9                 background-color: green;
  10             }
  11             .translucent {
  12                 background-color: rgba(0, 255, 0, 0.5);
  13             }
  14             .composited {
  15                 transform: translateZ(0);
  16             }
  17         </style>
  18         <script type="text/javascript">
  19             if (window.testRunner)
  20                 testRunner.dumpAsText();
  21
  22             function doTest() {
  23                 if (window.testRunner && window.internals)
  24                     document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
  25             }
  26             window.addEventListener('load', doTest, false);
  27         </script>
  28     </head>
  29     <body>
  30         <!-- Box with transparent background. -->
  31         <!-- GraphicsLayer::contentsOpaque for this box should be false. -->
  32         <div class="box composited"></div>
  33         <!-- Box with translucent background color. -->
  34         <!-- GraphicsLayer::contentsOpaque for this box should be false. -->
  35         <div class="box translucent composited"></div>
  36         <!-- Box with opaque background color. -->
  37         <!-- GraphicsLayer::contentsOpaque for this box should be true. -->
  38         <div class="box opaque composited"></div>
  39
  40         <pre id="layertree"></pre>
  41     </body>
  42 </html>