Source code
Revision control
Copy as Markdown
Other Tools
/**
* The function positions a new div to exactly the bounding client rect without
* using sticky position. If it's directly under the sticky element it could be
* obscured and not show up when compared to the ref. */
function createIndicatorForStickyElements(sticky_divs) {
if (sticky_divs.length == 0)
throw "No sticky div was found in the test case.";
sticky_divs.forEach((sticky_div) => {
if (getComputedStyle(sticky_div).position != "sticky")
throw "Provided sticky element does not have position: sticky";
});
document.fonts.ready.then(() => {
sticky_divs.forEach((sticky_div) => {
// The relative position indicator will be able to share the same containing
// block to match the position with the same offset from in flow position
// (offsetTop/offsetLeft)
let position_div = document.createElement("div");
position_div.style.left = sticky_div.offsetLeft + "px";
position_div.style.top = sticky_div.offsetTop + "px";
// The absolute position is to ensure that the position_div adds zero size
// to in flow layout
position_div.style.position = "absolute"
let indicator_div = document.createElement("div");
indicator_div.style.width = sticky_div.offsetWidth + "px";
indicator_div.style.height = sticky_div.offsetHeight + "px";
indicator_div.style.backgroundColor = "blue";
indicator_div.style.position = "relative";
position_div.appendChild(indicator_div);
sticky_div.parentNode.insertBefore(position_div, sticky_div);
});
});
}