src/third_party/WebKit/LayoutTests/css3/filters/composited-layer-promotion-after-outset-overlap-change-using-sw-shadow.html

   1 <html>
   2 <head>
   3     <!--
   4         This test verifies that software layers are promoted to composited layers when their filter
   5         outsets change to overlap a hardware layer.
   6
   7         If the test passes, the green drop-shadow of the black layer should appear over the blue
   8         composited layer.
   9
  10         Note: Safari will paint the filter in software because drop-shadow is not the last filter in
  11         the chain.
  12     -->
  13     <style>
  14         #software-layer-to-promote {
  15             background-color: black;
  16             position: absolute;
  17             top: 100px;
  18             left: 100px;
  19             width: 100px;
  20             height: 100px;
  21         }
  22         .initial-drop-shadow {
  23             /* Safari paints filters in software when drop-shadow is not the last filter in the chain. */
  24             -webkit-filter: drop-shadow(10px 10px 0px green) grayscale(0.5);
  25         }
  26         .final-drop-shadow {
  27             -webkit-filter: drop-shadow(100px 100px 0px green) grayscale(0.5);
  28         }
  29         #composited-layer-to-overlap {
  30             background-color: blue;
  31             transform: translateZ(0);
  32             position: absolute;
  33             top: 250px;
  34             left: 250px;
  35             width: 100px;
  36             height: 100px;
  37         }
  38     </style>
  39     <script>
  40         if (window.testRunner)
  41             testRunner.waitUntilDone();
  42
  43         function appendLayerTreeTextToConsole()
  44         {
  45             if (!window.testRunner || !window.internals)
  46                 return;
  47
  48             var layerTreeText = window.internals.layerTreeAsText(document);
  49             document.getElementById("console").appendChild(document.createTextNode(layerTreeText));
  50         }
  51
  52         function runTest()
  53         {
  54             // Dump the layer tree with the initial drop shadow, which does not overlap the composited layer.
  55             appendLayerTreeTextToConsole();
  56
  57             // Force a software-painted drop shadow on Safari.
  58             var targetElement = document.getElementById("software-layer-to-promote");
  59             targetElement.className = "final-drop-shadow";
  60             appendLayerTreeTextToConsole();
  61
  62             // Dump the layer tree again with the final drop shadow, which overlaps the composited layer.
  63             if (window.testRunner) {
  64                 testRunner.dumpAsText();
  65                 testRunner.notifyDone();
  66             }
  67         }
  68     </script>
  69 </head>
  70 <body onload="runTest()">
  71     <div id="composited-layer-to-overlap"></div>
  72     <div id="software-layer-to-promote" class="initial-drop-shadow"></div>
  73     <pre id="console"></pre>
  74 </body>
  75 </html>