[Webkit-unassigned] [Bug 31396] New: Unclosed <div> inside <li>...</li> causes content invisible
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Thu Nov 12 01:07:49 PST 2009
https://bugs.webkit.org/show_bug.cgi?id=31396
Summary: Unclosed <div> inside <li>...</li> causes content
invisible
Product: WebKit
Version: 528+ (Nightly build)
Platform: PC
URL: http://kankan.xunlei.com/4.0/movie_index.html
OS/Version: Windows XP
Status: UNCONFIRMED
Severity: Normal
Priority: P2
Component: HTML DOM
AssignedTo: webkit-unassigned at lists.webkit.org
ReportedBy: hanrui.gao at gmail.com
CC: johnnyding.webkit at gmail.com, hongxu at google.com
Created an attachment (id=43041)
--> (https://bugs.webkit.org/attachment.cgi?id=43041)
Test-cases.
Test result in different browsers:
Chrome 4: Fail
Safari 4: Fail
Firefox 3.x: OK
IE 7: OK
IE 8: OK
What steps will reproduce the problem?
1. Load URL: http://kankan.xunlei.com/4.0/movie_index.html
2. Look at the page in the different kinds of browsers(IE, FF, Chrome, Safari),
you will find that in Chrome and Safari there's a big empty area which is
expected to have many poster thumbnails.
What is the expected result?
Safari and Chrome should behaviour as well as IE and Firefox.
What happens instead?
A lot of contents are missing in Safari and Chrome.
Please provide any additional information below. Attach a screenshot if
possible.
The page has following code in page source:
HTML source code:
...
<script
src="http://js.kankan.xunlei.com/4.0/js/common.js"></script>
...
<ul...>
<li>
...
<script>printScore({totalScore:'6.00',totalUsers:'1',top_level:'3',level1:{
score:'0',sers:'0'},level2:{score:'0', users:'0'},level3:{score:'0',
users:'0'}, level4:{score:'0', users:'0'},level5:{score:'0',
users:'0'}})</script>
...
</li>
</ul>
...
JavaScript code("http://js.kankan.xunlei.com/4.0/js/common.js"):
...
function printScore(score){
var p = getGradePercent(score);
var str='<div id="grade" onmouseover="displaySocreTips(this)"
onmouseout="hiddenScoreTips(this)"><ul><li><div
style="width:'+p.level1+'%;"></div></li><li><div
style="width:'+p.level2+'%;"></div></li><li><div
style="width:'+p.level3+'%;"></div></li><li><div
style="width:'+p.level4+'%;"></div></li><li><div
style="width:'+p.level5+'%;"></div></li></ul><div><div class="pingfen"><p>
用户评价</p><ul><li><label>力荐</label><span><div
style="width:'+p.level1+'%;"></div></span></li><li><label>推荐
</label><span><div
style="width:'+p.level2+'%;"></div></span></li><li><label>一般
</label><span><div
style="width:'+p.level3+'%;"></div></span></li><li><label>较差
</label><span><div
style="width:'+p.level4+'%;"></div></span></li><li><label>很差
</label><span><div
style="width:'+p.level5+'%;"></div></span></li></ul></div><div></div>';
document.write(str);
}
...
1. In the HTML code, the <script> part is used to create "用户评价" HTML
code.
2. The JavaScript function "printScore" is contained in JavaScript file
"http://js.kankan.xunlei.com/4.0/js/common.js".
This method can write some HTML code into the page, in the code,
the HTML code is not proper, there are 14 "<div..>" but just 12 "</div>".
3. IE6, IE7 and Firefox can parse the code as a proper format one. But
Chrome and Safari can't parse it in a proper way, the code affects the HTML
code after it.
With Chrome Developer Tools, the DOM nodes after the first
"<script>printScore(...</script>" don't exist, the webkit can't render them.
Generally speaking, the unclosed <div> caused all <li> elements after it
to be encircled into it.
4. When change the last code "</div><div></div>" to "</div></div></div>",
the problem disappear.
5. Different browsers may have their own ways to deal with such mistake
caused issue. For example, unclosed <a> tag, <div> (or other block element
except <p>) tag, and <span> (or other inline element expect <a>) tag will been
rendered in different ways in each browser. (See my test-cases)
--
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.
More information about the webkit-unassigned
mailing list