If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

A div with "display" style set to "table-caption" does not show scroll bars

RESOLVED FIXED in mozilla37

Status

()

Core
Layout: Tables
RESOLVED FIXED
8 years ago
3 years ago

People

(Reporter: rainier, Assigned: mats)

Tracking

unspecified
mozilla37
Points:
---
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [fixed by bug 1109571])

Attachments

(1 attachment, 1 obsolete attachment)

2.96 KB, text/html
Details
(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>overflow</title>
<style type="text/css">
	#main{
		height:400px;
		width:300px;
		margin:auto;
		border: solid 1px red;
	}
	#caption{
   		display:table-caption;
		height:100px;	
    		overflow:auto;
		border:solid 1px blue;	
		background-color:yellow;
	}
	#table{
		display:table-cell;
		height:100px;
		overflow:auto;
		border:solid 1px green;
		background-color:violet;	
	}

</style>
</head>
<body>
<div id="main">
	<div id="caption">
			<h1>Table Caption</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	</div>
	<div id="table">
			<h1>Table Cell</h1>
			text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text text
			text text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text text
			text text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text text
			text text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text texttext text text text text text text text text text text text text text
	</div>
<div>
	
</body>

</html>

Reproducible: Always

Steps to Reproduce:
1.div with "display" style of  "table-caption" or "table-cell" 
2.add many many texts to cause overflow.
3.set height 
4.set overflow to "auto"
Actual Results:  
the text running continuously out  of the div, no scroll bar

Expected Results:  
the div should have vertical scrollbars and specified height is followed.
(Reporter)

Comment 1

8 years ago
Created attachment 433884 [details]
an html that shows the bug

Updated

8 years ago
Component: General → Layout: Tables
Product: Firefox → Core
QA Contact: general → layout.tables
> 1.div with "display" style of  "table-caption" or "table-cell" 

Those are different situations.  For the latter, there is no overflow due to the fact that "height" on cells only really sets a min-height.

The former (which is NOT shown by the attached testcase), does look like a bug; table-caption boxes should support scrollbars.  It's easy to fix this in frame construction, but would table code get confused by captions possibly wrapped in a scrollframe?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Attachment #433884 - Attachment is obsolete: true
(Reporter)

Comment 3

8 years ago
Created attachment 434150 [details]
html that shows the bug

Comment 4

8 years ago
>but would table code get confused by captions possibly wrapped in
a scrollframe?

In principle not as we treat the caption as block anyway
> In principle not as we treat the caption as block anyway

Right, but the point is that places that look for a CaptionFrame (are there any?) would need to deal with scrollframes...
(Assignee)

Comment 6

3 years ago
Bug 1109571 fixes this.
Assignee: nobody → mats
Depends on: 1109571
OS: Windows XP → All
Hardware: x86 → All
(Assignee)

Updated

3 years ago
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Whiteboard: [fixed by bug 1109571]
Target Milestone: --- → mozilla37
You need to log in before you can comment on or make changes to this bug.