[This might be the same underlying issue as bug 1504296, but I'm not sure, so I spun it off separately] STR: 1. Load attached testcase. 2. Inspect the item with the label "Inspect this item" EXPECTED RESULTS: Minimap should show that the desired shrinkage (-266px) is more than the item can possibly shrink (its flex base size is only 200px). ACTUAL RESULTS: The minimap looks different on different loads, and/or when I switch between this item and the other item and back. Its two different renderings are both incorrect. Incorrect rendering #1: LOTS OF final|basis BLANK SPACE [<---------------------🔒] OVER HERE |min Incorrect rendering #2: final| [ <---🔒-----------------------] |min Expected rendering would be something like "Incorrect Rendering 2", except the arrow should probably extend to the left of the box's left edge. Or at least, all the way to the box's left edge.

I suspect "incorrect rendering #2" might just be the rendering of the second flex item here, rather than a misrendering of the minimap for the first flex item. At least: the minimap looks identical to what we show for the second flex item, and it also looks roughly accurate for the second flex item.

Thanks Daniel. I think I understand what's happening here. The code in FlexItemSizingOutline.js does not expect mainBaseSize + mainDeltaSize to ever be negative, however it happens with testcase 1.

Previously, we would always hard-code the basis-start and final-start line names first in the grid column template used to display the minimap. Because there may be cases where base+delta is actually negative, we cannot do that anymore. This fixes that by removing this hard-coding and sorting the entire array of sizes before generating the grid column template. The test that I added is only a few lines, but to make it simpler to write, I had to merge doc_flexbox_simple.html and doc_flexbox_specific_cases.html, which is why you are seeing several test changed here. Also, to make sure the test case I added would behave the same across platforms, I used the Ahem font, which is often use in Layout tests as it only has 1 glyph that's exactly the size of the font-size.

Try push for this: https://treeherder.mozilla.org/#/jobs?repo=try&revision=bc654c4db17189298c1fc94eafd96e891f3b6014&group_state=expanded

Pushed by pbrosset@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/33ecf2509ce8 Stop assuming that basis+delta is always positive in the flex minimap; r=gl