| <!DOCTYPE html> |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| <script> |
| onload = function() { |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('container-outer').style.width = '600px'; |
| }, true); |
| }; |
| </script> |
| <style> |
| #container-outer { |
| background-color: red; |
| height: 300px; |
| transform: translateX(400%); |
| width: 400px; |
| } |
| #container-inner { |
| background-color: green; |
| height: 300px; |
| left: -400%; |
| position: absolute; |
| width: 100%; |
| } |
| #content { |
| background-color: blue; |
| height: 300px; |
| width: 300px; |
| } |
| </style> |
| Tests paint invalidation on resize of container with percentage-transform (causing change of paint offset, but no change of paint invalidation offset). Passes if there is a blue square and a green square side-by-side. |
| <div style="overflow: hidden; width: 700px; height: 500px"><!-- to avoid scrollbar --> |
| <div id="container-outer"> |
| <div id="container-inner"> |
| <div id="content"></div> |
| </div> |
| </div> |
| </div> |
