src/third_party/WebKit/LayoutTests/css3/filters/filtered-compositing-descendant.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     body {
   7       overflow: hidden;
   8     }
   9     .box {
  10       width: 100px;
  11       height: 100px;
  12     }
  13     .filtered {
  14       -webkit-filter: saturate(0);
  15       padding: 20px;
  16       border: 2px solid black;
  17     }
  18     .compositing {
  19       transform: translateZ(1px);
  20       background-color: red;
  21     }
  22
  23     pre {
  24       opacity: 0; /* hide in pixel result */
  25     }
  26   </style>
  27   <script>
  28     if (window.testRunner)
  29       testRunner.dumpAsTextWithPixelResults();
  30
  31     window.addEventListener('load', function () {
  32       if (window.testRunner)
  33         document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document);
  34     }, false);
  35   </script>
  36 </head>
  37 <body>
  38   <!-- You should see no red below -->
  39   <div class="filtered box">
  40     <div class="compositing box"></div>
  41   </div>
  42 <pre id="layer-tree">Layer tree goes here in DRT</pre>
  43 </body>
  44 </html>