third_party/WebKit/LayoutTests/css3/blending/mix-blend-mode-with-opacity-change-js.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5   .container {
   6     width: 100px;
   7     height: 100px;
   8     background-color: green;
   9   }
  10   .parent {
  11     width: 90px;
  12     height: 90px;
  13     isolation: isolate;
  14     border: 5px solid red;
  15   }
  16   #child {
  17     width: 100px;
  18     height: 100px;
  19     background-color: blue;
  20     margin: -5px;
  21     opacity: 0.99;
  22   }
  23 </style>
  24 <script>
  25   function applyBlendMode() {
  26     document.getElementById("child").style["mix-blend-mode"] = "multiply";
  27   }
  28 </script>
  29 </head>
  30 <body onload="applyBlendMode()">
  31   <p>Test that mix-blend-mode multiply set from javascript on an element<br />
  32   having opacity uses the backdrop limited to its stacking context.</p>
  33   <p>This test passes if you can see a blue square with black border.</p>
  34   <div class="container">
  35     <div class="parent">
  36       <div id="child"></div>
  37     </div>
  38   </div>
  39 </body>
  40 </html>