Supporting pseudo-element attribute in css link fallback (#38146)

src/Mvc/Mvc.TagHelpers/src/LinkTagHelper.cs

@@ -29,12 +29,15 @@ namespace Microsoft.AspNetCore.Mvc.TagHelpers;
 [HtmlTargetElement("link", Attributes = FallbackHrefExcludeAttributeName, TagStructure = TagStructure.WithoutEndTag)]
 [HtmlTargetElement("link", Attributes = FallbackTestClassAttributeName, TagStructure = TagStructure.WithoutEndTag)]
 [HtmlTargetElement("link", Attributes = FallbackTestPropertyAttributeName, TagStructure = TagStructure.WithoutEndTag)]
+[HtmlTargetElement("link", Attributes = FallbackTestPseudoElementAttributeName, TagStructure = TagStructure.WithoutEndTag)]
 [HtmlTargetElement("link", Attributes = FallbackTestValueAttributeName, TagStructure = TagStructure.WithoutEndTag)]
 [HtmlTargetElement("link", Attributes = AppendVersionAttributeName, TagStructure = TagStructure.WithoutEndTag)]
 public class LinkTagHelper : UrlResolutionTagHelper
 {
     private static readonly string FallbackJavaScriptResourceName =
         typeof(LinkTagHelper).Namespace + ".compiler.resources.LinkTagHelper_FallbackJavaScript.js";
+    private static readonly string FallbackWithPseudoJavaScriptResourceName =
+        typeof(LinkTagHelper).Namespace + ".compiler.resources.LinkTagHelper_FallbackWithPseudoJavaScript.js";
 
     private const string HrefIncludeAttributeName = "asp-href-include";
     private const string HrefExcludeAttributeName = "asp-href-exclude";
@@ -44,6 +47,7 @@ public class LinkTagHelper : UrlResolutionTagHelper
     private const string FallbackHrefExcludeAttributeName = "asp-fallback-href-exclude";
     private const string FallbackTestClassAttributeName = "asp-fallback-test-class";
     private const string FallbackTestPropertyAttributeName = "asp-fallback-test-property";
+    private const string FallbackTestPseudoElementAttributeName = "asp-fallback-test-pseudo-element";
     private const string FallbackTestValueAttributeName = "asp-fallback-test-value";
     private const string AppendVersionAttributeName = "asp-append-version";
     private const string HrefAttributeName = "href";
@@ -199,6 +203,14 @@ public LinkTagHelper(
     [HtmlAttributeName(FallbackTestPropertyAttributeName)]
     public string FallbackTestProperty { get; set; }
 
+    /// <summary>
+    /// The CSS pseudo-element name to use for the fallback test.
+    /// May be used in conjunction with <see cref="FallbackTestClass"/> and <see cref="FallbackTestValue"/>,
+    /// and either <see cref="FallbackHref"/> or <see cref="FallbackHrefInclude"/>.
+    /// </summary>
+    [HtmlAttributeName(FallbackTestPseudoElementAttributeName)]
+    public string FallbackTestPseudoElement { get; set; }
+
     /// <summary>
     /// The CSS property value to use for the fallback test.
     /// Must be used in conjunction with <see cref="FallbackTestClass"/> and <see cref="FallbackTestProperty"/>,
@@ -358,9 +370,12 @@ private void BuildFallbackBlock(TagHelperAttributeList attributes, TagHelperCont
         // <link /> tag to load the fallback stylesheet if the test CSS property value is found to be false,
         // indicating that the primary stylesheet failed to load.
         // GetEmbeddedJavaScript returns JavaScript to which we add '"{0}","{1}",{2});'
+        // or '"{0}","{1}",{2},{3});' depending an optional pseudo-element parameter.
+        var usePseudoElement = FallbackTestPseudoElement != null;
         builder
             .AppendHtml("<script>")
-            .AppendHtml(JavaScriptResources.GetEmbeddedJavaScript(FallbackJavaScriptResourceName))
+            .AppendHtml(JavaScriptResources.GetEmbeddedJavaScript(usePseudoElement ?
+                FallbackWithPseudoJavaScriptResourceName : FallbackJavaScriptResourceName))
             .AppendHtml("\"")
             .AppendHtml(JavaScriptEncoder.Encode(FallbackTestProperty))
             .AppendHtml("\",\"")
@@ -395,8 +410,15 @@ private void BuildFallbackBlock(TagHelperAttributeList attributes, TagHelperCont
         stringBuilder.Clear();
         var encodedScriptTags = JavaScriptEncoder.Encode(scriptTags);
         builder.AppendHtml(encodedScriptTags);
-
-        builder.AppendHtml("\");</script>");
+        builder.AppendHtml("\"");
+        if (usePseudoElement)
+        {
+            builder
+                .AppendHtml(", \"")
+                .AppendHtml(JavaScriptEncoder.Encode(FallbackTestPseudoElement))
+                .AppendHtml("\"");
+        }
+        builder.AppendHtml(");</script>");
     }
 
     private bool HasStyleSheetLinkType(TagHelperAttributeList attributes)

src/Mvc/Mvc.TagHelpers/src/PublicAPI.Unshipped.txt

@@ -1 +1,3 @@
 #nullable enable
+~Microsoft.AspNetCore.Mvc.TagHelpers.LinkTagHelper.FallbackTestPseudoElement.get -> string
+~Microsoft.AspNetCore.Mvc.TagHelpers.LinkTagHelper.FallbackTestPseudoElement.set -> void

src/Mvc/Mvc.TagHelpers/src/js/LinkTagHelper_FallbackWithPseudoJavaScript.js

@@ -0,0 +1,31 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+(
+ /**
+  * This function finds the previous element (assumed to be meta) and tests its current CSS style using the passed
+  * values and pseudo-element, to determine if a stylesheet was loaded. If not, this function loads
+  * the fallback stylesheet via document.write.
+  *
+  * @param {string} cssTestPropertyName - The name of the CSS property to test.
+  * @param {string} cssTestPropertyValue - The value to test the specified CSS property for.
+  * @param {string[]} fallbackHrefs - The URLs to the stylesheets to load in the case the test fails.
+  * @param {string} extraAttributes - The extra attributes string that should be included on the generated link tags.
+  * @param {string} pseudoElement - An optional string specifying the CSS pseudo-element to match.
+  */
+ function loadFallbackStylesheet(cssTestPropertyName, cssTestPropertyValue, fallbackHrefs, extraAttributes, pseudoElement) {
+    var doc = document,
+        // Find the last script tag on the page which will be this one, as JS executes as it loads
+        scriptElements = doc.getElementsByTagName("SCRIPT"),
+        // Find the meta tag before this script tag, that's the element we're going to test the CSS property on
+        meta = scriptElements[scriptElements.length - 1].previousElementSibling,
+        // Get the current style of the meta tag starting with standards-based API and falling back to <=IE8 API
+        metaStyle = (doc.defaultView && doc.defaultView.getComputedStyle) ?
+            doc.defaultView.getComputedStyle(meta, pseudoElement) : meta.currentStyle,
+        i;
+
+    if (metaStyle && metaStyle[cssTestPropertyName] !== cssTestPropertyValue) {
+        for (i = 0; i < fallbackHrefs.length; i++) {
+            doc.write('<link href="' + fallbackHrefs[i] + '" ' + extraAttributes + '/>');
+        }
+    }
+})();