| <!DOCTYPE html> |
| <div id="outer" style="width: 0; height: 0; transform: rotate(5deg) translateX(100px)"> |
| <div id="clip" style="width: 200px; height: 200px; overflow: hidden"> |
| <div id="inner" style="width: 400px; height: 400px; background: blue; transform: translateX(-100px)"> |
| </div> |
| </div> |
| </div> |
| <script src="../../../resources/run-after-layout-and-paint.js"></script> |
| <script> |
| runAfterLayoutAndPaint(function() { |
| // Change both outer and inner transforms, but keep the combined transform |
| // unchanged. We should invalidate because the effective clip changes |
| // between the transforms. |
| outer.style.transform = "rotate(5deg) translateX(200px)"; |
| inner.style.transform = "translateX(-200px)"; |
| }, true); |
| </script> |
