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

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