inline-client-rect.html (2732B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/intersection-observer-test-utils.js"></script> 6 7 <style> 8 pre, #log { 9 position: absolute; 10 top: 120px; 11 left: 0; 12 } 13 #scroller { 14 width: 250px; 15 overflow: auto; 16 } 17 #overflow { 18 width: 1000px; 19 } 20 .content { 21 width: 100px; 22 height: 20px; 23 padding: 40px 0; 24 text-align: center; 25 background-color: grey; 26 display: inline-block; 27 } 28 </style> 29 30 <div id="scroller"> 31 <div id="overflow"> 32 <span><div class="content">1</div></span> 33 <span><div class="content">2</div></span> 34 <span><div class="content">3</div></span> 35 <span id="target"><div class="content">4</div></span> 36 <span><div class="content">5</div></span> 37 </div> 38 </div> 39 40 <script> 41 var vw = document.documentElement.clientWidth; 42 var vh = document.documentElement.clientHeight; 43 44 var entries = []; 45 var scroller, target, spaceWidth, targetOffsetLeft, targetOffsetTop; 46 47 runTestCycle(function() { 48 scroller = document.getElementById("scroller"); 49 assert_true(!!scroller, "scroller exists"); 50 target = document.getElementById("target"); 51 assert_true(!!target, "target exists"); 52 var observer = new IntersectionObserver(function(changes) { 53 entries = entries.concat(changes) 54 }); 55 observer.observe(target); 56 entries = entries.concat(observer.takeRecords()); 57 assert_equals(entries.length, 0, "No initial notifications."); 58 runTestCycle(step0, "First rAF"); 59 }, "Inline target"); 60 61 function step0() { 62 // Measure space width between two adjacent inlines. 63 let nextEl = target.nextElementSibling; 64 spaceWidth = nextEl.offsetLeft - target.offsetLeft - target.offsetWidth; 65 // 8px body margin + 3 preceding siblings @ (100px width + spaceWidth) each 66 targetOffsetLeft = 8 + 300 + (spaceWidth * 3); 67 // 8px body margin + 40px top padding 68 targetOffsetTop = 48; 69 let left = targetOffsetLeft; 70 let right = left + 100; 71 let top = targetOffsetTop; 72 let bottom = top + target.offsetHeight; 73 74 scroller.scrollLeft = 90; 75 runTestCycle(step1, "scroller.scrollLeft = 90"); 76 77 checkLastEntry(entries, 0, [left, right, top, bottom, 78 0, 0, 0, 0, 0, vw, 0, vh, false]); 79 } 80 81 function step1() { 82 // -90px for scroll offset 83 let left = targetOffsetLeft - 90; 84 let right = left + 100; 85 let top = targetOffsetTop; 86 let bottom = top + target.offsetHeight; 87 // 8px body margin + 250px client width of scroller 88 let scrollerRight = 258; 89 checkLastEntry(entries, 1, [left, right, top, bottom, 90 left, scrollerRight, top, bottom, 91 0, vw, 0, vh, true]); 92 } 93 </script>