widows-change-width-abspos-right-aligned.html

<!DOCTYPE html>
<p>There should be a blue <em>square</em> below.</p>
<div style="margin-left:100px; width:50px; height:25px; background:blue;"></div>
<div style="columns:2; column-fill:auto; height:90px; line-height:20px; widows:3;">
    <div id="lines" style="position:relative; width:100px; height:110px;">
        <div id="abspos" style="position:absolute; width:50px; height:25px; top:0; right: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.offsetLeft, 50);
        lines.style.width = "150px";
        assert_equals(abspos.offsetLeft, 100);
    }, "Resize container with right-aligned abspos and widows");
</script>

chromium/third_party/blink/web_tests/fragmentation/widows-change-width-abspos-right-aligned.html