third_party/WebKit/LayoutTests/css3/blending/isolation-isolate-blended-child.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         margin: 20px;
   7         width: 130px;
   8         height: 130px;
   9     }
  10
  11     .parent {
  12         background: rgb(55, 55, 55);
  13         position: fixed;
  14         width: 300px;
  15         height: 300px;
  16     }
  17
  18     .isolator {
  19         isolation: isolate;
  20         background: violet;
  21     }
  22
  23     .child {
  24         mix-blend-mode: multiply;
  25         background: olive;
  26     }
  27
  28 </style>
  29 <!-- Test to ensure that "isolation:isolate" creates a stacking context, thus preventing blending with the parent element. -->
  30 <body>
  31     <div class="parent"><div class="isolator"><div class="child"></div></div></div>
  32 </body>
  33 </html>