large-padding.html | Explore in Territory

<!DOCTYPE html>
<div style="position:relative; width:500px;">
    <!-- With such large horizontal borders and padding, the content box width
         of the following block should become 0, since its available width is
         just 500px. The percentage padding specified on its child should
         resolve to 0 for all sides, since percentage padding is always
         resolved against the logical *width* of the containing block (even for
         padding-top and padding-bottom). -->
    <div style="position:relative; padding:0 1234567890px; border-width:0 1234567890px; border-style:solid;">
        <div id="inner" style="padding:10%; height:300px;"></div>
    </div>
    <!-- And here's a sibling to verify that the insane border and padding and
         percentage padding resolution didn't have any ill effects on block
         progression. -->
    <div id="sibling"></div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    test(() => {
        assert_equals(document.getElementById("sibling").offsetTop, 300);
        assert_equals(document.getElementById("inner").offsetWidth, 0);
        assert_equals(document.getElementById("inner").offsetHeight, 300);
    }, "Sizes should never become negative");
</script>
chromium/third_party/blink/web_tests/fast/block/large-padding.html
