| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| |
| .scroller { |
| position: absolute; |
| height: 200px; |
| width: 300px; |
| top: 100px; |
| border: 5px solid #ccc; |
| } |
| .scroller.vert { |
| left: 20px; |
| overflow-y: scroll; |
| } |
| .scroller.horz { |
| left: 350px; |
| overflow-x: scroll; |
| } |
| .scroller::-webkit-scrollbar { |
| width: 20px; |
| height: 20px; |
| background-color: #ccc; |
| } |
| .scroller::-webkit-scrollbar-thumb { |
| background-color: #68c; |
| } |
| .abs { |
| position: absolute; |
| background-color: #ACF7AA; |
| } |
| .vert > .abs { |
| top: 20px; |
| right: 20px; |
| width: 200px; |
| height: 400px; |
| } |
| .horz > .abs { |
| left: 20px; |
| bottom: 20px; |
| width: 400px; |
| height: 100px; |
| } |
| |
| </style> |
| <div class="scroller vert"><div class="abs"></div></div> |
| <div class="scroller horz"><div class="abs"></div></div> |
| <script> |
| |
| var vScroll = document.querySelector(".scroller.vert"); |
| var hScroll = document.querySelector(".scroller.horz"); |
| |
| test((t) => { |
| assert_equals(vScroll.firstChild.offsetLeft, 60); |
| assert_equals(hScroll.firstChild.offsetTop, 60); |
| |
| vScroll.style.overflowY = "hidden"; |
| hScroll.style.overflowX = "hidden"; |
| |
| assert_equals(vScroll.firstChild.offsetLeft, 80); |
| assert_equals(hScroll.firstChild.offsetTop, 80); |
| |
| vScroll.style.overflowY = ""; |
| hScroll.style.overflowX = ""; |
| |
| assert_equals(vScroll.firstChild.offsetLeft, 60); |
| assert_equals(hScroll.firstChild.offsetTop, 60); |
| }, "Relayout abspos child when overflow style changes."); |
| |
| </script> |
