| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <style> |
| div { |
| margin: 20px; |
| width: 60px; |
| height: 60px; |
| float: left; |
| } |
| </style> |
| <script src="resources/text-based-repaint.js" type="text/javascript"></script> |
| <!-- Repaint test to ensure that setting a blend mode dynamically triggers this operation |
| only with the contents of the nearest ancestor stacking context. --> |
| <body onload="runRepaintAndPixelTest()"> |
| <div style="background: green; position: relative; z-index: -1;"> |
| <div id="first" style="mix-blend-mode: normal; background-color: blue;"></div> |
| </div> |
| <div style="background: green; position: relative; z-index: -1;"> |
| <div id="second" style="mix-blend-mode: hue; background-color: blue;"></div> |
| </div> |
| <div style="background: green; position: relative; z-index: -1;"> |
| <div id="third" style="mix-blend-mode: hue; background-color: blue;"></div> |
| </div> |
| <div id="fourth" style="background: green;"> |
| <div style="mix-blend-mode: hue; background-color: blue;"></div> |
| </div> |
| |
| <script> |
| function repaintTest() { |
| document.getElementById('first').style.mixBlendMode = "multiply"; |
| document.getElementById('second').style.mixBlendMode = "normal"; |
| document.getElementById('third').style.mixBlendMode = "multiply"; |
| document.getElementById('fourth').style.position = "relative"; |
| document.getElementById('fourth').style.zIndex = -1; |
| } |
| </script> |
| </body> |
