[web] Text width should never exceed constraint width (#16152)

lib/web_ui/lib/src/engine/text/paragraph.dart

@@ -234,6 +234,17 @@ class EngineParagraph implements ui.Paragraph {
 
   @override
   void layout(ui.ParagraphConstraints constraints) {
+    // When constraint width has a decimal place, we floor it to avoid getting
+    // a layout width that's higher than the constraint width.
+    //
+    // For example, if constraint width is `30.8` and the text has a width of
+    // `30.5` then the TextPainter in the framework will ceil the `30.5` width
+    // which will result in a width of `40.0` that's higher than the constraint
+    // width.
+    constraints = ui.ParagraphConstraints(
+      width: constraints.width.floorToDouble(),
+    );
+
     if (constraints == _lastUsedConstraints) {
       return;
     }

lib/web_ui/test/paragraph_test.dart

@@ -256,4 +256,20 @@ void main() async {
     TextMeasurementService.clearCache();
     TextMeasurementService.enableExperimentalCanvasImplementation = false;
   });
+
+  testEachMeasurement('width should be a whole integer', () {
+    final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle(
+      fontFamily: 'Ahem',
+      fontStyle: FontStyle.normal,
+      fontWeight: FontWeight.normal,
+      fontSize: 10,
+      textDirection: TextDirection.ltr,
+    ));
+    builder.addText('abc');
+    final Paragraph paragraph = builder.build();
+    paragraph.layout(const ParagraphConstraints(width: 30.8));
+
+    expect(paragraph.width, 30);
+    expect(paragraph.height, 10);
+  });
 }