third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-composited-layers.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         width: 10px;
   7         height: 10px;
   8     }
   9 </style>
  10 </head>
  11 <body>
  12
  13 <!-- Mix-blend-mode should not create a composited layer -->
  14 <div style="background-color: green">
  15     <div style="background-color: blue; mix-blend-mode: multiply"></div>
  16 </div>
  17
  18 <!-- Mix-blend-mode should create a composited layer when having composited descendants-->
  19 <div style="background-color: green">
  20     <div style="background-color: blue; mix-blend-mode: multiply">
  21         <div style="background-color: yellow; transform: translatez(0);"></div>
  22     </div>
  23 </div>
  24
  25 <pre id="layers">Layer tree appears here in DRT.</pre>
  26
  27 <script type="text/javascript">
  28     if (window.testRunner) {
  29         window.testRunner.dumpAsText();
  30         document.getElementById('layers').innerHTML = window.internals.layerTreeAsText(document);
  31     }
  32 </script>
  33 </body>
  34 </html>
  35