<!DOCTYPE html>
<div style="writing-mode:vertical-lr; position:absolute; height:500px; right:0;">
<!-- With such large vertical borders and padding, the content box height
of the following block should become 0, since its available height 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-left and padding-right). -->
<div style="position:relative; padding:1234567890px 0; border-width:1234567890px 0; border-style:solid;">
<div id="inner" style="padding:10%; width: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").offsetLeft, 300);
assert_equals(document.getElementById("inner").offsetHeight, 0);
assert_equals(document.getElementById("inner").offsetWidth, 300);
}, "Sizes should never become negative");
</script>
Codebase Browser
chromium