Closed
Bug 1218116
Opened 9 years ago
Closed 9 years ago
height:calc() of display:block elements in some cases is calculated wrong if calc() contains percent values
Categories
(Core :: CSS Parsing and Computation, defect)
Core
CSS Parsing and Computation
Tracking
()
RESOLVED
INVALID
| Tracking | Status | |
|---|---|---|
| firefox44 | --- | affected |
People
(Reporter: arni2033, Unassigned)
Details
Attachments
(1 file)
STR: (Win7_64, Nightly 44, 32bit, ID 20151020031317, new profile)
1. Open attached testcase. It contains 2 iframes:
<body><div style="height:100%"/><body> vs <body><div style="height:calc(100%)"/><body>
Expectations: Both <div>s should take equal space (have equal height), just like in GoogleChrome
Result: <div> in the first iframe takes 100% of page, <div> in the second iframe has height == 0px
This also happens with other (not <div>) elements. E.g. <input style="display:block;">
This also happens if I set "height:calc(100% + 1000px)" to <div> in second iframe has
Maybe it's one of those "weird but works as expected"-things - I can't tell.
|
||
Comment 1•9 years ago
|
||
Thank you for the bug report. The issue is that the testcases are in quirks mode. Percentage heights do some weird stuff in quirks mode, but that weird stuff is limited to heights actually specified as a percentage. calc() heights, even with percentages in them, are not supposed to do the weirdness. Chrome has a known bug here where they apply the quirky behavior to calc() even though they're not supposed to. See https://code.google.com/p/chromium/issues/detail?id=388892 If you add "<!DOCTYPE html>" to your testcases, you will see the correct standards-mode rendering in both of them in all browsers. In this case, that's 0 height for the div, since its parent is auto height so percentage height means the same thing as auto height.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•