| <!-- Based on fast/repaint/mix-blend-mode-separate-stacking-context.html --> |
| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <style> |
| div { |
| margin: 20px; |
| width: 60px; |
| height: 60px; |
| float: left; |
| } |
| </style> |
| <script src="resources/paint-invalidation-test.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="runPaintInvalidationTest()"> |
| <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> |
| window.expectedPaintInvalidationObjects = [ |
| "LayoutBlockFlow (floating) DIV id='second'", |
| "LayoutBlockFlow (relative positioned) (floating) DIV", |
| "LayoutBlockFlow (floating) DIV id='first'", |
| "LayoutBlockFlow (relative positioned) (floating) DIV", |
| "LayoutBlockFlow (floating) DIV id='second'", |
| "LayoutBlockFlow (floating) DIV id='third'", |
| "LayoutBlockFlow (relative positioned) (floating) DIV id='fourth'", |
| "LayoutBlockFlow (floating) DIV", |
| ]; |
| function paintInvalidationTest() { |
| 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> |
