Only add extra end padding to the scrollable overflow rectangle along axes where content actually overflows the content box. For positive overflow directions, require content to cross the positive content edge so start-side negative overflow does not create a fake scroll range. Add coverage for orthogonal padding, clipped child overflow, and negative start-side overflow that must not make a box scrollable.
35 lines
770 B
HTML
35 lines
770 B
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#scroller {
|
|
width: 100px;
|
|
height: 100px;
|
|
padding-bottom: 8px;
|
|
overflow: auto;
|
|
}
|
|
|
|
#child {
|
|
width: 200px;
|
|
height: 100px;
|
|
overflow-x: visible;
|
|
overflow-y: clip;
|
|
}
|
|
|
|
#grandchild {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
<div id="scroller"><div id="child"><div id="grandchild"></div></div></div>
|
|
<script>
|
|
test(() => {
|
|
println(`client width: ${scroller.clientWidth}`);
|
|
println(`scroll width: ${scroller.scrollWidth}`);
|
|
println(`client height: ${scroller.clientHeight}`);
|
|
println(`scroll height: ${scroller.scrollHeight}`);
|
|
});
|
|
</script>
|