getBoundingClientRect-scroll.html (5500B)
1 <!DOCTYPE html> 2 <title>getBoundingClientRect for a element inside scroll container</title> 3 <link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <html> 8 <head> 9 <style> 10 body { 11 margin: 0; 12 } 13 .scroll_container { 14 width: 300px; 15 height: 300px; 16 overflow: scroll; 17 scrollbar-width: none; 18 } 19 .dummy_overflowing_box { 20 width: 5000px; 21 height: 5000px; 22 } 23 .target_box { 24 width: 100px; 25 height: 100px; 26 background-color: green; 27 } 28 .display_none { 29 display: none; 30 } 31 .display_content { 32 display: content; 33 } 34 .position_absolute { 35 position: absolute; 36 } 37 .position_fixed { 38 position: fixed; 39 } 40 .absolute_containing_block { 41 position: relative; 42 } 43 .fixed_containing_block { 44 will-change: transform; 45 } 46 </style> 47 </head> 48 <body> 49 <div class="scroll_container fixed_containing_block"> 50 <div class="scroll_container absolute_containing_block"> 51 <div id="target_scroll_container" class="scroll_container"> 52 <div id="target_fixed" class="target_box position_fixed"></div> 53 <div id="target_absolute" class="target_box position_absolute"></div> 54 <div id="target_none" class="target_box display_none"></div> 55 <div id="target_content" class="target_box display_content"> 56 <div id="target_static" class="target_box"></div> 57 </div> 58 <div class="dummy_overflowing_box"></div> 59 </div> 60 <div class="dummy_overflowing_box"></div> 61 </div> 62 <div class="dummy_overflowing_box"></div> 63 </div> 64 <div id="log"></div> 65 <script> 66 setup(() => { 67 var offset_left = 1; 68 var offset_top = 2; 69 for (scroll_container of document.getElementsByClassName('scroll_container')) { 70 scroll_container.scrollTo(offset_left, offset_top) 71 offset_left *= 4; 72 offset_top *= 4; 73 } 74 }); 75 test(function() { 76 var target = document.querySelector('#target_static'); 77 let staticRect = target.getBoundingClientRect(); 78 assert_equals(staticRect.left, -21, 'static positioned target left'); 79 assert_equals(staticRect.top, -42, 'static positioned target top'); 80 assert_equals(staticRect.width, 100, 'static positioned target width'); 81 assert_equals(staticRect.height, 100, 'static positioned target height'); 82 }, "getBoundingClientRect for element inside scroll container"); 83 84 test(function() { 85 var target = document.querySelector('#target_absolute'); 86 let absoluteRect = target.getBoundingClientRect(); 87 assert_equals(absoluteRect.left, -5, 'absolute positioned target left'); 88 assert_equals(absoluteRect.top, -10, 'absolute positioned target top'); 89 assert_equals(absoluteRect.width, 100, 'absolute positioned target width'); 90 assert_equals(absoluteRect.height, 100, 'absolute positioned target height'); 91 }, "getBoundingClientRect for absolute element inside scroll container"); 92 93 test(function() { 94 var target = document.querySelector('#target_fixed'); 95 let fixedRect = target.getBoundingClientRect(); 96 assert_equals(fixedRect.left, -1, 'fixed positioned target left'); 97 assert_equals(fixedRect.top, -2, 'fixed positioned target top'); 98 assert_equals(fixedRect.width, 100, 'fixed positioned target width'); 99 assert_equals(fixedRect.height, 100, 'fixed positioned target height'); 100 }, "getBoundingClientRect for fixed element inside scroll container"); 101 102 test(function() { 103 var target = document.querySelector('#target_scroll_container'); 104 let staticRect = target.getBoundingClientRect(); 105 assert_equals(staticRect.left, -5, 'scroll container target left'); 106 assert_equals(staticRect.top, -10, 'scroll container target top'); 107 assert_equals(staticRect.width, 300, 'scroll container target width'); 108 assert_equals(staticRect.height, 300, 'scroll container target height'); 109 }, "getBoundingClientRect for a scrolled scroll container"); 110 111 test(function() { 112 var target = document.querySelector('#target_none'); 113 let staticRect = target.getBoundingClientRect(); 114 assert_equals(staticRect.left, 0, 'scroll container target left'); 115 assert_equals(staticRect.top, 0, 'scroll container target top'); 116 assert_equals(staticRect.width, 0, 'scroll container target width'); 117 assert_equals(staticRect.height, 0, 'scroll container target height'); 118 }, "getBoundingClientRect for a scrolled display none box"); 119 120 test(function() { 121 var target = document.querySelector('#target_content'); 122 let staticRect = target.getBoundingClientRect(); 123 assert_equals(staticRect.left, -21, 'static positioned target left'); 124 assert_equals(staticRect.top, -42, 'static positioned target top'); 125 assert_equals(staticRect.width, 100, 'static positioned target width'); 126 assert_equals(staticRect.height, 100, 'static positioned target height'); 127 }, "getBoundingClientRect for a scrolled display content box"); 128 </script> 129 </body> 130 </html>