| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 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> | 
| OLD | NEW | 
|---|