<!DOCTYPE html>
<style>
body { margin: 0; }
@page {
size: 500px 10.9px;
margin: 0;
}
div { break-inside: avoid; }
</style>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:blue;"></div>
<div style="height:10.9px;"></div>
<div style="height:10.9px; background:black;"></div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(internals.numberOfPages(), 21);
}, "page count");
</script>