third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-isolation-2-stacking-contexts.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 isolation property is set only to
  28         the first ascendant layer being a stacking context -->
  29     <div class="stacking-context" style="background-color:red">
  30       <div class="stacking-context" style="background-color: green">
  31         <img class="accelerated blended" src="resources/reference.png">
  32       </div>
  33     </div>
  34     <div class="accelerated stacking-context" style="background-color:red">
  35       <div class="stacking-context" style="background-color: green">
  36         <img class="accelerated blended" src="resources/reference.png">
  37       </div>
  38     </div>
  39   </div>
  40   <pre id="layers">Layer tree goes here when testing.</pre>
  41 </body>
  42 </html>