From d2f74249b124b08996e1c498c559972f695ff784 Mon Sep 17 00:00:00 2001
From: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>
Date: Mon, 23 Jul 2018 14:42:38 -0700
Subject: [PATCH] Fix updating attributes on SVG elements. Fixes #934 and #1114

---
 .../src/Rendering/BrowserRenderer.ts                 |  2 +-
 .../Tests/ComponentRenderingTest.cs                  |  4 ++++
 test/testapps/BasicTestApp/SvgComponent.cshtml       | 12 +++++++++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts b/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts
index 0d4b0af817..9da226a6ed 100644
--- a/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts
+++ b/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts
@@ -79,7 +79,7 @@ export class BrowserRenderer {
           const frame = batch.referenceFramesEntry(referenceFrames, frameIndex);
           const siblingIndex = editReader.siblingIndex(edit);
           const element = getLogicalChild(parent, childIndexAtCurrentDepth + siblingIndex);
-          if (element instanceof HTMLElement) {
+          if (element instanceof Element) {
             this.applyAttribute(batch, componentId, element, frame);
           } else {
             throw new Error(`Cannot set attribute on non-element child`);
diff --git a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs b/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
index 6ec4aea5b6..9c8312f04e 100644
--- a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
+++ b/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
@@ -306,6 +306,10 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
 
             var svgCircleElement = appElement.FindElement(By.XPath("//*[local-name()='circle' and namespace-uri()='http://www.w3.org/2000/svg']"));
             Assert.NotNull(svgCircleElement);
+            Assert.Equal("10", svgCircleElement.GetAttribute("r"));
+
+            appElement.FindElement(By.TagName("button")).Click();
+            WaitAssert.Equal("20", () => svgCircleElement.GetAttribute("r"));
         }
 
         [Fact]
diff --git a/test/testapps/BasicTestApp/SvgComponent.cshtml b/test/testapps/BasicTestApp/SvgComponent.cshtml
index ef745967f2..b4c9186145 100644
--- a/test/testapps/BasicTestApp/SvgComponent.cshtml
+++ b/test/testapps/BasicTestApp/SvgComponent.cshtml
@@ -1,3 +1,9 @@
-<svg height="250" width="250">
-    <circle cx="125" cy="125" r="100" fill="red" stroke="black" stroke-width="3" />
-</svg>
\ No newline at end of file
+<svg height="250" width=250>
+    <circle cx="125" cy="125" r=@radius fill="red" stroke="black" stroke-width="3" />
+</svg>
+
+<button onclick=@(() => { radius *= 2; })>Click me</button>
+
+@functions {
+    int radius = 10;
+}