third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-has-ancestor-clipping-layer.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5   .content {
   6     isolation: isolate;
   7   }
   8   .content > div {
   9     float: left;
  10     margin: 10px;
  11     width: 100px;
  12     height: 100px;
  13     background-color: green;
  14     overflow: hidden;
  15   }
  16   .content > div > div {
  17     mix-blend-mode: multiply;
  18     width: 300px;
  19     height: 300px;
  20     background-color: red;
  21     transform: rotateX(0deg);
  22   }
  23 </style>
  24 </head>
  25 <body>
  26   <p>Test that mix-blend-mode multiply works for layers that are clipped with overflow hidden.</p>
  27   <p>This test passes if you can see two black squares.</p>
  28   <div class="content">
  29     <div>
  30       <div></div>
  31     </div>
  32     <div style="transform: rotateX(0deg);">
  33       <div></div>
  34     </div>
  35   </div>
  36 </body>
  37 </html>