src/third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-2nd-stacking-context-composited.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   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 mix-blend-mode property doesn't make
  28         the element or its stacking context to be accelerated-->
  29     <div class="accelerated stacking-context" style="background-color:red">
  30       <div class="stacking-context" style="background-color: green">
  31         <img class="blended" src="resources/reference.png">
  32       </div>
  33     </div>
  34   </div>
  35   <pre id="layers">Layer tree goes here when testing.</pre>
  36 </body>
  37 </html>