src/third_party/WebKit/LayoutTests/css3/compositing/mix-blend-mode-isolation-layer.html

   1 <html>
   2 <head>
   3 <script>
   4   if (window.testRunner) {
   5     testRunner.dumpAsText();
   6     window.addEventListener('load', function () {
   7      document.getElementById('layers').textContent = window.internals.layerTreeAsText(document);
   8      document.getElementById('test').style.display = 'none';
   9     }, false);
  10   }
  11 </script>
  12 <style>
  13 .stacking-context {
  14   position: absolute;
  15   z-index: -1;
  16 }
  17 .accelerated {
  18   -webkit-transform: rotateX(0deg);
  19 }
  20 .blended {
  21   mix-blend-mode: multiply;
  22 }
  23 </style>
  24 </head>
  25 <body>
  26   <div id="test">
  27     <!--This test makes sure that in the layer tree img has blending property
  28         set to multiply and its parent element gets accelerated and
  29         has isolated set to true-->
  30     <div class="stacking-context" style="background-color: green">
  31       <img class="accelerated blended" src="resources/reference.png">
  32     </div>
  33   </div>
  34   <pre id="layers">Layer tree goes here when testing.</pre>
  35 </body>
  36 </html>