| /** |
| * 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) => { |
| // 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) |
| if (getComputedStyle(sticky_div).position != "sticky") |
| throw "Provided sticky element does not have position: sticky"; |
| var 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" |
| var 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); |
| }); |
| } |
