Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/getBoundingClientRect-scroll.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>getBoundingClientRect for a element inside scroll container</title>
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<html>
<head>
<style>
body {
margin: 0;
}
.scroll_container {
width: 300px;
height: 300px;
overflow: scroll;
scrollbar-width: none;
}
.dummy_overflowing_box {
width: 5000px;
height: 5000px;
}
.target_box {
width: 100px;
height: 100px;
background-color: green;
}
.display_none {
display: none;
}
.display_content {
display: content;
}
.position_absolute {
position: absolute;
}
.position_fixed {
position: fixed;
}
.absolute_containing_block {
position: relative;
}
.fixed_containing_block {
will-change: transform;
}
</style>
</head>
<body>
<div class="scroll_container fixed_containing_block">
<div class="scroll_container absolute_containing_block">
<div id="target_scroll_container" class="scroll_container">
<div id="target_fixed" class="target_box position_fixed"></div>
<div id="target_absolute" class="target_box position_absolute"></div>
<div id="target_none" class="target_box display_none"></div>
<div id="target_content" class="target_box display_content">
<div id="target_static" class="target_box"></div>
</div>
<div class="dummy_overflowing_box"></div>
</div>
<div class="dummy_overflowing_box"></div>
</div>
<div class="dummy_overflowing_box"></div>
</div>
<div id="log"></div>
<script>
setup(() => {
var offset_left = 1;
var offset_top = 2;
for (scroll_container of document.getElementsByClassName('scroll_container')) {
scroll_container.scrollTo(offset_left, offset_top)
offset_left *= 4;
offset_top *= 4;
}
});
test(function() {
var target = document.querySelector('#target_static');
let staticRect = target.getBoundingClientRect();
assert_equals(staticRect.left, -21, 'static positioned target left');
assert_equals(staticRect.top, -42, 'static positioned target top');
assert_equals(staticRect.width, 100, 'static positioned target width');
assert_equals(staticRect.height, 100, 'static positioned target height');
}, "getBoundingClientRect for element inside scroll container");
test(function() {
var target = document.querySelector('#target_absolute');
let absoluteRect = target.getBoundingClientRect();
assert_equals(absoluteRect.left, -5, 'absolute positioned target left');
assert_equals(absoluteRect.top, -10, 'absolute positioned target top');
assert_equals(absoluteRect.width, 100, 'absolute positioned target width');
assert_equals(absoluteRect.height, 100, 'absolute positioned target height');
}, "getBoundingClientRect for absolute element inside scroll container");
test(function() {
var target = document.querySelector('#target_fixed');
let fixedRect = target.getBoundingClientRect();
assert_equals(fixedRect.left, -1, 'fixed positioned target left');
assert_equals(fixedRect.top, -2, 'fixed positioned target top');
assert_equals(fixedRect.width, 100, 'fixed positioned target width');
assert_equals(fixedRect.height, 100, 'fixed positioned target height');
}, "getBoundingClientRect for fixed element inside scroll container");
test(function() {
var target = document.querySelector('#target_scroll_container');
let staticRect = target.getBoundingClientRect();
assert_equals(staticRect.left, -5, 'scroll container target left');
assert_equals(staticRect.top, -10, 'scroll container target top');
assert_equals(staticRect.width, 300, 'scroll container target width');
assert_equals(staticRect.height, 300, 'scroll container target height');
}, "getBoundingClientRect for a scrolled scroll container");
test(function() {
var target = document.querySelector('#target_none');
let staticRect = target.getBoundingClientRect();
assert_equals(staticRect.left, 0, 'scroll container target left');
assert_equals(staticRect.top, 0, 'scroll container target top');
assert_equals(staticRect.width, 0, 'scroll container target width');
assert_equals(staticRect.height, 0, 'scroll container target height');
}, "getBoundingClientRect for a scrolled display none box");
test(function() {
var target = document.querySelector('#target_content');
let staticRect = target.getBoundingClientRect();
assert_equals(staticRect.left, -21, 'static positioned target left');
assert_equals(staticRect.top, -42, 'static positioned target top');
assert_equals(staticRect.width, 100, 'static positioned target width');
assert_equals(staticRect.height, 100, 'static positioned target height');
}, "getBoundingClientRect for a scrolled display content box");
</script>
</body>
</html>