| Summary: | [WPT] css/css-lists/list-marker-symbol-bidi.html with "unicode-bidi: plaintext" may have incorrect expected rendering | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | zalan <zalan> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, obrufau, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar, WPTImpact |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| URL: | http://wpt.live/css/css-lists/list-marker-symbol-bidi.html | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=249899 | ||
https://drafts.csswg.org/css-lists/#marker-side marker-side defaults to match-self, i.e. > The marker box is positioned using the directionality of the ::marker’s originating element. So since the 1st <li> has direction:rtl, then its ::marker appears at the right. And since the 2nd <li> has direction:ltr, its ::marker appears on the left. It sounds like you expect marker-side:match-parent > The marker box is positioned using the directionality of the ::marker’s originating element’s parent element. Then since the <ul> have direction:rtl, both markers would appear at the right. I don't see why unicode-bidi:plaintext would make it different, given that the markers have outside position. https://drafts.csswg.org/css-lists/#list-style-position-outside > CSS does not specify the precise location of the marker box or its position in the painting order, but does require that it be placed on the inline-start side of the box, using the writing mode of the box indicated by marker-side. It is failing only in Safari / WebKit. Adding 'BrowserCompat' tag and also adding 'WPTImpact'. |
<style> ul { direction: rtl; } li { outline: 1px solid; } img { width: 10px; height: 10px; background-color: blue; } </style> <div style="width: 200px; border: 1px solid;"> <ul dir="rtl"> <li style="unicode-bidi: plaintext"><img></li> </ul> <ul dir="rtl"> <li style="direction: ltr; text-align: right"><img></li> </ul> </div> shouldn't both lines produce the list marker at the same (horizontal) position?