scrollIntoView-nearest-visible-element.html (1386B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>scrollIntoView nearest shouldn't scroll a completely visible element</title> 5 <link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#determine-the-scroll-into-view-position"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 11 <style> 12 #container { 13 width: 300px; 14 height: 300px; 15 overflow: scroll; 16 } 17 18 #target { 19 width: 100px; 20 height: 100px; 21 position: relative; 22 top: 600px; 23 left: 800px; 24 background-color: aqua; 25 } 26 27 #overflowing { 28 width: 3000px; 29 height: 3000px; 30 } 31 </style> 32 33 <div id="container"> 34 <div id="target"> 35 </div> 36 <div id="overflowing"></div> 37 </div> 38 39 <script> 40 test(function() { 41 container.scrollTop = 500; 42 container.scrollLeft = 700; 43 let initial_target_rect = target.getBoundingClientRect(); 44 target.scrollIntoView({block: 'nearest', inline: 'nearest'}); 45 46 let final_target_rect = target.getBoundingClientRect(); 47 assert_equals(initial_target_rect.x, final_target_rect.x, 'Target x position remain unchanged'); 48 assert_equals(initial_target_rect.y, final_target_rect.y, 'Target y position remain unchanged'); 49 }, "scrollIntoView with `nearest` block and inline option shouldn't scroll a completely visible element"); 50 </script> 51 </html>