| <!DOCTYPE HTML> |
| <head> |
| <link rel="stylesheet" href="../resources/blending-style.css"> |
| <style> |
| div { |
| margin: 20px; |
| width: 60px; |
| height: 60px; |
| } |
| |
| .stacking2 { |
| opacity: 0.99; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(true); |
| </script> |
| <script src="../../../fast/repaint/resources/text-based-repaint.js" type="text/javascript"></script> |
| </head> |
| <!-- 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="runRepaintTest()"> |
| <p>Test if setting blend mode creates isolation.</p> |
| <div class="lime stacking-context"> |
| <div id="first" class="blue"></div> |
| </div> |
| |
| <p>Test if unsetting blend mode removes isolation.</p> |
| <div class="lime stacking-context"> |
| <div id="second" class="blue difference"></div> |
| </div> |
| |
| <p>Test if unsetting a parent's stacking context correctly removes isolation.</p> |
| <div id="third" class="lime stacking-context"> |
| <div class="blue difference"></div> |
| </div> |
| |
| <p>Test if switching a blend mode preserves isolation.</p> |
| <div class="lime stacking-context"> |
| <div id="fourth" class="blue difference"></div> |
| </div> |
| |
| <p>Test if switching the property that causes the parent to create a stacking context preserves isolation.</p> |
| <div id="fifth" class="lime stacking-context"> |
| <div class="blue difference"></div> |
| </div> |
| |
| <p>Test if unsetting a parent's stacking context correctly updates its parent isolation.</p> |
| <div class="lime stacking-context"> |
| <div id="sixth" class="lime stacking-context"> |
| <div class="blue difference"></div> |
| </div> |
| </div> |
| |
| <script> |
| function repaintTest() { |
| document.getElementById('first').className = "blue difference"; |
| document.getElementById('second').className = "blue"; |
| |
| document.getElementById('third').className = "lime"; |
| |
| document.getElementById('fourth').className = "blue screen"; |
| |
| document.getElementById('fifth').className = "lime stacking2"; |
| document.getElementById('sixth').className = "lime"; |
| } |
| </script> |
| </body> |
