src/third_party/WebKit/LayoutTests/compositing/contents-opaque/filter.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style type="text/css">
   5             body {
   6                 margin: 0;
   7             }
   8             .layer {
   9                 position: absolute;
  10                 top: 0;
  11                 left: 0;
  12             }
  13             .container-box {
  14                 margin: 10px;
  15                 width: 100px;
  16                 height: 100px;
  17                 overflow: hidden;
  18             }
  19             .box {
  20                 width: 100px;
  21                 height: 100px;
  22                 background-color: green;
  23             }
  24             .composited {
  25                 transform: translateZ(0);
  26             }
  27             .filter-blur {
  28                 -webkit-filter: blur(10px);
  29             }
  30             .filter-opacity {
  31                 -webkit-filter: opacity(50%);
  32             }
  33         </style>
  34         <script type="text/javascript">
  35             if (window.testRunner)
  36                 testRunner.dumpAsText();
  37
  38             function doTest() {
  39                 if (window.testRunner && window.internals)
  40                     document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
  41             }
  42             window.addEventListener('load', doTest, false);
  43         </script>
  44     </head>
  45     <body>
  46         <!-- There should be 2 boxes with different shades of green:
  47             Box 1. There should be a white gradient on the margins.
  48             Box 2. Light green box.
  49         -->
  50         <!-- GraphicsLayer::contentsOpaque for these boxes should be false. -->
  51         <div class="composited container-box">
  52             <div class="box filter-blur"></div>
  53         </div>
  54         <div class="composited container-box">
  55             <div class="box filter-opacity"></div>
  56         </div>
  57         <pre id="layertree"></pre>
  58     </body>
  59 </html>