li::marker with flexbox is placed on a slipped position

RESOLVED WORKSFORME

Status

()

Core
Layout
RESOLVED WORKSFORME
2 years ago
2 months ago

People

(Reporter: r_kato, Unassigned)

Tracking

({testcase})

Trunk
testcase
Points:
---
Bug Flags:
in-testsuite ?

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8710023 [details]
flex_div_marker.html

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160119030232

Steps to reproduce:

1. Open the attached flex_div_marker.html

This HTML file includes <li> which has <div> applied `display: flex;`.


Actual results:

If <ul> or <ol> has the default rule `list-style-position: outside;`, li::marker is placed on a slipped position. Apparently, flexed ol-li seems not to have this issue, but subtle slipping is occurred :)

The examples with `list-style-position: inside;` are for Chromium.


Expected results:

They should be rendered in the same way whether `display: flex;` are applied or not.
(Reporter)

Comment 1

2 years ago
I've also reported a similar issue to Chromium.
https://code.google.com/p/chromium/issues/detail?id=579601
(Reporter)

Comment 2

2 years ago
Created attachment 8710333 [details]
2016_01_20.jpg

Attached a screenshot which was taken with Firefox 46.0a1 (2016-01-20).
Thanks for filing the bug! One clarification, if you don't mind:

(In reply to Ryo Kato from comment #0)
> Expected results:
> 
> They should be rendered in the same way whether `display: flex;` are applied or not.

Just to clarify: is the problem that the bullets are placed a few pixels too high? (That's the main difference that I see between "flexed div line" and the other bulleted things in your screenshot & testcase.)

(Asking because I'm not 100% sure what you mean by "slipping" / "slipped position".)
Flags: needinfo?(foobar094)
(Reporter)

Comment 4

2 years ago
Thank you for checking this issue!

(In reply to Daniel Holbert [:dholbert] from comment #3)
> Just to clarify: is the problem that the bullets are placed a few pixels too
> high? (That's the main difference that I see between "flexed div line" and
> the other bulleted things in your screenshot & testcase.)

Yes, the problem is the bullets are placed a few pixels high. However, the difference is so subtle that we can't recognize it. So, the priority might be lower than other issues ;)
Flags: needinfo?(foobar094)

Comment 5

2 months ago
The rendering in a current Nightly (57.0a1 (2017-08-29)) on Linux looks correct to me.
http://nightly.mozilla.org/

Please reopen if the problem still occurs on other platforms.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 months ago
Flags: in-testsuite?
Keywords: testcase
Resolution: --- → WORKSFORME
Yup, looks like this is fixed.

* The marker used to be too high (as shown in the screenshot).
* Then in Nightly 2016-10-07, it changed to be too low instead -- that change likely came from this cset:
https://hg.mozilla.org/mozilla-central/rev/32aa05912bbb
> Bug 1307806 - [css-grid][css-flexbox][css-align] Implement nsLayoutUtils::GetFirstLineBaseline for flex/grid containers. r=dholbert

* Then, in Nightly 2016-10-12, it changed to be just right -- that change likely came from this cset:
https://hg.mozilla.org/mozilla-central/rev/2e88bcc7f1bc
> Bug 1306894 Part 1: Cache baseline from nsFlexContainerFrame::Reflow() for use in later calls to GetLogicalBaseline(). r=dholbert 

--> Adding a dependency on that second bug, since that's what seems to have fixed this.
Depends on: 1306894
You need to log in before you can comment on or make changes to this bug.