| <!DOCTYPE html> | |
| <link rel="author" href="mailto:atotic@google.com"> | |
| <script src="/resources/testharness.js"></script> | |
| <script src="/resources/testharnessreport.js"></script> | |
| <link rel="help" href="https://crbug.com/970166"> | |
| <meta name="assert" content="simplified layout calculates correct abspos position with floats"> | |
| <style> | |
| #container { | |
| position: relative; | |
| background: gray; | |
| } | |
| #container::after { | |
| content: ''; | |
| display: table; | |
| clear:both; | |
| } | |
| #target { | |
| position: absolute; | |
| right: 0; | |
| background: green; | |
| } | |
| </style> | |
| <div id="container"> | |
| <div style="float:left">floatleft</div> | |
| <div id="target"> | |
| <div>text</div> | |
| <div id="toggle">toggle</div> | |
| </div> | |
| </div> | |
| <script> | |
| test(() => { | |
| document.body.offsetTop; | |
| let el = document.querySelector("#toggle"); | |
| el.style.display = "none"; | |
| document.body.offsetTop; | |
| assert_equals(document.querySelector("#target").offsetTop, 0); | |
| }, '#target position is recalculated correctly.'); | |
| </script> |