| <!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> |
