<!DOCTYPE html>
<script>
if (window.testRunner)
testRunner.setPrinting();
if (window.internals)
internals.settings.setShouldPrintBackgrounds(true);
</script>
<style>
body { margin: 0; }
</style>
<div style="height:80vh;">
There should be a yellow square at the bottom of the first page, and another
one at the top of the second page.
</div>
<!-- Add a red square to detect overclipping. -->
<div style="position:absolute; top:105vh; left:50%; width:5vh; height:5vh; background:red;"></div>
<div style="position:relative; margin:auto; width:20vh; height:40vh; overflow:clip;">
<div style="position:absolute; contain:size; left:-10vh; top:-10vh; width:32vh; height:100vh; background:yellow;"></div>
</div>