Bug 21114

Summary: Hang on specific combo of XHTML and CSS
Product: WebKit Reporter: Rasmus Andersson <rasmus>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, rniwa, simon.fraser, zalan
Priority: P1    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.5   
Attachments:
Description Flags
Crash log
none
File used to reproduce crash
none
test case none

Description Rasmus Andersson 2008-09-25 12:00:05 PDT 
A specific combination of a certain XHTML elements and CSS causes WebKit to hang for a very long time (or even crash). We have drilled down a HTML file reproducing this bug in WebKit/Safari 3.1.2 (5525.20.1)

What I did:
* Started Safari
* Opened crash.html

What I expected to happen:
* Safari rendering the document.

What actually did happen:
* Safari used up 100% of one cpu core and became unresponsive.

FILES:
crash.html – Opening this file in Safari reproduces the bug
----
<!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" xml:lang="en" lang="en">
	<head>
		<title>Spotify - Share</title>
		<style type="text/css">
      div.section.beta-tokens div.token-info-text {
      	padding-left:1em;
      	float:left;
      }
		</style>
	</head>
	<body>
		<div id="logo" onclick="document.location.href='/'">

			<div class="menu">
				<a href="/">Home</a><a href="/download/">Download</a><a href="/account/">My Account</a><a href="/share" class="active">Share</a><a href="/help/">Help</a><a href="/legal/">Legal</a>			</div>
		</div>
					<div id="loggedinfo">
				<small>

					Logged in as <!--a href="/account"-->john.doe<!--/a-->
					(<a href="/logout">log out</a>)
				</small>
			</div>
					<div id="supercontainer">
<script type="text/javascript" charset="utf-8">
	function sanitize_val(s) {
		return s.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
	}
	function on_resend_mail(elem, addr, token) {
		/*snip*/
	}
</script>
<div class="section beta-tokens">

	<h1>Your Invitation Tokens</h1>
	<p>
					<hr />
			<h2>People you have invited</h2>
			<p>
				<ul>
				<li class="odd-row"><b>lisbeth</b> was born from <tt>E3wVt4Xn6uqi4wA7</tt> <small>Initially sent to <b>john.doe@foo.bar</b></small></li><li class="even-row"><b>robert</b> was born from <tt>fwn2tc9UpLthgs8p</tt> <small>Initially sent to <b>john.doe@foo.bar</b></small></li></ul>

				<br /><br />
			</p>
						<hr />
			<form class="invite" method="post" action="/share/">
				<h2>Active invitations</h2>
				<p>
					<ul>
					<li class="odd-row"><div class="token sent">36kYVxXH8RJjEELA</div><div class="token-info-text">Was sent to <b>john.doe@foo.bar</b><br /><a href="javascript:;" onclick="on_resend_mail(this, 'john.doe@foo.bar', '36kYVxXH8RJjEELA')"><small>Send again (or to another address)...</small></a></div><br clear="all" /></li><li class="even-row"><div class="token new">aVUFRydaTxAnRUFM</div><div class="token-info-text"><input type="hidden" name="token[]" value="aVUFRydaTxAnRUFM" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">2PVsNUGsMaSCGaRd</div><div class="token-info-text"><input type="hidden" name="token[]" value="2PVsNUGsMaSCGaRd" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">iJFGqZ7JnVjxkaBE</div><div class="token-info-text"><input type="hidden" name="token[]" value="iJFGqZ7JnVjxkaBE" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">eTMxCN8Yp7akKhLu</div><div class="token-info-text"><input type="hidden" name="token[]" value="eTMxCN8Yp7akKhLu" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">cUcbZuinLqZABRsN</div><div class="token-info-text"><input type="hidden" name="token[]" value="cUcbZuinLqZABRsN" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">GSs7P9YF8nFyes3i</div><div class="token-info-text"><input type="hidden" name="token[]" value="GSs7P9YF8nFyes3i" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">DaP7BxJBX2cdb2Df</div><div class="token-info-text"><input type="hidden" name="token[]" value="DaP7BxJBX2cdb2Df" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">6MFfYnqVN4Afbuax</div><div class="token-info-text"><input type="hidden" name="token[]" value="6MFfYnqVN4Afbuax" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">WqppMxpy45Qy847n</div><div class="token-info-text"><input type="hidden" name="token[]" value="WqppMxpy45Qy847n" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">RUCLYSY2cDdRpZyq</div><div class="token-info-text"><input type="hidden" name="token[]" value="RUCLYSY2cDdRpZyq" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">TuDQbzEzEZGHYn2s</div><div class="token-info-text"><input type="hidden" name="token[]" value="TuDQbzEzEZGHYn2s" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">eRAkwpBYCtjB2yF6</div><div class="token-info-text"><input type="hidden" name="token[]" value="eRAkwpBYCtjB2yF6" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">WHfuzD9mn547RW44</div><div class="token-info-text"><input type="hidden" name="token[]" value="WHfuzD9mn547RW44" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">niZxgabtkH9LWCEc</div><div class="token-info-text"><input type="hidden" name="token[]" value="niZxgabtkH9LWCEc" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">BGtexjVe8acUYR6L</div><div class="token-info-text"><input type="hidden" name="token[]" value="BGtexjVe8acUYR6L" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">e98wJV8dyL9WyLeY</div><div class="token-info-text"><input type="hidden" name="token[]" value="e98wJV8dyL9WyLeY" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">jQnEqbcy8huHNn44</div><div class="token-info-text"><input type="hidden" name="token[]" value="jQnEqbcy8huHNn44" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">FZ6NiN8jCaznVmCh</div><div class="token-info-text"><input type="hidden" name="token[]" value="FZ6NiN8jCaznVmCh" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">9JAduGbNbKdk5B6y</div><div class="token-info-text"><input type="hidden" name="token[]" value="9JAduGbNbKdk5B6y" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">Yw8dEwY5bDR7R4LL</div><div class="token-info-text"><input type="hidden" name="token[]" value="Yw8dEwY5bDR7R4LL" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">7b4dCfqjCBpedsuC</div><div class="token-info-text"><input type="hidden" name="token[]" value="7b4dCfqjCBpedsuC" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">KCZTnjkCwjhDZf72</div><div class="token-info-text"><input type="hidden" name="token[]" value="KCZTnjkCwjhDZf72" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">CN5pcxyYskebJK7Z</div><div class="token-info-text"><input type="hidden" name="token[]" value="CN5pcxyYskebJK7Z" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="odd-row"><div class="token new">Qb7PUsBYN8XDG5Eg</div><div class="token-info-text"><input type="hidden" name="token[]" value="Qb7PUsBYN8XDG5Eg" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li><li class="even-row"><div class="token new">BAggUDgbtHmhnT2A</div><div class="token-info-text"><input type="hidden" name="token[]" value="BAggUDgbtHmhnT2A" />Send to&nbsp;&nbsp;<input class="email" type="text" style="color:#888888" onfocus="if(this.value=='friends e-mail address'){this.value='';this.style.color='#000000';}" name="email[]" value="friends e-mail address" /></div><div style="clear:both" /></li></ul>

					<br />
					<div id="send-tip-ctrl" style="display:block">
						<div class="button">
							<input type="submit" name="send" value="Send Invitations" />
						</div>
						<div class="text">
							Tip: You can add your friends name to the invitation by writing the 
							e-mail address like this:&nbsp;&nbsp;<tt>John Doe john.doe@foo.bar</tt>
						</div>

						<br clear="all" />
					</div>
				</p>
			</form>
						<br /><br />
			<hr />
				<form method="post" action="/share/">
			<h2>Unused invitations</h2>

			<p>
									<span style="color:#999">You have no more invitations I'm afraid.</span>
							</p>
		</form>
	</p>
</div>
		</div>
				<div class="bottom-copyright">
			Copyright © 2007 Spotify Technology SARL | <a href="/legal/beta-agreement">Beta Agreement</a>

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

Crash dump of Safari:
----
This file is 8.2 MB large and when I tried pasting it here (using Safari) the browser crashed. (such irony!) So I'm providing the crash dump on this URL: https://apple.spotify.net/tmp/Safari_crash.txt
Comment 1 Rasmus Andersson 2008-09-25 12:01:23 PDT 
Created attachment 23811 [details]
Crash log
Comment 2 Rasmus Andersson 2008-09-25 12:14:55 PDT 
Created attachment 23815 [details]
File used to reproduce crash
Comment 3 Alexey Proskuryakov 2008-09-26 00:52:15 PDT 
Confirmed with r36890 - I'm not sure if it ever resumes, but it didn't for me in a minute or so.

The attached and linked files are spin dumps, not crash logs, so it is not clear if this can actually cause a crash (an unexpected quit).

> This file is 8.2 MB large and when I tried pasting it here (using Safari) the
> browser crashed. (such irony!)

It's good that this amount of text is not on the report though, it would make it really hard to follow. What kind of crash was this - did the browser unexpectedly quit, or just hang for a long period of time?
Comment 4 Rasmus Andersson 2008-09-26 05:42:08 PDT 
After posting this report I realized one could attach files. That was not obvious (or even mentioned) on the report form.

And yes, sorry. Spin dump is correct. Generated after I killed Safari.
Comment 5 Ahmad Saleem 2022-07-27 09:13:58 PDT 
I am unable to reproduce any hang or crash using attached test case and I think whatever the underlying issue was has been fixed since long. I haven't looked into crash log but if it is something interesting or obvious, please ignore my comment but I think at this point, we can mark this as "RESOLVED WONTFIX" or "RESOLVED CONFIGURATION CHANGED". Thanks!
Comment 6 Ryosuke Niwa 2022-07-27 11:34:20 PDT 
Created attachment 461255 [details]
test case
Comment 7 Ryosuke Niwa 2022-07-27 11:34:39 PDT 
This doesn't hang or crash anymore.