Support enhanced nav updates to link tag integrity (#55163)

Author: SteveSandersonMS

src/Components/Web.JS/src/Rendering/DomMerging/AttributeSync.ts

@@ -7,6 +7,13 @@ export function synchronizeAttributes(destination: Element, source: Element) {
 
   // Skip most of the work in the common case where all attributes are unchanged and are even still in the same order
   if (!attributeSetsAreIdentical(destAttrs, sourceAttrs)) {
+    // Certain element types may have special rules about how to update their attributes,
+    // or might require us to synchronize DOM properties as well as attributes
+    if (destination instanceof HTMLLinkElement || destination instanceof HTMLScriptElement) {
+      destination.integrity = (source as HTMLLinkElement | HTMLScriptElement).integrity;
+    }
+
+    // Now do generic unordered attribute synchronization
     const remainingDestAttrs = new Map<string, Attr>();
     for (const destAttr of destination.attributes as any) {
       remainingDestAttrs.set(destAttr.name, destAttr);

src/Components/test/E2ETest/ServerRenderingTests/EnhancedNavigationTest.cs

@@ -643,6 +643,25 @@ public void CanReceiveNullParameterValueOnEnhancedNavigation(string renderMode)
         Assert.DoesNotContain(logs, log => log.Message.Contains("Error"));
     }
 
+    [Fact]
+    public void CanUpdateHrefOnLinkTagWithIntegrity()
+    {
+        // Represents issue https://github.com/dotnet/aspnetcore/issues/54250
+        // Previously, if the "integrity" attribute appeared after "href", then we'd be unable
+        // to update "href" because the new content wouldn't match the existing "integrity".
+        // This is fixed by ensuring we update "integrity" first in all cases.
+
+        Navigate($"{ServerPathBase}/nav/page-with-link-tag/1");
+
+        var originalH1Elem = Browser.Exists(By.TagName("h1"));
+        Browser.Equal("PageWithLinkTag 1", () => originalH1Elem.Text);
+        Browser.Equal("rgba(255, 0, 0, 1)", () => originalH1Elem.GetCssValue("color"));
+
+        Browser.Exists(By.LinkText("Go to page with link tag 2")).Click();
+        Browser.Equal("PageWithLinkTag 2", () => originalH1Elem.Text);
+        Browser.Equal("rgba(0, 0, 255, 1)", () => originalH1Elem.GetCssValue("color"));
+    }
+
     private void AssertEnhancedUpdateCountEquals(long count)
         => Browser.Equal(count, () => ((IJavaScriptExecutor)Browser).ExecuteScript("return window.enhancedPageUpdateCount;"));
 

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageWithLinkTag1.razor

@@ -0,0 +1,9 @@
+@page "/nav/page-with-link-tag/1"
+
+<h1>PageWithLinkTag 1</h1>
+
+<p>The header should be red</p>
+
+<a href="nav/page-with-link-tag/2">Go to page with link tag 2</a>
+
+<link rel="stylesheet" href="css/cssfile1.css" integrity="sha384-8mci8UV9AaVJGRJs90vuFCcaqfnGDVJaH+Uh1YRQk0Imw3L4+hBzIc4qL+FmyiF0" />

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageWithLinkTag2.razor

@@ -0,0 +1,9 @@
+@page "/nav/page-with-link-tag/2"
+
+<h1>PageWithLinkTag 2</h1>
+
+<p>The header should be blue</p>
+
+<a href="nav/page-with-link-tag/1">Go to page with link tag 1</a>
+
+<link rel="stylesheet" href="css/cssfile2.css" integrity="sha384-sfRwKnaRYdL1d+7xYj26gW0zWRIfmw+134w0KCaG6tGHXTkP+duQxbC9Ouukgv32" />

src/Components/test/testassets/Components.TestServer/wwwroot/css/.gitattributes

@@ -0,0 +1,2 @@
+cssfile1.css eol=lf
+cssfile2.css eol=lf

src/Components/test/testassets/Components.TestServer/wwwroot/css/cssfile1.css

@@ -0,0 +1,4 @@
+/* Used by PageWithLinkTag1 */
+h1 {
+    color: rgba(255, 0, 0, 1);
+}

src/Components/test/testassets/Components.TestServer/wwwroot/css/cssfile2.css

@@ -0,0 +1,4 @@
+/* Used by PageWithLinkTag2 */
+h1 {
+    color: rgba(0, 0, 255, 1);
+}