Bug 1552781 - Part 2: Flexboxes/grids should be font inflation flow roots. r=dbaron

Our algorithm for dividing a page up into separate font inflation flow roots
seems mostly based on the idea that a new Block Formatting Context (BFC) should
go hand in hand with a font inflation flow root.
Flex containers so far didn't follow that rule, since they technically create a
new *Flex* Formatting Context (FFC) and possibly also because nobody thought
about font inflation when implementing nsFlexContainerFrame.

This leads to all flex containers being counted against the next higher-level
flow root, meaning that a lot of small flex containers can get inflated if their
sum total of text *collectively* exceeds the font inflation threshold.
This alone is likely undesired most of the time, but is then also aggravated by
the fact that our flexbox behaviour under font inflation is somewhat buggy (bug
1142461).

As apart from the different layout rules inside the container, a FFC behaves
very much like a BFC in that it establishes a new formatting context, flex
containers should therefore correspondingly become font inflation flow roots,
too, and therefore be considered individually for font inflation.

As far as I can tell, with this change we'll also match Blink's behaviour in
that regard.

For completeness's sake, we'll make grid containers follow the same principles,
even though hopefully grids on non mobile-friendly pages should hopefully be
somewhat rarer than flexboxes.

Differential Revision: https://phabricator.services.mozilla.com/D32622

--HG--
extra : moz-landing-system : lando

layout/generic/nsFlexContainerFrame.cpp

@@ -2348,6 +2348,10 @@ void nsFlexContainerFrame::Init(nsIContent* aContent, nsContainerFrame* aParent,
                                 nsIFrame* aPrevInFlow) {
   nsContainerFrame::Init(aContent, aParent, aPrevInFlow);
 
+  if (GetStateBits() & NS_FRAME_FONT_INFLATION_CONTAINER) {
+    AddStateBits(NS_FRAME_FONT_INFLATION_FLOW_ROOT);
+  }
+
   const nsStyleDisplay* styleDisp = Style()->StyleDisplay();
 
   // Figure out if we should set a frame state bit to indicate that this frame

layout/generic/nsGridContainerFrame.cpp

@@ -7493,6 +7493,10 @@ void nsGridContainerFrame::Init(nsIContent* aContent, nsContainerFrame* aParent,
                                 nsIFrame* aPrevInFlow) {
   nsContainerFrame::Init(aContent, aParent, aPrevInFlow);
 
+  if (GetStateBits() & NS_FRAME_FONT_INFLATION_CONTAINER) {
+    AddStateBits(NS_FRAME_FONT_INFLATION_FLOW_ROOT);
+  }
+
   nsFrameState bits = nsFrameState(0);
   if (MOZ_LIKELY(!aPrevInFlow)) {
     bits = ComputeSelfSubgridBits();

layout/reftests/font-inflation/reftest.list

@@ -90,9 +90,9 @@ test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceE
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-2.html threshold-scope-cell-2-ref.html
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-3.html threshold-scope-cell-3-ref.html
 
-fails test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-1.html threshold-scope-flex-container-1.html
-fails test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-2.html threshold-scope-flex-container-2.html
-fails test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-grid-container-1.html threshold-scope-grid-container-1.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-1.html threshold-scope-flex-container-1.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-2.html threshold-scope-flex-container-2.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-grid-container-1.html threshold-scope-grid-container-1.html
 fails test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-items-1.html threshold-scope-flex-container-items-1.html
 fails test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-items-2.html threshold-scope-flex-container-items-2.html
 fails test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-grid-container-items-1.html threshold-scope-grid-container-items-1.html