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,
@@ -88,7 +90,15 @@ - (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;
+  // Yoga snaps each edge of a node to the pixel grid independently and derives the height from
+  // their difference, so on screens whose scale is not a power of two the frame can come out one
+  // float ULP short of the requested `lineHeight` once the node sits far enough down the screen
+  // (e.g. 19.999992 for `lineHeight: 20`, see react/yoga#2011). Because the line height does not
+  // change when the font is scaled, such a frame never "fits" and the text collapses to
+  // `minimumFontSize` (react/react-native#52642). A shortfall smaller than one physical pixel
+  // cannot change what is drawn, so it is treated 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,44 @@ 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 with a fixed `lineHeight` placed after a fractional-height separator. Yoga rounds
+ * each edge to the pixel grid independently, so on a 3x screen some rows get a frame one
+ * float ULP shorter than the line height; without a tolerance in the fitting check those
+ * rows were scaled down to the minimum font size even though the text fits (#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 +1462,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',