third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-has-ancestor-clipping-layer-expected.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     overflow: hidden;
  14   }
  15   .content > div > div {
  16     mix-blend-mode: multiply;
  17     width: 300px;
  18     height: 300px;
  19     background-color: black;
  20     transform: rotateX(0deg);
  21   }
  22 </style>
  23 </head>
  24 <body>
  25   <p>Test that mix-blend-mode multiply works for layers that are clipped with overflow hidden.</p>
  26   <p>This test passes if you can see two black squares.</p>
  27   <div class="content">
  28     <div>
  29       <div></div>
  30     </div>
  31     <div style="transform: rotateX(0deg);">
  32       <div></div>
  33     </div>
  34   </div>
  35 </body>
  36 </html>