third_party/WebKit/LayoutTests/css3/blending/background-blend-mode-overlapping-accelerated-elements.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         width: 160px;
   7         height: 160px;
   8         transform: rotateY(30deg) rotateX(-30deg);
   9         background-blend-mode: difference;
  10         color: black;
  11     }
  12
  13     .a {
  14         background: url('resources/white_square.svg') no-repeat, rgba(55, 55, 99, 1);
  15     }
  16
  17     .b, .c {
  18         width: 120px;
  19         height: 120px;
  20     }
  21
  22     .b {
  23         background: url('resources/white_square.svg') no-repeat, rgba(200, 200, 156, 1);
  24         color: yellow;
  25     }
  26
  27     .c {
  28         background: url('resources/white_square.svg') no-repeat, rgba(100, 100, 56, 1);
  29         color: white;
  30         margin-top: -90px;
  31     }
  32
  33 </style>
  34 </head>
  35 <!-- Test to validate that background blending is working properly for series of hardware accelerated elements. -->
  36 <body>
  37     <!-- Simple test: parent and child, both accelerated, both having background-blend-mode set and some text. The child shouldn't blend with the parent's content. The text should keep its color. -->
  38     <div class="a">sample<div class="b">sample</div></div>
  39
  40     <!-- Parent and two children, all accelerated, all having background-blend-mode set and some text. None of the elements should blend with any of the others. The text should keep its color. -->
  41     <div class="a">sample<div class="b">sample</div>sample<div class="c">sample</div></div>
  42
  43     <!-- Parent and two children, all accelerated, all having background-blend-mode set and some text. The second child has z-index set, causing it to be painted below the first child. None of the elements should blend with any of the others. The text should keep its color. -->
  44     <div class="a">sample
  45         <div class="b">sample</div>
  46         <div class="c" style="position:absolute; z-index: -1">sample sample sample sample sample sample sample sample sample sample sample sample</div>
  47     </div>
  48 </body>