third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-isolation-remove.html

   1 <html>
   2 <head>
   3 <script>
   4   if (window.testRunner) {
   5     window.testRunner.dumpAsText();
   6     window.testRunner.waitUntilDone();
   7   }
   8
   9   function done() {
  10     if (window.testRunner)
  11       window.testRunner.notifyDone();
  12   }
  13
  14   function dumpTreeAsText() {
  15     if (!window.internals)
  16       return;
  17     document.getElementById('layers').textContent =
  18         window.internals.layerTreeAsText(document);
  19     document.getElementById('test').style.display = 'none';
  20     done();
  21   }
  22
  23   function removeStackingContext() {
  24     var intermediary = document.getElementById("intermediary");
  25     intermediary.setAttribute("class", "accelerated-no-stacking-context");
  26     if (window.testRunner)
  27       window.setTimeout(dumpTreeAsText, 0);
  28   }
  29
  30   window.addEventListener('load', function () {
  31     window.setTimeout(removeStackingContext, 100);
  32   }, false);
  33 </script>
  34 <style>
  35 .accelerated,
  36 .accelerated-stacking-context {
  37   transform: rotateX(0deg);
  38 }
  39 .accelerated-no-stacking-context {
  40   -webkit-backface-visibility: hidden;
  41 }
  42 .blended {
  43   mix-blend-mode: multiply;
  44 }
  45 </style>
  46 </head>
  47 <body>
  48   <div id="test">
  49     <!--This test checks that isolation property is removed when the element
  50         no longer requires stacking context and it remains accelerated. -->
  51     <div class="accelerated-stacking-context" style="background-color: blue;">
  52       <div id="intermediary" class="accelerated-stacking-context"
  53           style="background-color: green; height: 90px;">
  54         <img class="accelerated blended" src="resources/reference.png">
  55       </div>
  56     </div>
  57   </div>
  58   <pre id="layers">Layer tree goes here when testing.</pre>
  59 </body>
  60 </html>