third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-isolated-group-1.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5
   6     body {
   7         background: red;
   8     }
   9
  10     div {
  11         margin: 20px;
  12         width: 60px;
  13         height: 60px;
  14     }
  15
  16     .parent {
  17         opacity: 0.99;
  18         float: left;
  19         background: violet;
  20     }
  21
  22     .child {
  23         background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
  24     }
  25
  26 </style>
  27 <!-- Test to ensure that blending is performed only with the contents of the element's nearest ancestor stacking context.
  28     Test this with a parent element that has opacity set. -->
  29 <body>
  30     <div class="parent">
  31         <div class="child" style="mix-blend-mode: normal;"></div>
  32     </div>
  33     <div class="parent">
  34         <div class="child" style="mix-blend-mode: multiply;"></div>
  35     </div>
  36     <div class="parent">
  37         <div class="child" style="mix-blend-mode: screen;"></div>
  38     </div>
  39     <div class="parent">
  40         <div class="child" style="mix-blend-mode: overlay;"></div>
  41     </div>
  42     <div class="parent">
  43         <div class="child" style="mix-blend-mode: darken;"></div>
  44     </div>
  45     <div class="parent">
  46         <div class="child" style="mix-blend-mode: lighten;"></div>
  47     </div>
  48     <div class="parent">
  49         <div class="child" style="mix-blend-mode: color-dodge;"></div>
  50     </div>
  51     <div class="parent">
  52         <div class="child" style="mix-blend-mode: color-burn;"></div>
  53     </div>
  54     <div class="parent">
  55         <div class="child" style="mix-blend-mode: hard-light;"></div>
  56     </div>
  57     <div class="parent">
  58         <div class="child" style="mix-blend-mode: soft-light;"></div>
  59     </div>
  60     <div class="parent">
  61         <div class="child" style="mix-blend-mode: difference;"></div>
  62     </div>
  63     <div class="parent">
  64         <div class="child" style="mix-blend-mode: exclusion;"></div>
  65     </div>
  66     <div class="parent">
  67         <div class="child" style="mix-blend-mode: hue;"></div>
  68     </div>
  69     <div class="parent">
  70         <div class="child" style="mix-blend-mode: saturation;"></div>
  71     </div>
  72     <div class="parent">
  73         <div class="child" style="mix-blend-mode: color;"></div>
  74     </div>
  75     <div class="parent">
  76         <div class="child" style="mix-blend-mode: luminosity;"></div>
  77     </div>
  78 </body>
  79 </html>