third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-composited-reason-children.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 a blending element having accelerated
  28         descendants will get accelerated and its stacking context element
  29         will get accelerated as well-->
  30     <div class="stacking-context" style="background-color:red">
  31       <div class="stacking-context" style="background-color: green">
  32         <div class="blended" style="background-color: blue">
  33           <img class="accelerated" src="resources/reference.png">
  34         </div>
  35       </div>
  36     </div>
  37   </div>
  38   <pre id="layers">Layer tree goes here when testing.</pre>
  39 </body>
  40 </html>