[canvaskit] Use DirectionalLight_Shadow flag for drawing shadows (flu…

…tter#46292)

Use the DirectionalLight_Shadow flag when drawing shadows in CanvasKit.
This fixes bugs with drawing shadows in tests with different device
pixel ratios.

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide] and the [C++,
Objective-C, Java style guides].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I added new tests to check the change I am making or feature I am
adding, or the PR is [test-exempt]. See [testing the engine] for
instructions on writing and running engine tests.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I signed the [CLA].
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#overview
[Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene
[test-exempt]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[C++, Objective-C, Java style guides]:
https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
[testing the engine]:
https://github.com/flutter/flutter/wiki/Testing-the-engine
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes
[Discord]: https://github.com/flutter/flutter/wiki/Chat

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

@@ -73,10 +73,10 @@ class SkiaShadowFlags {
 // material spec.
 const double ckShadowAmbientAlpha = 0.039;
 const double ckShadowSpotAlpha = 0.25;
-const double ckShadowLightRadius = 1.1;
-const double ckShadowLightHeight = 600.0;
 const double ckShadowLightXOffset = 0;
 const double ckShadowLightYOffset = -450;
+const double ckShadowLightHeight = 600;
+const double ckShadowLightRadius = 800;
 const double ckShadowLightXTangent = ckShadowLightXOffset / ckShadowLightHeight;
 const double ckShadowLightYTangent = ckShadowLightYOffset / ckShadowLightHeight;
 
@@ -161,13 +161,15 @@ void drawSkShadow(
   bool transparentOccluder,
   double devicePixelRatio,
 ) {
-  final int flags = transparentOccluder
+  int flags = transparentOccluder
       ? SkiaShadowFlags.kTransparentOccluderShadowFlags
       : SkiaShadowFlags.kDefaultShadowFlags;
+  flags |= SkiaShadowFlags.kDirectionalLight_ShadowFlag;
 
   final ui.Color inAmbient =
       color.withAlpha((color.alpha * ckShadowAmbientAlpha).round());
-  final ui.Color inSpot = color.withAlpha((color.alpha * ckShadowSpotAlpha).round());
+  final ui.Color inSpot =
+      color.withAlpha((color.alpha * ckShadowSpotAlpha).round());
 
   final SkTonalColors inTonalColors = SkTonalColors(
     ambient: makeFreshSkColor(inAmbient),
@@ -180,10 +182,10 @@ void drawSkShadow(
     path.skiaObject,
     Float32List(3)..[2] = devicePixelRatio * elevation,
     Float32List(3)
-      ..[0] = ckShadowLightXOffset
-      ..[1] = ckShadowLightYOffset
-      ..[2] = devicePixelRatio * ckShadowLightHeight,
-    devicePixelRatio * ckShadowLightRadius,
+      ..[0] = 0
+      ..[1] = -1
+      ..[2] = 1,
+    ckShadowLightRadius / ckShadowLightHeight,
     tonalColors.ambient,
     tonalColors.spot,
     flags.toDouble(),