| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <style> |
| div { |
| margin: 20px; |
| width: 130px; |
| height: 130px; |
| } |
| |
| .parent { |
| background: rgb(55, 55, 55); |
| position: fixed; |
| width: 300px; |
| height: 300px; |
| } |
| |
| .isolator { |
| isolation: isolate; |
| background: violet; |
| } |
| |
| .child { |
| mix-blend-mode: multiply; |
| background: olive; |
| } |
| |
| </style> |
| <!-- Test to ensure that "isolation:isolate" creates a stacking context, thus preventing blending with the parent element. --> |
| <body> |
| <div class="parent"><div class="isolator"><div class="child"></div></div></div> |
| </body> |
| </html> |
