Closed Bug 1509457 Opened 10 months ago Closed 10 months ago

Flex line background pattern shouldn't be draw outside of flex lines

Categories

(DevTools :: Inspector, defect, P2)

defect

Tracking

(firefox65 verified)

VERIFIED FIXED
Firefox 65
Tracking Status
firefox65 --- verified

People

(Reporter: pbro, Assigned: miker)

References

()

Details

Attachments

(2 files)

STR:

- open firefox nightly

- open a tab at the following URL:

data:text/html,<style>.container{width:400px;background:pink;display:flex;flex-wrap:wrap;height:300px;align-content:space-around;justify-content:space-around}.item{flex:30% 0;height:1em;}</style><div class=container><div class=item>item</div><div class=item>item</div><div class=item>item</div><div class=item>item</div><div class=item>item</div><div class=item>item</div><div class=item>item</div><div class=item>item</div></div>

- open the inspector, find the container div, and highlight the flex container

Expected: the area in between flex lines should be filled with background pattern we use for flex containers

Actual: this area is filled with 2 background patterns: the one for flex containers *and* the one for flex lines.

The pattern for flex lines should only ever appear within the area of flex lines in between items.
More explanation about this:

In flexbox, there are 3 levels of things to consider: container, line, item.
A container contains 0, 1 or n lines, and a line contains 1 or more items.

We draw different background patterns for lines and containers, the reason for this is that if there is space between items, on a line, then you want to see this space, and we use 1 type of pattern for this.
Also, if there is space between lines (which may happen if the container is tall enough, and lines are spread out, maybe with align-content: space-between;) then you want to see this space too. And we use a 2nd type of pattern for this.
Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED
I am surprised this hasn't come up before. It is caused by us simplifying `renderJustifyContent()` a month or so back. Because `align-content: space-between` can expose areas that the justify content pattern shouldn't be drawn we need to switch back to the previous method of drawing it.
Priority: -- → P2
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1f338cc3d9bb
Flex line background pattern shouldn't be draw outside of flex lines r=gl
https://hg.mozilla.org/mozilla-central/rev/1f338cc3d9bb
Status: ASSIGNED → RESOLVED
Closed: 10 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Flags: qe-verify+

I reproduced this issue using 65.0a1(2018-11-23), on Windows 10 x64.
I can confirm this issue is fixed, I verified using Fx 65.0b10 on Windows 10 x64, macOS 10.13 and Ubuntu 16.04 LTS.
Cheers!

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.