max-height bigger than height with percentages and quirks mode

NEW
Unassigned

Status

()

5 years ago
4 years ago

People

(Reporter: mimos, Unassigned)

Tracking

({testcase})

Trunk
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 3 obsolete attachments)

238 bytes, text/html
Details
242 bytes, text/html
Details
(Reporter)

Description

5 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0 (Beta/Release)
Build ID: 20130511120803

Steps to reproduce:

I compared the results of height and max-height. Both specificications look the same to me for this case.
http://www.w3.org/TR/CSS21/visudet.html#propdef-height
http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

<html>
	<head>
	</head>
	<body style="height:100%;">
		<div style="max-height:100%;">
			<div style="overflow:auto; height:100%;">
				<div style="height: 200%; background-color:green;"></div>
			</div>
		</div>
	</body>
</html>

<html>
	<head>
	</head>
	<body style="height:100%;">
		<div style="max-height:100%;">
			<div style="overflow:auto; max-height:100%;">
				<div style="height: 200%; background-color:green;"></div>
			</div>
		</div>
	</body>
</html>


Actual results:

The resulting height of "height:100%" (1st case) is smaller than the height of "max-height:100%" (2nd case).


Expected results:

The resulting height of "max-height" shold never be higher than the height of "height". As in Chrome27 and IE10.

Comment 1

5 years ago
Created attachment 767053 [details]
testcase 1

Comment 2

5 years ago
Created attachment 767054 [details]
testcase 2

Percent height only works if the parent element has a height set. So <html> and <div style="max-height:100%;"> will cause <div style="max-height:100%;"> to collapse and hide the children.

This is true for both testcases.

Could you provide testcases that displays the problem you're talking about?
Flags: needinfo?(mimos)

Comment 3

5 years ago
Created attachment 767058 [details]
testcase 2

Correct version of testcase 2.
Attachment #767054 - Attachment is obsolete: true
(Reporter)

Comment 4

5 years ago
Created attachment 767122 [details]
Testcase height
Flags: needinfo?(mimos)
(Reporter)

Comment 5

5 years ago
Created attachment 767123 [details]
Testcase max-height
(Reporter)

Updated

5 years ago
Attachment #767122 - Attachment mime type: text/plain → text/html
(Reporter)

Updated

5 years ago
Attachment #767123 - Attachment mime type: text/plain → text/html
(Reporter)

Comment 6

5 years ago
added testcases, the only difference is the doctype...
I'll look into it.

Comment 7

5 years ago
Without the doctype you get quirks mode[0], and it tries to emulate browsers from the 90's so don't expect it to render correctly.

[0] https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode
(Reporter)

Comment 8

5 years ago
Well, I can't reproduce it in strict mode, only forgot to use it... So the behavior is only irritating in quirks mode. So I guess it's not really important, but maybe you want to make that consistent anyway.

Comment 9

4 years ago
I can reproduce, in "Testcase max-height" the height of <div style="overflow:auto; max-height:100%;"> is 768px, while in the other testcase the height of the height of <div style="overflow:auto; height:100%;"> is only 384px. Not sure if it's intended...
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Keywords: testcase
OS: Windows 7 → All
Product: Firefox → Core
Hardware: x86_64 → All
Summary: max-height bigger than height → max-height bigger than height with percentages and quirks mode
Version: 21 Branch → Trunk

Updated

4 years ago
Attachment #767053 - Attachment is obsolete: true

Updated

4 years ago
Attachment #767058 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.