Chromium Code Reviews Chromium Code Reviews
Issue 2647533002:
Force compositing inputs to be clean for getBoundingClientRect (Closed)
| Index: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-position-works-with-scroll-apis.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-position-works-with-scroll-apis.html b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-position-works-with-scroll-apis.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d06245c9552d263b9617da60fef17da2ff8963f8 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-position-works-with-scroll-apis.html |
| @@ -0,0 +1,126 @@ |
| +<!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> |
| +if (window.internals) { |
| + internals.settings.setCSSStickyPositionEnabled(true); |
| +} |
| + |
| +// 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); |
|
flackr
2017/01/25 21:48:18
Shouldn't this be 220 (150px paddingBefore + 70px
smcgruer
2017/01/25 21:50:19
No; scrollIntoViewIfNeeded attempts to center the
flackr
2017/01/25 21:53:27
Ah, thanks for explanation!
|
| +}, "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>'; |
| + |
| + sticky.scrollIntoViewIfNeeded(); |
| + assert_equals(scroller.scrollTop, 170); |
| +}, "scrollIntoViewIfNeeded should not scroll when sticky is already in view"); |
| +</script> |
