| <!DOCTYPE HTML> |
| <!-- Test that an element having mix-blend-mode applied blends only with the contents of the parent stacking context.--> |
| |
| <link rel="stylesheet" href="resources/blending-style.css"> |
| <style> |
| body { |
| background: blue; |
| } |
| |
| div { |
| margin: 20px; |
| width: 60px; |
| height: 60px; |
| } |
| |
| .parent { |
| position: relative; |
| z-index: 0; |
| float: left; |
| background: violet; |
| } |
| |
| .child { |
| background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green; |
| mix-blend-mode: multiply; |
| } |
| </style> |
| |
| <div class="parent"><div class="child"></div></div> |
| <div class="parent composited"><div class="child"></div></div> |
| <div class="parent"><div class="child composited"></div></div> |
| <div class="parent composited"><div class="child composited"></div></div> |
