src/third_party/WebKit/LayoutTests/compositing/filters/sw-nested-shadow-overlaps-hw-nested-shadow.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4     <title>
   5         This test verifies that a software layer will be promoted to a composited layer
   6         if its nested drop shadow intersects a composited layer's nested drop shadow.
   7     </title>
   8     <!-- If the test passes, the light green drop shadow should appear over the the gray drop shadow where they intersect. -->
   9     <style>
  10         #software-parent {
  11             background-color: green;
  12             -webkit-filter: drop-shadow(25px 25px 0 lightgreen);
  13
  14             position: absolute;
  15             top: 0;
  16             left: 0;
  17             width: 100px;
  18             height: 100px;
  19         }
  20         #software-child {
  21             background-color: blue;
  22             -webkit-filter: drop-shadow(50px 50px 0 lightblue);
  23
  24             position: absolute;
  25             top: 100px;
  26             left: 100px;
  27             width: 50px;
  28             height: 50px;
  29         }
  30         #composited-parent {
  31             background-color: black;
  32             -webkit-filter: drop-shadow(-25px -25px 0 gray);
  33
  34             position: absolute;
  35             top: 330px;
  36             left: 330px;
  37             width: 100px;
  38             height: 100px;
  39             transform: translate3d(0, 0, 0);
  40         }
  41         #composited-child {
  42             background-color: blue;
  43             -webkit-filter: drop-shadow(-50px -50px 0 lightblue);
  44
  45             position: absolute;
  46             top: -50px;
  47             left: -50px;
  48             width: 50px;
  49             height: 50px;
  50         }
  51     </style>
  52 </head>
  53 <body>
  54     <div id="composited-parent">
  55         <div id="composited-child"></div>
  56     </div>
  57     <div id="software-parent">
  58         <div id="software-child"></div>
  59     </div>
  60     <pre id="console"></pre>
  61     <script>
  62         if (window.testRunner) {
  63             testRunner.dumpAsText();
  64             document.getElementById("console").appendChild(document.createTextNode(window.internals.layerTreeAsText(document)));
  65         }
  66     </script>
  67 </body>
  68 </html>