Closed
Bug 397874
Opened 17 years ago
Closed 17 years ago
[XHTML] invalid shorthand <div style="clear:both" /> extremely slow
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 320378
People
(Reporter: kornerson, Unassigned)
References
()
Details
Attachments
(1 file, 2 obsolete files)
|
1.45 KB,
text/html
|
Details |
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•17 years ago
|
||
universidades.css for reporter's testcase
|
|
||
Comment 2•17 years ago
|
||
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•17 years ago
|
||
<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•17 years ago
|
Component: General → Layout: Floats
Product: Firefox → Core
QA Contact: general → layout.floats
|
||
Comment 4•17 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•17 years ago
|
||
Typo, I meant bug 320378.
|
|
||
Comment 6•17 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
Closed: 17 years ago
Resolution: --- → DUPLICATE
Summary: Firefox Hangs when it finds <div /> in certain situations → [XHTML] invalid shorthand <div style="clear:both" /> extremely slow
You need to log in
before you can comment on or make changes to this bug.
Description
•