ladybird/Tests/LibWeb/Text/input/element-get-bounding-client-rect-of-sticky.html

45 lines
1 KiB
HTML

<!DOCTYPE html>
<style>
body {
margin: 0;
}
#scrollable {
width: 300px;
height: 200px;
overflow: auto;
position: relative;
}
#inner-content {
width: 500px;
height: 800px;
padding: 10px;
background-color: #f06;
}
#sticky-element {
position: sticky;
top: 50px;
padding: 20px;
background-color: #4caf50;
color: white;
font-weight: bold;
text-align: center;
}
</style>
<div id="scrollable">
<div id="inner-content">
<div id="sticky-element">Sticky Element</div>
<div style="height: 600px"></div>
</div>
</div>
<script src="include.js"></script>
<script>
test(() => {
const stickyElement = document.getElementById("sticky-element");
const boundingRect = stickyElement.getBoundingClientRect();
println(`Bounding Client Rect: top=${boundingRect.top}, left=${boundingRect.left}, width=${boundingRect.width}, height=${boundingRect.height}`);
});
</script>