| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <style> |
| div { |
| margin: 20px; |
| width: 60px; |
| height: 60px; |
| float: left; |
| } |
| </style> |
| <!-- Repaint test to ensure that setting a blend mode dynamically triggers this operation |
| only with the contents of the nearest ancestor stacking context. --> |
| <body> |
| <div style="background: green; position: relative; z-index: -1;"> |
| <div id="first" style="mix-blend-mode: multiply; background-color: blue;"></div> |
| </div> |
| <div style="background: green; position: relative; z-index: -1;"> |
| <div id="second" style="mix-blend-mode: normal; background-color: blue;"></div> |
| </div> |
| <div style="background: green; position: relative; z-index: -1;"> |
| <div id="third" style="mix-blend-mode: multiply; background-color: blue;"></div> |
| </div> |
| <div id="fourth" style="background: green; position: relative; z-index: -1"> |
| <div style="mix-blend-mode: hue; background-color: blue;"></div> |
| </div> |
| </body> |
