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.

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.

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