ref-rectangle.js (1570B)
1 /** 2 * The function positions a new div to exactly the bounding client rect without 3 * using sticky position. If it's directly under the sticky element it could be 4 * obscured and not show up when compared to the ref. */ 5 function createIndicatorForStickyElements(sticky_divs) { 6 if (sticky_divs.length == 0) 7 throw "No sticky div was found in the test case."; 8 9 sticky_divs.forEach((sticky_div) => { 10 if (getComputedStyle(sticky_div).position != "sticky") 11 throw "Provided sticky element does not have position: sticky"; 12 }); 13 14 document.fonts.ready.then(() => { 15 sticky_divs.forEach((sticky_div) => { 16 // The relative position indicator will be able to share the same containing 17 // block to match the position with the same offset from in flow position 18 // (offsetTop/offsetLeft) 19 let position_div = document.createElement("div"); 20 position_div.style.left = sticky_div.offsetLeft + "px"; 21 position_div.style.top = sticky_div.offsetTop + "px"; 22 // The absolute position is to ensure that the position_div adds zero size 23 // to in flow layout 24 position_div.style.position = "absolute" 25 let indicator_div = document.createElement("div"); 26 indicator_div.style.width = sticky_div.offsetWidth + "px"; 27 indicator_div.style.height = sticky_div.offsetHeight + "px"; 28 indicator_div.style.backgroundColor = "blue"; 29 indicator_div.style.position = "relative"; 30 position_div.appendChild(indicator_div); 31 sticky_div.parentNode.insertBefore(position_div, sticky_div); 32 }); 33 }); 34 }