Bug 67033
| Summary: | line-break after css:before-content in lists with sub-lists | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | uzahnd |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | ahmad.saleem792, shanestephens, uzahnd |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | PC | ||
| OS: | Linux | ||
| URL: | http://crix.zahnd.be/WebKit-Bug.html | ||
uzahnd
Steps to reproduce the bug:
1. Create a page with nested lists
2. Define a css-class with a :before content
3. Dynamically assign this class with javascript to a list-item that contains a sub list
The css:before-content should display inline before the list-item's content (as it does in list-items without sublists, or in statically assigned classes). Instead of this, there's a line-break between the css:before-content and the list-item's content.
The bug has been confirmed for Chrome 13, Epiphany 2.30.6 and Arora 0.10.2.
Tested browsers where it doesn't occur: Firefox 6, IE8 and 9
See sample script below.
thanks,
u
<html>
<head>
<style>
.li1 { cursor:pointer; }
.li2:before { content:'::before:: '; }
</style>
</head>
<body>
<h1>line-break in lists with sub-lists after css:before-content</h1>
<p>click on a list-item without and on one with a sublist</p>
<ul>
<li class="li1" onclick="this.className = 'li2'">List item without sub-list: click me</li>
<li class="li1" onclick="this.className = 'li2'">List item with sub-list: click me
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
<li class="li2">statically assigned :before-content in list item with sub-list
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
</ul>
</body>
</html>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
uzahnd
In order to force the (buggy) behavior, assign a 'display:block' to the pseudo-class. A 'display:inline'-assignement however has no effect.
gruss u
Ahmad Saleem
I took the test case from Web Archive:
Link - https://web.archive.org/web/20140806132851/http://crix.zahnd.be/WebKit-Bug.html
All browsers (Safari 16, Firefox Nightly 107 and Chrome Canary 108) expand and add ::before from the list items with and without sub-items and it does not do any layout shift or does not have any weird behavior.
Since all browsers agree, I am marking this as "RESOLVED CONFIGURATION CHANGED". Thanks!
Please reopen, if reproducible with updated test case.