| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 |
| 6 .scroller { |
| 7 position: absolute; |
| 8 height: 200px; |
| 9 width: 300px; |
| 10 top: 100px; |
| 11 border: 5px solid #ccc; |
| 12 } |
| 13 .scroller.vert { |
| 14 left: 20px; |
| 15 overflow-y: scroll; |
| 16 } |
| 17 .scroller.horz { |
| 18 left: 350px; |
| 19 overflow-x: scroll; |
| 20 } |
| 21 .scroller::-webkit-scrollbar { |
| 22 width: 20px; |
| 23 height: 20px; |
| 24 background-color: #ccc; |
| 25 } |
| 26 .scroller::-webkit-scrollbar-thumb { |
| 27 background-color: #68c; |
| 28 } |
| 29 .abs { |
| 30 position: absolute; |
| 31 background-color: #ACF7AA; |
| 32 } |
| 33 .vert > .abs { |
| 34 top: 20px; |
| 35 right: 20px; |
| 36 width: 200px; |
| 37 height: 400px; |
| 38 } |
| 39 .horz > .abs { |
| 40 left: 20px; |
| 41 bottom: 20px; |
| 42 width: 400px; |
| 43 height: 100px; |
| 44 } |
| 45 |
| 46 </style> |
| 47 <div class="scroller vert"><div class="abs"></div></div> |
| 48 <div class="scroller horz"><div class="abs"></div></div> |
| 49 <script> |
| 50 |
| 51 var vScroll = document.querySelector(".scroller.vert"); |
| 52 var hScroll = document.querySelector(".scroller.horz"); |
| 53 |
| 54 test((t) => { |
| 55 assert_equals(vScroll.firstChild.offsetLeft, 60); |
| 56 assert_equals(hScroll.firstChild.offsetTop, 60); |
| 57 |
| 58 vScroll.style.overflowY = "hidden"; |
| 59 hScroll.style.overflowX = "hidden"; |
| 60 |
| 61 assert_equals(vScroll.firstChild.offsetLeft, 80); |
| 62 assert_equals(hScroll.firstChild.offsetTop, 80); |
| 63 |
| 64 vScroll.style.overflowY = ""; |
| 65 hScroll.style.overflowX = ""; |
| 66 |
| 67 assert_equals(vScroll.firstChild.offsetLeft, 60); |
| 68 assert_equals(hScroll.firstChild.offsetTop, 60); |
| 69 }, "Relayout abspos child when overflow style changes."); |
| 70 |
| 71 </script> |
| OLD | NEW |