scrollIntoView-scrolling-container.html (1654B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>scrollIntoView on a scroller does not scroll the targeted scroll container</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .scroller { 9 overflow: scroll; 10 position: relative; 11 border: 2px solid black; 12 } 13 #outer { 14 width: 300px; 15 height: 400px; 16 border-color: blue; 17 } 18 #inner { 19 height: 200px; 20 border-color: red; 21 background: lightgreen; 22 /* Scroll padding on the inner scroller makes the scroll into view 23 * position of content within non-zero. */ 24 scroll-padding: 50px; 25 /* Scroll margin is the offset in the outer scroller to preserve. */ 26 scroll-margin: 20px; 27 } 28 .spacer { 29 height: 1000px; 30 } 31 </style> 32 33 <div id="outer" class="scroller"> 34 <div class="spacer"></div> 35 <div id="inner" class="scroller"> 36 <div class="spacer"></div> 37 </div> 38 <div class="spacer"></div> 39 </div> 40 41 <script> 42 promise_test(async t => { 43 const outerScroller = document.getElementById('outer'); 44 const innerScroller = document.getElementById('inner'); 45 46 innerScroller.scrollTop = 200; 47 innerScroller.scrollIntoView(); 48 49 assert_equals(innerScroller.offsetTop - outerScroller.scrollTop, 20, "Should scroll inner scroller to scroll margin offset."); 50 assert_equals(innerScroller.scrollTop, 200, "Inner scroller should not scroll when asked to scroll into view."); 51 }, "scrollIntoView on a scrolling container should scroll its outer scrollers into view but not scroll itself."); 52 </script>