[XHTML] invalid shorthand <div style="clear:both" /> extremely slow

RESOLVED DUPLICATE of bug 320378

Status

()

Core
Layout: Floats
--
critical
RESOLVED DUPLICATE of bug 320378
11 years ago
11 years ago

People

(Reporter: Jl Perez, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment, 2 obsolete attachments)

(Reporter)

Description

11 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; es-ES; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; es-ES; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

I have this Css file and this html file. Firefox hangs (100% cpu use) when instead of <div></div> I put <div />. After removing the <div /> mozilla. If I remove the Css firefox works normally, so it has something to be between the CSS and the HTML

CSS file:
universidades.css
= = = = = = = = = = = = = = = = = = = = = = = = = = = = 

/* CSS Document */
.univ_boton {
	border-top: solid 1px #4E7523;
	border-left:  solid 1px #4E7523;
	border-bottom: solid 1px #002D12;
	border-right:  solid 1px #002D12;
	background-color: #4F7524;
	color: #E5F46F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 18px;

}

.univ_inputBox {
	border: solid 1px #16510F;
	background-color: #E4FB8F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 2px;
}

.univ_texto {
	font-size: 11px; 
	font-family: Arial, Helvetica, sans-serif;
	color: #16410E;

}

.univ_form_padding {
	padding-top: 3px;
}
.univ_separator {
	border-bottom: dashed 4px #AED22A; 
	margin-top: 25px; 
	margin-bottom: 25px;
}

.invitacion_data {
	height: 18px;
	padding-top: 2px;
	padding-bottom: 2px;	
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #16410E;
	padding-left: 8px;
	font-weight: normal;
	margin-top: 4px;
	margin-bottom: 4px;
}

.univ_row {
 	float: left; 
	background-color: #D2E097;
	height: 20px;
	padding-top: 6px;
	padding-bottom: 2px;
	padding-left: 3px;

}
.univ_row_alt {
 	float: left; 
	background-color: #F4FABC;
	height: 20px;
	padding-top: 6px;
	padding-bottom: 2px;
	padding-left: 3px;
}
.univ_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
}
.univ_bar_puntos {
	background-color: #E0F15E;
	height: 22px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-left: 5px;
}
.univ_text {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;

}
.univ_container {
	PADDING-LEFT:20px;
	width: 600px;
}
.univ_padding_boxes {
	float: left; 
	padding-left: 12px; 
	padding-top: 10px;
}
.univ_points {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 42px;
	font-weight: bold;
}
.univ_pointbox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	padding-top: 25px;
}
.univ_texto_12px {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #16410E;
	text-decoration: none;
}
.univ_title2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 17px;
	color: #CB1808;
}
.univ_text_rojo {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CB1808;
}
.univ_texto_13px {

	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #16410E;
	text-decoration: none;
}
.univ_text_rojo_13px {


	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #CB1808;
}
.univ_text_rojo_11px {


	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #CB1808;
}
.univ_texto_12px_negro {

	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	text-decoration: none;
}
.univ_title_14px {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
= = = = = = = = = = = = = = = = = = = = = = = = = = = = 
hang.html
= = = = = = = = = = = = = = = = = = = = = = = = = = = = 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link href="/css/universidades.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="panel_pendientes">
												<h3>
													Pendientes de confirmación (<span id="lblPendientes">18</span>)
												</h3>
											
													<div class="univ_texto" style="width: 540px;">
														<div style="width: 240px;" class="univ_row">pepe</div>
														<div style="width:200px;" class="univ_row">pero1@gmail.com</div>
														<div style="width:85px;" class="univ_row">
															<a id="rptNotAccepted__ctl0_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a pero1@gmail.com?');" href="javascript:__doPostBack('rptNotAccepted$_ctl0$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">poeir</div>
															<div style="width:200px;" class="univ_row_alt">porfe@exm.okd</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl1_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a porfe@exm.okd?');" href="javascript:__doPostBack('rptNotAccepted$_ctl1$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">erge</div>
															<div style="width:200px;" class="univ_row">gergdf@fsdfkj.com</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl2_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a gergdf@fsdfkj.com?');" href="javascript:__doPostBack('rptNotAccepted$_ctl2$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">fdsf</div>
															<div style="width:200px;" class="univ_row_alt">fwefw43@fdekj.com</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl3_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a fwefw43@fdekj.com?');" href="javascript:__doPostBack('rptNotAccepted$_ctl3$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">eq38u</div>
															<div style="width:200px;" class="univ_row">r48ff@ds.com</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl4_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a r48ff@ds.com?');" href="javascript:__doPostBack('rptNotAccepted$_ctl4$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">porp</div>
															<div style="width:200px;" class="univ_row_alt">poir@tret.net</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl5_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl5$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">porp</div>
															<div style="width:200px;" class="univ_row">poir2@tret.net</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl6_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir2@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl6$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">porp</div>
															<div style="width:200px;" class="univ_row_alt">poir3@tret.net</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl7_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir3@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl7$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">porp</div>
															<div style="width:200px;" class="univ_row">poir4@tret.net</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl8_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir4@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl8$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">porp</div>
															<div style="width:200px;" class="univ_row_alt">poir5@tret.net</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl9_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir5@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl9$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">porp</div>
															<div style="width:200px;" class="univ_row">poir6@tret.net</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl10_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir6@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl10$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">porp</div>
															<div style="width:200px;" class="univ_row_alt">poir7@tret.net</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl11_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir7@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl11$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">porp</div>
															<div style="width:200px;" class="univ_row">poir8@tret.net</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl12_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir8@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl12$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">porp</div>
															<div style="width:200px;" class="univ_row_alt">poir9@tret.net</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl13_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir9@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl13$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">porp</div>
															<div style="width:200px;" class="univ_row">poir10@tret.net</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl14_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir10@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl14$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">porp</div>
															<div style="width:200px;" class="univ_row_alt">poir11@tret.net</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl15_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir11@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl15$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row">porp</div>
															<div style="width:200px;" class="univ_row">poir12@tret.net</div>
															<div style="width:85px;" class="univ_row">
																<a id="rptNotAccepted__ctl16_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir12@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl16$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
														<div class="univ_texto" style="width: 540px;">
															<div style="width: 240px;" class="univ_row_alt">porp</div>
															<div style="width:200px;" class="univ_row_alt">poir13@tret.net</div>
															<div style="width:85px;" class="univ_row_alt">
																<a id="rptNotAccepted__ctl17_reenviar" class="univ_texto" OnClick="return confirm ('¿Quieres reenviar la invitacion a poir13@tret.net?');" href="javascript:__doPostBack('rptNotAccepted$_ctl17$reenviar','')">reenviar</a></div>
															<div style="clear: both" />
														</div>

													
											</div>
</body>
</html>

Reproducible: Always

Steps to Reproduce:
1.Create the CSS file
2.Create the HTML file
3.Try to load with firefox. 
Actual Results:  
Firefox hangs (100% cpu use)

Expected Results:  
Explorer renders the page with no problem.

Comment 1

11 years ago
Created attachment 282952 [details]
CSS for testcase

universidades.css for reporter's testcase

Comment 2

11 years ago
Created attachment 282953 [details]
Reporter's testcase

reporter's testcase is hanging seamonkey

Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8.1.8pre) Gecko/20070930 SeaMonkey/1.1.5pre

Comment 3

11 years ago
Created attachment 282973 [details]
reduced testcase

<style type="text/css">

.f {
        font-size: 11px; 
        font-family: Arial, Helvetica, sans-serif;
        color: #16410E;        
		background-color: #D2E097;
		width: 200px;
        height: 20px;
		float:left; 
}
.c {
        clear:both;
}
</style>
</head>

<body><div>
                                                                          
<div class="f">left</div><div class="c" />
<div class="f">left</div><div class="c" /> ...

a few float:left-clear:both pairs are o.k., but as the number gets bigger, like 16 in this testcase, start of painting takes more than a minute.
Attachment #282952 - Attachment is obsolete: true
Attachment #282953 - Attachment is obsolete: true

Updated

11 years ago
Component: General → Layout: Floats
Product: Firefox → Core
QA Contact: general → layout.floats

Comment 4

11 years ago
Nested floats + clears, this looks like the same issue as bug 323078.

If you're wondering why these elements are nested, you can't use the self-closing <div/> syntax with content type text/html, see XHTML 1.0 C.3. Compare it with the same testcase but a different content type:

https://bugzilla.mozilla.org/attachment.cgi?id=282973&content_type=application/xml

Comment 5

11 years ago
Typo, I meant bug 320378.

Comment 6

11 years ago
dupe to Bug 320378, as they got a very similar testcase Attachment 206197 [details]

Also could be resolved as INVALID according to XTML spec

http://www.w3.org/TR/xhtml1/#h-4.3
4.3. For non-empty elements, end tags are required

In SGML-based HTML 4 certain elements were permitted to omit the end tag; with the elements that followed implying closure. XML does not allow end tags to be omitted. All elements other than those declared in the DTD as EMPTY must have an end tag. Elements that are declared in the DTD as EMPTY can have an end tag or can use empty element shorthand 

In the DTD Element div isn't declared as EMPTY, so shorthand notation <div style="clear:both" /> is not allowed in XHTML.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
...
<!ELEMENT div %Flow;>  <!-- generic language/style container -->
<!ATTLIST div
  %attrs;
  %TextAlign;
  >



source of testcase view-source:https://bugzilla.mozilla.org/attachment.cgi?id=282973&content_type=application/xml

testcase delivered as text/html so slow, nearly seems hanging https://bugzilla.mozilla.org/attachment.cgi?id=282973&content_type=text/html

testcase delivered as application/xml speed ok https://bugzilla.mozilla.org/attachment.cgi?id=282973&content_type=application/xml
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → DUPLICATE
Summary: Firefox Hangs when it finds <div /> in certain situations → [XHTML] invalid shorthand <div style="clear:both" /> extremely slow
Duplicate of bug: 320378
You need to log in before you can comment on or make changes to this bug.