scrollintoview-containingblock-chain.html (1848B)
1 <!DOCTYPE html> 2 <title>scrollIntoView should only adjust scrollers in the containing block chain</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 4 <style> 5 .scroller { 6 width: 300px; 7 height: 300px; 8 overflow: scroll; 9 } 10 11 .contents { 12 width: 200%; 13 height: 300%; 14 } 15 16 #inner.scroller { 17 position: absolute; 18 margin-top: 250px; 19 margin-left: 100px; 20 width: 400px 21 } 22 23 #reveal { 24 margin-top: 400px; 25 background-color: blue; 26 } 27 </style> 28 <div id="container"> 29 <div id="outer" class="scroller"> 30 <div class="contents"> 31 This should not scroll 32 <div id="inner" class="inner scroller"> 33 <div class="contents"> 34 contents 35 <div id="reveal"> 36 Reveal me 37 </div> 38 </div> 39 </div> 40 </div> 41 </div> 42 </div> 43 <script src="/resources/testharness.js"></script> 44 <script src="/resources/testharnessreport.js"></script> 45 <script> 46 add_completion_callback(() => document.getElementById("container").remove()); 47 48 test(t => { 49 var reveal = document.getElementById('reveal'); 50 51 var outerScroller = document.getElementById('outer'); 52 var innerScroller = document.getElementById('inner'); 53 var initialOuterTop = outerScroller.scrollTop; 54 var initialInnerTop = innerScroller.scrollTop; 55 56 assert_equals(initialOuterTop, 0); 57 assert_equals(initialInnerTop, 0); 58 59 reveal.scrollIntoView({block: "start", inline: "start"}); 60 61 assert_approx_equals(innerScroller.scrollTop, 418, 4); 62 assert_equals(outerScroller.scrollTop, 0); 63 }, "scrollIntoView should not scroll ancestor overflow:scroll elements that are not containing block ancestors"); 64 </script>