[web] Fix positioning of canvas elements due to svg filters

lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart

@@ -320,7 +320,7 @@ class HtmlViewEmbedder {
       return;
     }
     _svgPathDefs = html.Element.html(
-      '<svg width="0" height="0"><defs id="sk_path_defs"></defs></svg>',
+      '$kSvgResourceHeader><defs id="sk_path_defs"></defs></svg>',
       treeSanitizer: _NullTreeSanitizer(),
     );
     skiaSceneHost!.append(_svgPathDefs!);

lib/web_ui/lib/src/engine/html/color_filter.dart

@@ -208,7 +208,9 @@ String? svgFilterFromBlendMode(
     case ui.BlendMode.dstOver:
     case ui.BlendMode.clear:
     case ui.BlendMode.srcOver:
-      assert(false, 'Invalid svg filter request for blend-mode '
+      assert(
+          false,
+          'Invalid svg filter request for blend-mode '
           '$colorFilterBlendMode');
       break;
   }
@@ -232,7 +234,7 @@ int _filterIdCounter = 0;
 // A' = a1*R + a2*G + a3*B + a4*A + a5
 String _srcInColorFilterToSvg(ui.Color? color) {
   _filterIdCounter += 1;
-  return '<svg width="0" height="0">'
+  return '$kSvgResourceHeader'
       '<filter id="_fcf$_filterIdCounter" '
       'filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">'
       '<feColorMatrix values="0 0 0 0 1 ' // Ignore input, set it to absolute.
@@ -249,7 +251,7 @@ String _srcInColorFilterToSvg(ui.Color? color) {
 
 String _srcOutColorFilterToSvg(ui.Color? color) {
   _filterIdCounter += 1;
-  return '<svg width="0" height="0">'
+  return '$kSvgResourceHeader'
       '<filter id="_fcf$_filterIdCounter" '
       'filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">'
       '<feFlood flood-color="${colorToCssString(color)}" flood-opacity="1" result="flood">'
@@ -261,7 +263,7 @@ String _srcOutColorFilterToSvg(ui.Color? color) {
 
 String _xorColorFilterToSvg(ui.Color? color) {
   _filterIdCounter += 1;
-  return '<svg width="0" height="0">'
+  return '$kSvgResourceHeader'
       '<filter id="_fcf$_filterIdCounter" '
       'filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">'
       '<feFlood flood-color="${colorToCssString(color)}" flood-opacity="1" result="flood">'
@@ -276,7 +278,7 @@ String _xorColorFilterToSvg(ui.Color? color) {
 String _compositeColorFilterToSvg(
     ui.Color? color, double k1, double k2, double k3, double k4) {
   _filterIdCounter += 1;
-  return '<svg width="0" height="0">'
+  return '$kSvgResourceHeader'
       '<filter id="_fcf$_filterIdCounter" '
       'filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">'
       '<feFlood flood-color="${colorToCssString(color)}" flood-opacity="1" result="flood">'
@@ -295,7 +297,7 @@ String _modulateColorFilterToSvg(ui.Color color) {
   final double r = color.red / 255.0;
   final double b = color.blue / 255.0;
   final double g = color.green / 255.0;
-  return '<svg width="0" height="0">'
+  return '$kSvgResourceHeader'
       '<filter id="_fcf$_filterIdCounter" '
       'filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">'
       '<feColorMatrix values="0 0 0 0 $r ' // Ignore input, set it to absolute.
@@ -312,7 +314,7 @@ String _modulateColorFilterToSvg(ui.Color color) {
 String _blendColorFilterToSvg(ui.Color? color, String? feBlend,
     {bool swapLayers = false}) {
   _filterIdCounter += 1;
-  return '<svg width="0" height="0">'
+  return '$kSvgResourceHeader'
           '<filter id="_fcf$_filterIdCounter" filterUnits="objectBoundingBox" '
           'x="0%" y="0%" width="100%" height="100%">'
           '<feFlood flood-color="${colorToCssString(color)}" flood-opacity="1" result="flood">'

lib/web_ui/lib/src/engine/util.dart

@@ -111,8 +111,8 @@ TransformKind transformKindOf(Float32List matrix) {
 
   // If matrix contains scaling, rotation, z translation or
   // perspective transform, it is not considered simple.
-  final bool isSimple2dTransform =
-      m[15] == 1.0 &&  // start reading from the last element to eliminate range checks in subsequent reads.
+  final bool isSimple2dTransform = m[15] ==
+          1.0 && // start reading from the last element to eliminate range checks in subsequent reads.
       m[14] == 0.0 && // z translation is NOT simple
       // m[13] - y translation is simple
       // m[12] - x translation is simple
@@ -126,8 +126,8 @@ TransformKind transformKindOf(Float32List matrix) {
       // m[4] - 2D rotation is simple
       m[3] == 0.0 &&
       m[2] == 0.0;
-      // m[1] - 2D rotation is simple
-      // m[0] - scale x is simple
+  // m[1] - 2D rotation is simple
+  // m[0] - scale x is simple
 
   if (!isSimple2dTransform) {
     return TransformKind.complex;
@@ -136,8 +136,7 @@ TransformKind transformKindOf(Float32List matrix) {
   // From this point on we're sure the transform is 2D, but we don't know if
   // it's identity or not. To check, we need to look at the remaining elements
   // that were not checked above.
-  final bool isIdentityTransform =
-      m[0] == 1.0 &&
+  final bool isIdentityTransform = m[0] == 1.0 &&
       m[1] == 0.0 &&
       m[4] == 0.0 &&
       m[5] == 1.0 &&
@@ -165,7 +164,7 @@ bool isIdentityFloat32ListTransform(Float32List matrix) {
 /// transform. Consider removing the CSS `transform` property from elements
 /// that apply identity transform.
 String float64ListToCssTransform2d(Float32List matrix) {
-  assert (transformKindOf(matrix) != TransformKind.complex);
+  assert(transformKindOf(matrix) != TransformKind.complex);
   return 'matrix(${matrix[0]},${matrix[1]},${matrix[4]},${matrix[5]},${matrix[12]},${matrix[13]})';
 }
 
@@ -279,10 +278,22 @@ void transformLTRB(Matrix4 transform, Float32List ltrb) {
 
   _tempPointMatrix.multiplyTranspose(transform);
 
-  ltrb[0] = math.min(math.min(math.min(_tempPointData[0], _tempPointData[1]), _tempPointData[2]), _tempPointData[3]);
-  ltrb[1] = math.min(math.min(math.min(_tempPointData[4], _tempPointData[5]), _tempPointData[6]), _tempPointData[7]);
-  ltrb[2] = math.max(math.max(math.max(_tempPointData[0], _tempPointData[1]), _tempPointData[2]), _tempPointData[3]);
-  ltrb[3] = math.max(math.max(math.max(_tempPointData[4], _tempPointData[5]), _tempPointData[6]), _tempPointData[7]);
+  ltrb[0] = math.min(
+      math.min(
+          math.min(_tempPointData[0], _tempPointData[1]), _tempPointData[2]),
+      _tempPointData[3]);
+  ltrb[1] = math.min(
+      math.min(
+          math.min(_tempPointData[4], _tempPointData[5]), _tempPointData[6]),
+      _tempPointData[7]);
+  ltrb[2] = math.max(
+      math.max(
+          math.max(_tempPointData[0], _tempPointData[1]), _tempPointData[2]),
+      _tempPointData[3]);
+  ltrb[3] = math.max(
+      math.max(
+          math.max(_tempPointData[4], _tempPointData[5]), _tempPointData[6]),
+      _tempPointData[7]);
 }
 
 /// Returns true if [rect] contains every point that is also contained by the
@@ -300,6 +311,13 @@ bool rectContainsOther(ui.Rect rect, ui.Rect other) {
 /// Counter used for generating clip path id inside an svg <defs> tag.
 int _clipIdCounter = 0;
 
+/// Used for clipping and filter svg resources.
+///
+/// Position needs to be absolute since these svgs are sandwiched between
+/// canvas elements and can cause layout shifts otherwise.
+const String kSvgResourceHeader = '<svg width="0" height="0" '
+    'style="position:absolute">';
+
 /// Converts Path to svg element that contains a clip-path definition.
 ///
 /// Calling this method updates [_clipIdCounter]. The HTML id of the generated
@@ -311,8 +329,7 @@ String _pathToSvgClipPath(ui.Path path,
     double scaleY = 1.0}) {
   _clipIdCounter += 1;
   final StringBuffer sb = StringBuffer();
-  sb.write('<svg width="0" height="0" '
-      'style="position:absolute">');
+  sb.write(kSvgResourceHeader);
   sb.write('<defs>');
 
   final String clipId = 'svgClip$_clipIdCounter';
@@ -420,10 +437,11 @@ const Set<String> _genericFontFamilies = <String>{
 ///
 /// For iOS, default to -apple-system, where it should be available, otherwise
 /// default to Arial. BlinkMacSystemFont is used for Chrome on iOS.
-final String _fallbackFontFamily = _isMacOrIOS ?
-    '-apple-system, BlinkMacSystemFont' : 'Arial';
+final String _fallbackFontFamily =
+    _isMacOrIOS ? '-apple-system, BlinkMacSystemFont' : 'Arial';
 
-bool get _isMacOrIOS => operatingSystem == OperatingSystem.iOs ||
+bool get _isMacOrIOS =>
+    operatingSystem == OperatingSystem.iOs ||
     operatingSystem == OperatingSystem.macOs;
 
 /// Create a font-family string appropriate for CSS.
@@ -439,8 +457,10 @@ String? canonicalizeFontFamily(String? fontFamily) {
     // on sans-serif.
     // Map to San Francisco Text/Display fonts, use -apple-system,
     // BlinkMacSystemFont.
-    if (fontFamily == '.SF Pro Text' || fontFamily == '.SF Pro Display' ||
-        fontFamily == '.SF UI Text' || fontFamily == '.SF UI Display') {
+    if (fontFamily == '.SF Pro Text' ||
+        fontFamily == '.SF Pro Display' ||
+        fontFamily == '.SF UI Text' ||
+        fontFamily == '.SF UI Display') {
       return _fallbackFontFamily;
     }
   }
@@ -474,27 +494,28 @@ void applyWebkitClipFix(html.Element? containerElement) {
   }
 }
 
-final ByteData? _fontChangeMessage = JSONMessageCodec().encodeMessage(<String, dynamic>{'type': 'fontsChange'});
+final ByteData? _fontChangeMessage =
+    JSONMessageCodec().encodeMessage(<String, dynamic>{'type': 'fontsChange'});
 
 // Font load callbacks will typically arrive in sequence, we want to prevent
 // sendFontChangeMessage of causing multiple synchronous rebuilds.
 // This flag ensures we properly schedule a single call to framework.
 bool _fontChangeScheduled = false;
 
 FutureOr<void> sendFontChangeMessage() async {
-  if (EnginePlatformDispatcher.instance._onPlatformMessage != null)
-    if (!_fontChangeScheduled) {
-      _fontChangeScheduled = true;
-      // Batch updates into next animationframe.
-      html.window.requestAnimationFrame((num _) {
-        _fontChangeScheduled = false;
-        EnginePlatformDispatcher.instance.invokeOnPlatformMessage(
-          'flutter/system',
-          _fontChangeMessage,
-              (_) {},
-        );
-      });
-    }
+  if (EnginePlatformDispatcher.instance._onPlatformMessage != null &&
+    !_fontChangeScheduled) {
+    _fontChangeScheduled = true;
+    // Batch updates into next animationframe.
+    html.window.requestAnimationFrame((num _) {
+      _fontChangeScheduled = false;
+      EnginePlatformDispatcher.instance.invokeOnPlatformMessage(
+        'flutter/system',
+        _fontChangeMessage,
+            (_) {},
+      );
+    });
+  }
 }
 
 // Stores matrix in a form that allows zero allocation transforms.
@@ -535,14 +556,12 @@ bool isUnsoundNull(dynamic object) {
 }
 
 bool _offsetIsValid(ui.Offset offset) {
-  assert(offset != null, 'Offset argument was null.'); // ignore: unnecessary_null_comparison
   assert(!offset.dx.isNaN && !offset.dy.isNaN,
       'Offset argument contained a NaN value.');
   return true;
 }
 
 bool _matrix4IsValid(Float32List matrix4) {
-  assert(matrix4 != null, 'Matrix4 argument was null.'); // ignore: unnecessary_null_comparison
   assert(matrix4.length == 16, 'Matrix4 must have 16 entries.');
   return true;
 }