| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| #scroller { |
| height: 100px; |
| width: 200px; |
| overflow-y: scroll; |
| } |
| |
| .paddingBefore { |
| height: 150px; |
| } |
| |
| #sticky { |
| height: 50px; |
| position: sticky; |
| top: 20px; |
| } |
| |
| .paddingAfter { |
| height: 500px; |
| } |
| </style> |
| |
| <div id="scroller"> |
| <div class="paddingBefore"></div> |
| <div id="writer"></div> |
| <div id="sticky"></div> |
| <div class="paddingAfter"></div> |
| </div> |
| |
| <script> |
| // These tests currently mimic the behavior of Firefox for the interaction |
| // between scrollIntoView() and position:sticky, where the offset location of |
| // the sticky element is used to determine how far to scroll. This means that |
| // scrollIntoView() may scroll even when the sticky is already 'in view', and |
| // attempts to scroll so that the offset position of the sticky is at the top |
| // of the screen. |
| // |
| // TODO(smcgruer): Update tests once http://crbug.com/664246 is resolved. |
| |
| test(function() { |
| var scroller = document.getElementById('scroller'); |
| var sticky = document.getElementById('sticky'); |
| var writer = document.getElementById('writer'); |
| |
| // Clean the writer. |
| writer.innerHTML = ''; |
| |
| // With no scroll, the sticky element is outside the scroller viewport. |
| scroller.scrollTop = 0; |
| |
| // Deliberately dirty layout to make sure that scrollIntoView() still works. |
| writer.innerHTML = '<div style="height: 50px;"></div>'; |
| |
| sticky.scrollIntoView(); |
| assert_equals(scroller.scrollTop, 200); |
| }, "scrollIntoView should scroll when sticky is not visible"); |
| |
| test(function() { |
| var scroller = document.getElementById('scroller'); |
| var sticky = document.getElementById('sticky'); |
| var writer = document.getElementById('writer'); |
| |
| // Clean the writer. |
| writer.innerHTML = ''; |
| |
| // Scroll so that the sticky element is past the top of the scroller |
| // viewport, and is thus sticking. |
| scroller.scrollTop = 200; |
| |
| // Deliberately dirty layout to make sure that scrollIntoView() still works. |
| writer.innerHTML = '<div style="height: 10px;"></div>'; |
| |
| // See comment above tests for why this shifts by an additional 20 pixels. |
| sticky.scrollIntoView(); |
| assert_equals(scroller.scrollTop, 230); |
| }, "scrollIntoView should scroll when sticky is already in view"); |
| |
| test(function() { |
| var scroller = document.getElementById('scroller'); |
| var sticky = document.getElementById('sticky'); |
| var writer = document.getElementById('writer'); |
| |
| // Clean the writer. |
| writer.innerHTML = ''; |
| |
| // With no scroll, the sticky element is outside the scroller viewport. |
| scroller.scrollTop = 0; |
| |
| // Deliberately dirty layout to make sure that scrollIntoViewIfNeeded() |
| // still works. |
| writer.innerHTML = '<div style="height: 70px;"></div>'; |
| |
| sticky.scrollIntoViewIfNeeded(); |
| assert_equals(scroller.scrollTop, 195); |
| }, "scrollIntoViewIfNeeded should scroll when sticky is not visible"); |
| |
| test(function() { |
| var scroller = document.getElementById('scroller'); |
| var sticky = document.getElementById('sticky'); |
| var writer = document.getElementById('writer'); |
| |
| // Clean the writer. |
| writer.innerHTML = ''; |
| |
| // Scroll so that the sticky element is at the top of the scroller viewport. |
| scroller.scrollTop = 150; |
| |
| // Deliberately dirty layout to make sure that scrollIntoViewIfNeeded() |
| // still works. |
| writer.innerHTML = '<div style="height: 20px;"></div>'; |
| |
| // The scroll top moves to 170 due to scroll-anchoring, but should then not |
| // shift if we call scrollIntoViewIfNeeded. |
| assert_equals(scroller.scrollTop, 170); |
| sticky.scrollIntoViewIfNeeded(); |
| assert_equals(scroller.scrollTop, 170); |
| }, "scrollIntoViewIfNeeded should not scroll when sticky is already in view"); |
| </script> |
| |
