scrollIntoView-align-scrollport-covering-child.html (1814B)
1 <!doctype html> 2 <title>CSSOM View - scrollIntoView aligns scrollport-covering child in both inline and block directions.</title> 3 <meta charset="utf-8"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1497677"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #scroller { 10 width: 200px; 11 height: 200px; 12 background-color: purple; 13 overflow: hidden; 14 position: relative; 15 } 16 #child { 17 width: 400px; 18 height: 400px; 19 background-color: green; 20 position: absolute; 21 left: 0px; 22 top: 0px; 23 } 24 </style> 25 <div id="scroller"> 26 <div id="space" style="height:400%; width: 400%"></div> 27 <div id="child"></div> 28 </div> 29 <script> 30 const scroller = document.getElementById("scroller"); 31 const child = document.getElementById("child"); 32 33 function test_alignment(alignment, start_offset, expected_offset) { 34 scroller.scrollTop = start_offset.top; 35 scroller.scrollLeft = start_offset.left; 36 37 child.scrollIntoView({block: alignment, inline: alignment}); 38 39 assert_equals(scroller.scrollTop, expected_offset.top, 40 `${alignment} sets top`); 41 assert_equals(scroller.scrollLeft, expected_offset.left, 42 `${alignment} sets left`); 43 } 44 45 test(function() { 46 // child, being positioned at (0, 0) and having size 400 x 400 covers the 47 // scrollport at scroll offsets (0,0) and (100, 100). 48 test_alignment("start", {top: 100, left: 100}, {top: 0, left: 0}); 49 test_alignment("center", {top: 0, left: 0}, {top: 100, left: 100}); 50 test_alignment("end", {top: 100, left: 100}, {top: 200, left: 200}); 51 }, "scrollIntoView scrolls scrollport-covering child in both axes"); 52 </script>