| <!DOCTYPE html> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| |
| .a { } |
| #f { |
| position: absolute; |
| left: 120px; |
| top: 120px; |
| width: 250px; |
| height: 250px; |
| border: 0; |
| outline: 100px solid #fc8; |
| } |
| |
| </style> |
| <div class="a"></div> |
| <iframe id="f" srcdoc=" |
| <style> |
| body { will-change: transform; } |
| #b { height: 200px; background: blue; } |
| </style> |
| <div id=b></div>"></iframe> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| onload = () => { |
| var a = document.querySelector(".a"); |
| var f = document.querySelector("#f"); |
| var b = f.contentWindow.document.querySelector("#b"); |
| runAfterLayoutAndPaint(() => { |
| |
| // Invalidate main frame lifecycle without affecting compositing. |
| a.className = ""; |
| |
| // Invalidate child frame compositing state. |
| b.style.opacity = "0.2"; |
| |
| }, true); |
| }; |
| |
| </script> |
