<!DOCTYPE html>
<p>There should be a blue <em>square</em> below.</p>
<div style="columns:2; column-fill:auto; height:90px; line-height:20px; widows:3;">
    <div id="lines" style="position:relative; width:400px; height:110px;">
        <div id="abspos" style="position:absolute; width:25%; height:25px; top:0; left:0; background:blue;"></div>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
    test(() => {
        var lines = document.getElementById("lines");
        var abspos = document.getElementById("abspos");
        assert_equals(abspos.offsetWidth, 100);
        lines.style.width = "100px";
        assert_equals(abspos.offsetWidth, 25);
    }, "Resize container with percent-width abspos and widows");
</script>