| <!DOCTYPE HTML> |
| <style> |
| body { |
| margin: 0px; |
| padding: 0px; |
| } |
| |
| div.test { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| position: absolute; |
| top: 300px; |
| bottom: 10px; |
| } |
| |
| div.test .child { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| <script src="../../../resources/check-layout.js"></script> |
| <p>crbug.com/577480: Position centred content of flexboxes correctly after a style change.</p> |
| <div style="height: 600px; position: relative;"> |
| <div class="test" id="test"> |
| <div class="child" id="child" data-offset-y=240></div> |
| </div> |
| </div> |
| <div id="console"></div> |
| <script> |
| var test = document.getElementById('test'); |
| document.body.offsetTop; |
| test.style.top = '10px'; |
| checkLayout("#child", document.getElementById("console")); |
| </script> |
