| <!DOCTYPE html> |
| <style> |
| #old-container { |
| position: relative; |
| } |
| |
| #positioned-child { |
| position: absolute; |
| } |
| |
| #descendant-needing-layout { |
| display: none; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| This test verifies adding transform to a block correctly update container status. |
| <div id="old-container"> |
| <div id="new-container"> |
| <div id="positioned-child"> |
| <div id="descendant-needing-layout"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| function runTest() { |
| document.body.offsetTop; |
| |
| var newContainer = document.getElementById("new-container"); |
| var descendantNeedingLayout = document.getElementById("descendant-needing-layout"); |
| |
| newContainer.style.transform = "translateX(0)"; |
| descendantNeedingLayout.style.display = "block"; |
| } |
| |
| runTest(); |
| </script> |