Bug 249918 – [WPT] css/css-lists/list-marker-symbol-bidi.html with "unicode-bidi: plaintext" may have incorrect expected rendering

• Status: NEW
• Component: Layout and Rendering

[alan baradlay]

<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?

[Radar WebKit Bug Importer]

<rdar://problem/103859351>

[Oriol Brufau]

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.

[Ahmad Saleem]

It is failing only in Safari / WebKit. Adding 'BrowserCompat' tag and also adding 'WPTImpact'.