[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