Tolerate sub-pixel height shortfall in adjustsFontSizeToFit on iOS

Yoga snaps each edge of a node to the pixel grid independently and
derives the height from their difference. On screens whose scale is not
a power of two, a node far enough down the screen can get a frame one
float ULP short of its `lineHeight` (19.999992 for 20, react/yoga#2011).
`compareToSize:` had no tolerance on the height, and the line height
does not change when the font is scaled, so such a row never fit and
was scaled down to `minimumFontSize` even though the text fit (#52642).

Treat a height shortfall smaller than one physical pixel as fitting.
Width keeps its existing check. Adds an RNTester example that reproduces
the condition on a 3x device.

Author: Hayate Aizawa

packages/react-native/Libraries/Text/Text/NSTextStorage+FontScaling.m

@@ -7,6 +7,8 @@
 
 #import "NSTextStorage+FontScaling.h"
 
+#import <React/RCTUtils.h>
+
 typedef NS_OPTIONS(NSInteger, RCTTextSizeComparisonOptions) {
   RCTTextSizeComparisonSmaller = 1 << 0,
   RCTTextSizeComparisonLarger = 1 << 1,
@@ -87,8 +89,10 @@ - (RCTTextSizeComparisonOptions)compareToSize:(CGSize)size thresholdRatio:(CGFlo
 
   CGSize measuredSize = [layoutManager usedRectForTextContainer:textContainer].size;
 
-  // Does it fit the size?
-  BOOL fitsSize = size.width >= measuredSize.width && size.height >= measuredSize.height;
+  // Does it fit the size? Yoga's pixel-grid rounding can leave the height a float ULP short of
+  // the line height (#52642), so a shortfall smaller than one physical pixel still counts as fitting.
+  CGFloat heightTolerance = 1.0 / RCTScreenScale();
+  BOOL fitsSize = size.width >= measuredSize.width && size.height + heightTolerance > measuredSize.height;
 
   CGSize thresholdSize = (CGSize){
       size.width * thresholdRatio,

packages/rn-tester/js/examples/Text/TextExample.ios.js

@@ -278,6 +278,39 @@ class AdjustingFontSize extends React.Component<
   }
 }
 
+function FontSizeToFitWithLineHeightRow({index}: {index: number}) {
+  const [height, setHeight] = React.useState<?number>(null);
+  return (
+    <View style={{flexDirection: 'row', alignItems: 'center'}}>
+      <Text
+        numberOfLines={1}
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.8}
+        onLayout={e => setHeight(e.nativeEvent.layout.height)}
+        style={{fontSize: 12, lineHeight: 20, width: 200}}>
+        {'Should not shrink ' + (index + 1)}
+      </Text>
+      <Text style={{fontSize: 9, color: '#888'}}>
+        {height == null ? '' : String(height)}
+      </Text>
+    </View>
+  );
+}
+
+// Rows after a 0.5pt separator: on a 3x screen some get a frame a float ULP short of lineHeight (#52642).
+function FontSizeToFitWithLineHeightExample(): React.Node {
+  const rows = [];
+  for (let i = 0; i < 10; i++) {
+    rows.push(<FontSizeToFitWithLineHeightRow key={i} index={i} />);
+  }
+  return (
+    <View style={{alignItems: 'center'}}>
+      <View style={{height: 0.5, width: 200, backgroundColor: 'green'}} />
+      {rows}
+    </View>
+  );
+}
+
 class TextBaseLineLayoutExample extends React.Component<{}, unknown> {
   render(): React.Node {
     const texts = [];
@@ -1424,6 +1457,13 @@ const examples = [
       return <AdjustingFontSize />;
     },
   },
+  {
+    title: 'Font Size Adjustment with lineHeight',
+    name: 'adjustsFontSizeToFitLineHeight',
+    render: function (): React.Node {
+      return <FontSizeToFitWithLineHeightExample />;
+    },
+  },
   {
     title: 'Text Align with RTL',
     name: 'textAlign',