From c360080016d24a2df81aeed4c901c384c80ab536 Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 09:29:37 -0800
Subject: [PATCH 1/9] Fix shadows for arbitrary paths on physicalshape

---
 lib/web_ui/lib/src/engine/html/clip.dart      | 88 +++++++++++++++----
 .../engine/compositing_golden_test.dart       | 59 +++++++++++++
 2 files changed, 130 insertions(+), 17 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart
index 127327bfcc287..0d7211ce3bdbc 100644
--- a/lib/web_ui/lib/src/engine/html/clip.dart
+++ b/lib/web_ui/lib/src/engine/html/clip.dart
@@ -190,6 +190,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   final ui.Color shadowColor;
   final ui.Clip clipBehavior;
   html.Element? _clipElement;
+  html.Element? _svgElement;
 
   @override
   void recomputeTransformAndClip() {
@@ -214,10 +215,6 @@ class PersistedPhysicalShape extends PersistedContainerSurface
     rootElement!.style.backgroundColor = colorToCssString(color);
   }
 
-  void _applyShadow() {
-    applyCssShadow(rootElement, pathBounds, elevation, shadowColor);
-  }
-
   @override
   html.Element createElement() {
     return super.createElement()..setAttribute('clip-type', 'physical-shape');
@@ -226,7 +223,6 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   @override
   void apply() {
     _applyColor();
-    _applyShadow();
     _applyShape();
   }
 
@@ -251,6 +247,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
       if (clipBehavior != ui.Clip.none) {
         style.overflow = 'hidden';
       }
+      applyCssShadow(rootElement, pathBounds, elevation, shadowColor);
       return;
     } else {
       final ui.Rect? rect = path.toRect();
@@ -268,6 +265,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
         if (clipBehavior != ui.Clip.none) {
           style.overflow = 'hidden';
         }
+        applyCssShadow(rootElement, pathBounds, elevation, shadowColor);
         return;
       } else {
         final ui.Rect? ovalRect = path.toCircle();
@@ -291,26 +289,57 @@ class PersistedPhysicalShape extends PersistedContainerSurface
           if (clipBehavior != ui.Clip.none) {
             style.overflow = 'hidden';
           }
+          applyCssShadow(rootElement, pathBounds, elevation, shadowColor);
           return;
         }
       }
     }
 
+    /// If code reaches this point, we have a path we want to clip against and
+    /// potentially have a shadow due to material surface elevation.
+    ///
+    /// When there is no shadow we can simply clip a div with a background
+    /// color using an svg clip path.
+    ///
+    /// Otherwise we need to paint a svg element for the path and clip
+    /// contents against same path for shadow to work since box-shadow doesn't
+    /// take clip-path into account.
+
     final String svgClipPath = _pathToSvgClipPath(path,
-        offsetX: -pathBounds.left,
-        offsetY: -pathBounds.top,
-        scaleX: 1.0 / pathBounds.width,
-        scaleY: 1.0 / pathBounds.height);
+        offsetX: elevation == 0.0 ? -pathBounds.left : 0.0,
+        offsetY: elevation == 0.0 ? -pathBounds.top : 0.0,
+        scaleX: elevation == 0.0 ? 1.0 / pathBounds.width : 1.0 / pathBounds.right,
+        scaleY: elevation == 0.0 ? 1.0 / pathBounds.height : 1.0 / pathBounds.bottom);
     // If apply is called multiple times (without update) , remove prior
-    // svg clip element.
+    // svg clip and render elements.
     _clipElement?.remove();
+    _svgElement?.remove();
     _clipElement =
         html.Element.html(svgClipPath, treeSanitizer: _NullTreeSanitizer());
     domRenderer.append(rootElement!, _clipElement!);
+    if (elevation == 0.0) {
+      DomRenderer.setElementStyle(
+          rootElement!, 'clip-path', 'url(#svgClip$_clipIdCounter)');
+      DomRenderer.setElementStyle(
+          rootElement!, '-webkit-clip-path', 'url(#svgClip$_clipIdCounter)');
+      final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
+      rootElementStyle
+        ..overflow = ''
+        ..left = '${pathBounds.left}px'
+        ..top = '${pathBounds.top}px'
+        ..width = '${pathBounds.width}px'
+        ..height = '${pathBounds.height}px'
+        ..borderRadius = '';
+      childContainer!.style
+        ..left = '-${pathBounds.left}px'
+        ..top = '-${pathBounds.top}px';
+      return;
+    }
+
     DomRenderer.setElementStyle(
-        rootElement!, 'clip-path', 'url(#svgClip$_clipIdCounter)');
+        childContainer!, 'clip-path', 'url(#svgClip$_clipIdCounter)');
     DomRenderer.setElementStyle(
-        rootElement!, '-webkit-clip-path', 'url(#svgClip$_clipIdCounter)');
+        childContainer!, '-webkit-clip-path', 'url(#svgClip$_clipIdCounter)');
     final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
     rootElementStyle
       ..overflow = ''
@@ -321,7 +350,27 @@ class PersistedPhysicalShape extends PersistedContainerSurface
       ..borderRadius = '';
     childContainer!.style
       ..left = '-${pathBounds.left}px'
-      ..top = '-${pathBounds.top}px';
+      ..top = '-${pathBounds.top}px'
+      ..width = '${pathBounds.right}px'
+      ..height = '${pathBounds.bottom}px';
+
+    final ui.Rect pathBounds2 = path.getBounds();
+    _svgElement = _pathToSvgElement(
+        path, SurfacePaintData()..color = color, '${pathBounds2.right}', '${pathBounds2.bottom}');
+    /// Render element behind the clipped content.
+    rootElement!.insertBefore(_svgElement!, childContainer);
+
+    final SurfaceShadowData shadow = computeShadow(pathBounds, elevation)!;
+    final ui.Color boxShadowColor = toShadowColor(shadowColor);
+    _svgElement!.style
+        ..filter =
+        'drop-shadow(${shadow.offset.dx}px ${shadow.offset.dy}px '
+        '${shadow.blurWidth}px '
+        'rgba(${boxShadowColor.red}, ${boxShadowColor.green}, '
+        '${boxShadowColor.blue}, ${boxShadowColor.alpha / 255}))'
+      ..transform = 'translate(-${pathBounds2.left}px, -${pathBounds2.top}px)';
+
+    rootElement!.style.backgroundColor = '';
   }
 
   @override
@@ -330,15 +379,16 @@ class PersistedPhysicalShape extends PersistedContainerSurface
     if (oldSurface.color != color) {
       _applyColor();
     }
-    if (oldSurface.elevation != elevation ||
+    if (oldSurface.path != path || oldSurface.elevation != elevation ||
         oldSurface.shadowColor != shadowColor) {
-      _applyShadow();
-    }
-    if (oldSurface.path != path) {
       oldSurface._clipElement?.remove();
       oldSurface._clipElement = null;
+      oldSurface._svgElement?.remove();
+      oldSurface._svgElement = null;
       _clipElement?.remove();
       _clipElement = null;
+      _svgElement?.remove();
+      _svgElement = null;
       // Reset style on prior element since we may have switched between
       // rect/rrect and arbitrary path.
       DomRenderer.setElementStyle(rootElement!, 'clip-path', '');
@@ -351,6 +401,10 @@ class PersistedPhysicalShape extends PersistedContainerSurface
         domRenderer.append(rootElement!, _clipElement!);
       }
       oldSurface._clipElement = null;
+      _svgElement = oldSurface._svgElement;
+      if (_svgElement != null) {
+        rootElement!.insertBefore(_svgElement!, childContainer);
+      }
     }
   }
 }
diff --git a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
index 18fd6c77ef647..e68d0f70e9d2c 100644
--- a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
@@ -111,6 +111,65 @@ void testMain() async {
         region: region);
   });
 
+  test('pushPhysicalShape with path and elevation', () async {
+    Path cutCornersButton = Path()
+      ..moveTo(15, 10)
+      ..lineTo(60, 10)
+      ..lineTo(60, 60)
+      ..lineTo(15, 60)
+      ..lineTo(10, 55)
+      ..lineTo(10, 15);
+
+    final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
+    builder.pushPhysicalShape(
+      path: cutCornersButton,
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFFA0FFFF),
+      elevation: 2,
+    );
+    _drawTestPicture(builder);
+    builder.pop();
+
+    builder.pushOffset(70, 0);
+    builder.pushPhysicalShape(
+      path: cutCornersButton,
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFFA0FFFF),
+      elevation: 8,
+    );
+    _drawTestPicture(builder);
+    builder.pop();
+    builder.pop();
+
+    builder.pushOffset(140, 0);
+    builder.pushPhysicalShape(
+      path: Path()..addOval(Rect.fromLTRB(10, 10, 60, 60)),
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFFA0FFFF),
+      elevation: 4,
+    );
+    _drawTestPicture(builder);
+    builder.pop();
+    builder.pop();
+
+    builder.pushOffset(210, 0);
+    builder.pushPhysicalShape(
+      path: Path()..addRRect(RRect.fromRectAndRadius(
+          Rect.fromLTRB(10, 10, 60, 60), Radius.circular(10.0))),
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFFA0FFFF),
+      elevation: 4,
+    );
+    _drawTestPicture(builder);
+    builder.pop();
+    builder.pop();
+
+    html.document.body.append(builder.build().webOnlyRootElement);
+
+    await matchGoldenFile('compositing_physical_shape_path.png',
+        region: region);
+  });
+
   test('pushImageFilter', () async {
     final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
     builder.pushImageFilter(

From f03399e840aa0883c1af46412c3bc880f86647cb Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 09:38:57 -0800
Subject: [PATCH 2/9] cleanup

---
 lib/web_ui/lib/src/engine/html/clip.dart | 27 +++++++++++++++++-------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart
index 0d7211ce3bdbc..fafa979727082 100644
--- a/lib/web_ui/lib/src/engine/html/clip.dart
+++ b/lib/web_ui/lib/src/engine/html/clip.dart
@@ -304,14 +304,25 @@ class PersistedPhysicalShape extends PersistedContainerSurface
     /// Otherwise we need to paint a svg element for the path and clip
     /// contents against same path for shadow to work since box-shadow doesn't
     /// take clip-path into account.
-
-    final String svgClipPath = _pathToSvgClipPath(path,
-        offsetX: elevation == 0.0 ? -pathBounds.left : 0.0,
-        offsetY: elevation == 0.0 ? -pathBounds.top : 0.0,
-        scaleX: elevation == 0.0 ? 1.0 / pathBounds.width : 1.0 / pathBounds.right,
-        scaleY: elevation == 0.0 ? 1.0 / pathBounds.height : 1.0 / pathBounds.bottom);
-    // If apply is called multiple times (without update) , remove prior
-    // svg clip and render elements.
+    ///
+    /// Webkit has a bug when applying clip-path on an element that has
+    /// position: absolute and transform. To place clipping rectangle correctly
+    /// we size the inner container to cover full pathBounds instead of sizing
+    /// to clipping rect bounds (which is the case for elevation == 0.0 where
+    /// we shift outer/inner clip area instead to position clip-path).
+    final String svgClipPath = elevation == 0.0 ?
+        _pathToSvgClipPath(path,
+            offsetX: -pathBounds.left,
+            offsetY: -pathBounds.top,
+            scaleX: 1.0 / pathBounds.width,
+            scaleY: 1.0 / pathBounds.height)
+        : _pathToSvgClipPath(path,
+            offsetX: 0.0,
+            offsetY: 0.0,
+            scaleX: 1.0 / pathBounds.right,
+            scaleY: 1.0 / pathBounds.bottom);
+    /// If apply is called multiple times (without update) , remove prior
+    /// svg clip and render elements.
     _clipElement?.remove();
     _svgElement?.remove();
     _clipElement =

From 269754401bb6ebff39c9e61bb875ba8dabbc6a36 Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 10:35:58 -0800
Subject: [PATCH 3/9] improve clip-path code paths

---
 lib/web_ui/lib/src/engine/dom_renderer.dart | 15 ++++++++++++++
 lib/web_ui/lib/src/engine/html/clip.dart    | 22 ++++++---------------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/dom_renderer.dart b/lib/web_ui/lib/src/engine/dom_renderer.dart
index 891f2c84320f3..c3b90a881d362 100644
--- a/lib/web_ui/lib/src/engine/dom_renderer.dart
+++ b/lib/web_ui/lib/src/engine/dom_renderer.dart
@@ -182,6 +182,21 @@ class DomRenderer {
     }
   }
 
+  static void setClipPath(html.Element element, String? value) {
+    if (browserEngine == BrowserEngine.webkit) {
+      if (value == null) {
+        element.style.removeProperty('-webkit-clip-path');
+      } else {
+        element.style.setProperty('-webkit-clip-path', value);
+      }
+    }
+    if (value == null) {
+      element.style.removeProperty('clip-path');
+    } else {
+      element.style.setProperty('clip-path', value);
+    }
+  }
+
   static void setElementTransform(html.Element element, String transformValue) {
     js_util.setProperty(
         js_util.getProperty(element, 'style'), 'transform', transformValue);
diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart
index fafa979727082..c9ecb0457cf29 100644
--- a/lib/web_ui/lib/src/engine/html/clip.dart
+++ b/lib/web_ui/lib/src/engine/html/clip.dart
@@ -299,9 +299,9 @@ class PersistedPhysicalShape extends PersistedContainerSurface
     /// potentially have a shadow due to material surface elevation.
     ///
     /// When there is no shadow we can simply clip a div with a background
-    /// color using an svg clip path.
+    /// color using a svg clip path.
     ///
-    /// Otherwise we need to paint a svg element for the path and clip
+    /// Otherwise we need to paint svg element for the path and clip
     /// contents against same path for shadow to work since box-shadow doesn't
     /// take clip-path into account.
     ///
@@ -329,10 +329,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
         html.Element.html(svgClipPath, treeSanitizer: _NullTreeSanitizer());
     domRenderer.append(rootElement!, _clipElement!);
     if (elevation == 0.0) {
-      DomRenderer.setElementStyle(
-          rootElement!, 'clip-path', 'url(#svgClip$_clipIdCounter)');
-      DomRenderer.setElementStyle(
-          rootElement!, '-webkit-clip-path', 'url(#svgClip$_clipIdCounter)');
+      DomRenderer.setClipPath(rootElement!, 'url(#svgClip$_clipIdCounter)');
       final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
       rootElementStyle
         ..overflow = ''
@@ -347,10 +344,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
       return;
     }
 
-    DomRenderer.setElementStyle(
-        childContainer!, 'clip-path', 'url(#svgClip$_clipIdCounter)');
-    DomRenderer.setElementStyle(
-        childContainer!, '-webkit-clip-path', 'url(#svgClip$_clipIdCounter)');
+    DomRenderer.setClipPath(childContainer!, 'url(#svgClip$_clipIdCounter)');
     final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
     rootElementStyle
       ..overflow = ''
@@ -402,8 +396,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
       _svgElement = null;
       // Reset style on prior element since we may have switched between
       // rect/rrect and arbitrary path.
-      DomRenderer.setElementStyle(rootElement!, 'clip-path', '');
-      DomRenderer.setElementStyle(rootElement!, '-webkit-clip-path', '');
+      DomRenderer.setClipPath(rootElement!, '');
       _applyShape();
     } else {
       // Reuse clipElement from prior surface.
@@ -481,10 +474,7 @@ String createSvgClipDef(html.HtmlElement element, ui.Path clipPath) {
   final ui.Rect pathBounds = clipPath.getBounds();
   final String svgClipPath = _pathToSvgClipPath(clipPath,
       scaleX: 1.0 / pathBounds.right, scaleY: 1.0 / pathBounds.bottom);
-  DomRenderer.setElementStyle(
-      element, 'clip-path', 'url(#svgClip$_clipIdCounter)');
-  DomRenderer.setElementStyle(
-      element, '-webkit-clip-path', 'url(#svgClip$_clipIdCounter)');
+  DomRenderer.setClipPath(element, 'url(#svgClip$_clipIdCounter)');
   // We need to set width and height for the clipElement to cover the
   // bounds of the path since browsers such as Safari and Edge
   // seem to incorrectly intersect the element bounding rect with

From 0506afc9e601f182f785b5e21f047a3fbf82054c Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 10:42:36 -0800
Subject: [PATCH 4/9] Add webkit bug link

---
 lib/web_ui/lib/src/engine/html/clip.dart | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart
index c9ecb0457cf29..617829022c678 100644
--- a/lib/web_ui/lib/src/engine/html/clip.dart
+++ b/lib/web_ui/lib/src/engine/html/clip.dart
@@ -306,7 +306,9 @@ class PersistedPhysicalShape extends PersistedContainerSurface
     /// take clip-path into account.
     ///
     /// Webkit has a bug when applying clip-path on an element that has
-    /// position: absolute and transform. To place clipping rectangle correctly
+    /// position: absolute and transform
+    /// (https://bugs.webkit.org/show_bug.cgi?id=141731).
+    /// To place clipping rectangle correctly
     /// we size the inner container to cover full pathBounds instead of sizing
     /// to clipping rect bounds (which is the case for elevation == 0.0 where
     /// we shift outer/inner clip area instead to position clip-path).

From b397878269bf6d4f550b2285a1777b39732e19b5 Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 11:19:31 -0800
Subject: [PATCH 5/9] address reviewer comments

---
 lib/web_ui/lib/src/engine/html/clip.dart      |  13 +-
 .../engine/compositing_golden_test.dart       | 118 ++++++++++++++++++
 2 files changed, 123 insertions(+), 8 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart
index 617829022c678..f9c20fc4c6556 100644
--- a/lib/web_ui/lib/src/engine/html/clip.dart
+++ b/lib/web_ui/lib/src/engine/html/clip.dart
@@ -222,11 +222,11 @@ class PersistedPhysicalShape extends PersistedContainerSurface
 
   @override
   void apply() {
-    _applyColor();
     _applyShape();
   }
 
   void _applyShape() {
+    _applyColor();
     // Handle special case of round rect physical shape mapping to
     // rounded div.
     final ui.RRect? roundRect = path.toRoundedRect();
@@ -312,8 +312,8 @@ class PersistedPhysicalShape extends PersistedContainerSurface
     /// we size the inner container to cover full pathBounds instead of sizing
     /// to clipping rect bounds (which is the case for elevation == 0.0 where
     /// we shift outer/inner clip area instead to position clip-path).
-    final String svgClipPath = elevation == 0.0 ?
-        _pathToSvgClipPath(path,
+    final String svgClipPath = elevation == 0.0
+        ? _pathToSvgClipPath(path,
             offsetX: -pathBounds.left,
             offsetY: -pathBounds.top,
             scaleX: 1.0 / pathBounds.width,
@@ -323,7 +323,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
             offsetY: 0.0,
             scaleX: 1.0 / pathBounds.right,
             scaleY: 1.0 / pathBounds.bottom);
-    /// If apply is called multiple times (without update) , remove prior
+    /// If apply is called multiple times (without update), remove prior
     /// svg clip and render elements.
     _clipElement?.remove();
     _svgElement?.remove();
@@ -383,11 +383,8 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   @override
   void update(PersistedPhysicalShape oldSurface) {
     super.update(oldSurface);
-    if (oldSurface.color != color) {
-      _applyColor();
-    }
     if (oldSurface.path != path || oldSurface.elevation != elevation ||
-        oldSurface.shadowColor != shadowColor) {
+        oldSurface.shadowColor != shadowColor || oldSurface.color != color) {
       oldSurface._clipElement?.remove();
       oldSurface._clipElement = null;
       oldSurface._svgElement?.remove();
diff --git a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
index e68d0f70e9d2c..f71e26396544b 100644
--- a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
@@ -170,6 +170,124 @@ void testMain() async {
         region: region);
   });
 
+  test('pushPhysicalShape should update across frames', () async {
+    Path cutCornersButton = Path()
+      ..moveTo(15, 10)
+      ..lineTo(60, 10)
+      ..lineTo(60, 60)
+      ..lineTo(15, 60)
+      ..lineTo(10, 55)
+      ..lineTo(10, 15);
+
+    /// Start with shape that has elevation and red color.
+    final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
+    EngineLayer oldShapeLayer = builder.pushPhysicalShape(
+      path: cutCornersButton,
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFFFF0000),
+      elevation: 2,
+    );
+    _drawTestPicture(builder);
+    builder.pop();
+
+    html.Element viewElement = builder.build().webOnlyRootElement;
+    html.document.body.append(viewElement);
+    await matchGoldenFile('compositing_physical_update_1.png',
+        region: region);
+    viewElement.remove();
+
+    /// Update color to green.
+    final SurfaceSceneBuilder builder2 = SurfaceSceneBuilder();
+    EngineLayer oldShapeLayer2 = builder2.pushPhysicalShape(
+      path: cutCornersButton,
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFF00FF00),
+      elevation: 2,
+      oldLayer: oldShapeLayer,
+    );
+    _drawTestPicture(builder2);
+    builder2.pop();
+
+    html.Element viewElement2 = builder2.build().webOnlyRootElement;
+    html.document.body.append(viewElement2);
+    await matchGoldenFile('compositing_physical_update_2.png',
+        region: region);
+    viewElement2.remove();
+
+    /// Update elevation.
+    final SurfaceSceneBuilder builder3 = SurfaceSceneBuilder();
+    EngineLayer oldShapeLayer3 = builder3.pushPhysicalShape(
+      path: cutCornersButton,
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFF00FF00),
+      elevation: 6,
+      oldLayer: oldShapeLayer2,
+    );
+    _drawTestPicture(builder3);
+    builder3.pop();
+
+    html.Element viewElement3 = builder3.build().webOnlyRootElement;
+    html.document.body.append(viewElement3);
+    await matchGoldenFile('compositing_physical_update_3.png',
+        region: region);
+    viewElement3.remove();
+
+    /// Update shape from arbitrary path to rect.
+    final SurfaceSceneBuilder builder4 = SurfaceSceneBuilder();
+    EngineLayer oldShapeLayer4 = builder4.pushPhysicalShape(
+      path: Path()..addOval(Rect.fromLTRB(10, 10, 60, 60)),
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFF00FF00),
+      elevation: 6,
+      oldLayer: oldShapeLayer3,
+    );
+    _drawTestPicture(builder4);
+    builder4.pop();
+
+    html.Element viewElement4 = builder4.build().webOnlyRootElement;
+    html.document.body.append(viewElement4);
+    await matchGoldenFile('compositing_physical_update_4.png',
+        region: region);
+    viewElement4.remove();
+
+    /// Update shape back to arbitrary path.
+    final SurfaceSceneBuilder builder5 = SurfaceSceneBuilder();
+    EngineLayer oldShapeLayer5 = builder5.pushPhysicalShape(
+      path: cutCornersButton,
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFF00FF00),
+      elevation: 6,
+      oldLayer: oldShapeLayer4,
+    );
+    _drawTestPicture(builder5);
+    builder5.pop();
+
+    html.Element viewElement5 = builder5.build().webOnlyRootElement;
+    html.document.body.append(viewElement5);
+    await matchGoldenFile('compositing_physical_update_3.png',
+         region: region);
+    viewElement5.remove();
+
+    /// Update shadow color.
+    final SurfaceSceneBuilder builder6 = SurfaceSceneBuilder();
+    EngineLayer oldShapeLayer6 = builder6.pushPhysicalShape(
+      path: cutCornersButton,
+      clipBehavior: Clip.hardEdge,
+      color: const Color(0xFF00FF00),
+      shadowColor: const Color(0xFFFF0000),
+      elevation: 6,
+      oldLayer: oldShapeLayer5,
+    );
+    _drawTestPicture(builder6);
+    builder6.pop();
+
+    html.Element viewElement6 = builder6.build().webOnlyRootElement;
+    html.document.body.append(viewElement6);
+    await matchGoldenFile('compositing_physical_update_5.png',
+        region: region);
+    viewElement6.remove();
+  });
+
   test('pushImageFilter', () async {
     final SurfaceSceneBuilder builder = SurfaceSceneBuilder();
     builder.pushImageFilter(

From 88ba2430597898a36b2b6514a8acbf0b008225bc Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 11:41:52 -0800
Subject: [PATCH 6/9] update golden locks

---
 lib/web_ui/dev/goldens_lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml
index c975dc3d2f50d..1b80d23509540 100644
--- a/lib/web_ui/dev/goldens_lock.yaml
+++ b/lib/web_ui/dev/goldens_lock.yaml
@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 999507db8c924635a605325252702bad661e2ad2
+revision: b85f9093e6bc6d4e7cbb7f97491667c143c4a360

From 3bfaf193bf20201ffc74749d369efcf271328530 Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 13:27:01 -0800
Subject: [PATCH 7/9] adjust maxdiffrate for safari shadow

---
 .../test/golden_tests/engine/compositing_golden_test.dart     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
index f71e26396544b..3f06528134212 100644
--- a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
@@ -229,7 +229,7 @@ void testMain() async {
     html.Element viewElement3 = builder3.build().webOnlyRootElement;
     html.document.body.append(viewElement3);
     await matchGoldenFile('compositing_physical_update_3.png',
-        region: region);
+        region: region, maxDiffRatePercent: 0.4);
     viewElement3.remove();
 
     /// Update shape from arbitrary path to rect.
@@ -265,7 +265,7 @@ void testMain() async {
     html.Element viewElement5 = builder5.build().webOnlyRootElement;
     html.document.body.append(viewElement5);
     await matchGoldenFile('compositing_physical_update_3.png',
-         region: region);
+         region: region, maxDiffRatePercent: 0.4);
     viewElement5.remove();
 
     /// Update shadow color.

From 934cd022677ed8831993a46d6977bbc322b2cfec Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Thu, 21 Jan 2021 13:27:56 -0800
Subject: [PATCH 8/9] Fix unused local var error

---
 .../test/golden_tests/engine/compositing_golden_test.dart       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
index 3f06528134212..545258a83021c 100644
--- a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
@@ -270,7 +270,7 @@ void testMain() async {
 
     /// Update shadow color.
     final SurfaceSceneBuilder builder6 = SurfaceSceneBuilder();
-    EngineLayer oldShapeLayer6 = builder6.pushPhysicalShape(
+    builder6.pushPhysicalShape(
       path: cutCornersButton,
       clipBehavior: Clip.hardEdge,
       color: const Color(0xFF00FF00),

From 45138a9cefe204fc719a7e99ff9803bbf1ba041a Mon Sep 17 00:00:00 2001
From: ferhatb <ferhat@gmail.com>
Date: Fri, 22 Jan 2021 13:09:48 -0800
Subject: [PATCH 9/9] update diffrate

---
 .../test/golden_tests/engine/compositing_golden_test.dart       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
index 545258a83021c..8657c53255a82 100644
--- a/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart
@@ -229,7 +229,7 @@ void testMain() async {
     html.Element viewElement3 = builder3.build().webOnlyRootElement;
     html.document.body.append(viewElement3);
     await matchGoldenFile('compositing_physical_update_3.png',
-        region: region, maxDiffRatePercent: 0.4);
+        region: region, maxDiffRatePercent: 0.8);
     viewElement3.remove();
 
     /// Update shape from arbitrary path to rect.