With stylesheet comparer support

Author: egil

docs/Strategies.md

@@ -39,6 +39,7 @@ var diffs = DiffBuilder
     .WithAttributeNameMatcher()
     .WithNodeNameComparer()
     .WithIgnoreElementSupport()
+    .WithStyleSheetComparer()
     .WithTextComparer(WhitespaceOption.Normalize, ignoreCase: false)
     .WithAttributeComparer()
     .WithClassAttributeComparer()
@@ -204,7 +205,7 @@ var diffs = DiffBuilder
     .Build();
 ```
 
-### Ignore element attribute
+#### Ignore element attribute
 If the `diff:ignore="true"` attribute is used on a control element (`="true"` implicit/optional), all their attributes and child nodes are skipped/ignored during comparison, including those of the test element, the control element is matched with.
 
 In this example, the `<h1>` tag, it's attribute and children are considered the same as the element it is matched with:
@@ -228,6 +229,8 @@ var diffs = DiffBuilder
 ### Text (text nodes) strategies
 The built-in text strategies offer a bunch of ways to control how text (text nodes) is handled during the diffing process.
 
+**NOTE:** It is on the issues list to enable a more intelligent, e.g. whitespace aware, comparison of JavaScript (text) inside `<script>`-tags and event-attributes.
+
 #### Whitespace handling
 Whitespace can be a source of false-positives when comparing two HTML fragments. Thus, the whitespace handling strategy offer different ways to deal with it during a comparison.
 
@@ -261,8 +264,6 @@ To configure/override whitespace rules on a specific subtree in the comparison,
 <pre diff:whitespace="RemoveWhitespaceNodes">...</pre>
 ```
 
-**NOTE:** It is on the issues list to deal with whitespace properly inside `<style>` and `<script>`-tags, e.g. inside strings.
-
 #### Perform case-_insensitve_ text comparison
 To compare the text in two text nodes to each other using a case-insensitive comparison, call the `WithTextComparer(ignoreCase: true)` method on a `DiffBuilder` instance, e.g.:
 
@@ -295,6 +296,19 @@ By using the inline attribute `diff:regex` on the element containing the text no
 
 The above  control text would use case-insensitive regular expression to match against a test text string (e.g. "HELLO WORLD 2020").
 
+#### Style sheet text comparer
+Different rules whitespace apply to style sheets (style information) inside `<style>` tags and `style="..."` attributes, than to HTML5. This comparer will parse the style information inside `<style>` tags and `style="..."` attributes and compare the result of the parsing, instead doing a direct string comparison. This should remove false-positives where e.g. insignificant whitespace makes two otherwise equal set of style informations result in a diff.
+
+To add this comparer, use the `WithStyleSheetComparer()` method on the `DiffBuilder` class, e.g.:
+
+```csharp
+var diffs = DiffBuilder
+    .Compare(controlHtml)
+    .WithTest(testHtml)
+    .WithStyleSheetComparer()
+    .Build();
+```
+
 ### Attribute Compare options
 The library supports various ways to perform attribute comparison. 
 

src/Egil.AngleSharp.Diffing.csproj

@@ -12,6 +12,7 @@
 
   <ItemGroup>
     <PackageReference Include="AngleSharp" Version="$(AngleSharpVersion)" />
+    <PackageReference Include="AngleSharp.Css" Version="$(AngleSharpVersion)" />
     <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="$(FxCopAnalyzersVersion)">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

src/Strategies/DiffingStrategyPipelineExtensions.cs

@@ -26,6 +26,7 @@ public static DiffingStrategyPipeline WithDefaultOptions(this DiffingStrategyPip
                 .WithAttributeNameMatcher()
                 .WithNodeNameComparer()
                 .WithIgnoreElementSupport()
+                .WithStyleSheetComparer()
                 .WithTextComparer(WhitespaceOption.Normalize, ignoreCase: false)
                 .WithAttributeComparer()
                 .WithClassAttributeComparer()

src/Strategies/TextNodeStrategies/DiffingStrategyPipelineExtensions.cs

@@ -20,5 +20,13 @@ public static DiffingStrategyPipeline WithTextComparer(this DiffingStrategyPipel
             return pipeline;
         }
 
+        /// <summary>
+        /// Enables the special style-tag style sheet text comparer.
+        /// </summary>
+        public static DiffingStrategyPipeline WithStyleSheetComparer(this DiffingStrategyPipeline pipeline)
+        {
+            pipeline.AddComparer(StyleSheetTextNodeComparer.Compare, isSpecializedComparer: true);
+            return pipeline;
+        }
     }
 }

src/Strategies/TextNodeStrategies/StyleSheetTextNodeComparer.cs

@@ -0,0 +1,55 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using AngleSharp;
+using AngleSharp.Css.Dom;
+using AngleSharp.Css.Parser;
+using AngleSharp.Dom;
+using Egil.AngleSharp.Diffing.Core;
+
+namespace Egil.AngleSharp.Diffing.Strategies.TextNodeStrategies
+{
+    public static class StyleSheetTextNodeComparer
+    {
+        public static CompareResult Compare(in Comparison comparison, CompareResult currentDecision)
+        {
+            if (currentDecision.IsDecisionFinal()) return currentDecision;
+            if (TryGetStyleDeclaretions(comparison, out var controlStyles, out var testStyles))
+                return Compare(controlStyles, testStyles);
+            else
+                return currentDecision;
+        }
+
+        private static bool TryGetStyleDeclaretions(in Comparison comparison, [NotNullWhen(true)]out IStyleSheet? controlStyles, [NotNullWhen(true)]out IStyleSheet? testStyles)
+        {
+            controlStyles = default;
+            testStyles = default;
+
+            if (comparison.TryGetNodesAsType<IText>(out var controlTextNode, out var testTextNode))
+            {
+                var controlParentStyle = controlTextNode.ParentElement as ILinkStyle;
+                var testParentStyle = testTextNode.ParentElement as ILinkStyle;
+                controlStyles = controlParentStyle?.Sheet;
+                testStyles = testParentStyle?.Sheet;
+
+                return controlStyles is { } && testStyles is { };
+            }
+            else
+                return false;
+        }
+
+        private static CompareResult Compare(IStyleSheet controlStyles, IStyleSheet testStyles)
+        {
+            var control = controlStyles.ToCss();
+            var test = testStyles.ToCss();
+
+            return control.Equals(test, StringComparison.Ordinal)
+                ? CompareResult.Same
+                : CompareResult.Different;
+        }
+    }
+}

tests/Core/DiffingTestBase.cs

@@ -7,14 +7,16 @@ namespace Egil.AngleSharp.Diffing.Core
 {
     public abstract class DiffingTestBase
     {
-        private readonly IBrowsingContext _context = BrowsingContext.New();
+        private readonly IBrowsingContext _context;
         private readonly IHtmlParser _htmlParser;
         private readonly IDocument _document;
 
         protected INodeList EmptyNodeList => ToNodeList("");
 
         protected DiffingTestBase()
         {
+            var config = Configuration.Default.WithCss();
+            _context = BrowsingContext.New(config);
             _htmlParser = _context.GetService<IHtmlParser>();
             _document = _context.OpenNewAsync().Result;
         }

tests/Egil.AngleSharp.DiffingTests.csproj

@@ -9,6 +9,7 @@
 
   <ItemGroup>
     <PackageReference Include="AngleSharp" Version="$(AngleSharpVersion)" />
+    <PackageReference Include="AngleSharp.Css" Version="$(AngleSharpVersion)" />
     <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="$(FxCopAnalyzersVersion)">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

tests/Strategies/TextNodeStrategies/StyleSheetTextNodeComparerTest.cs

@@ -0,0 +1,67 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Egil.AngleSharp.Diffing.Core;
+using Shouldly;
+using Xunit;
+
+namespace Egil.AngleSharp.Diffing.Strategies.TextNodeStrategies
+{
+    public class StyleSheetTextNodeComparerTest : TextNodeTestBase
+    {
+        [Fact(DisplayName = "When input node is not a IText node, comparer does not run nor change the current decision")]
+        public void Test000()
+        {
+            var comparison = ToComparison("<p></p>", "<p></p>");
+
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.Different).ShouldBe(CompareResult.Different);
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.DifferentAndBreak).ShouldBe(CompareResult.DifferentAndBreak);
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.Same).ShouldBe(CompareResult.Same);
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.SameAndBreak).ShouldBe(CompareResult.SameAndBreak);
+        }
+
+        [Fact(DisplayName = "When input node is a IText node inside an element that is NOT a style tag, comparer does not run nor change the current decision")]
+        public void Test0001()
+        {
+            var comparison = ToComparison("<p>h1{background:#000;}</p>", "<p>h1{background:#000;}</p>");
+
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.Different).ShouldBe(CompareResult.Different);
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.DifferentAndBreak).ShouldBe(CompareResult.DifferentAndBreak);
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.Same).ShouldBe(CompareResult.Same);
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.SameAndBreak).ShouldBe(CompareResult.SameAndBreak);
+        }
+
+
+        [Fact(DisplayName = "The comparer responses with Different when style information is different")]
+        public void Test001()
+        {
+            var comparison = ToStyleComparison(@"h1{background:#000;}", @"h1{color:#000;}");
+
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.Different).ShouldBe(CompareResult.Different);
+        }
+        
+        [Theory(DisplayName = "The comparer ignores insignificant whitespace")]
+        [InlineData(" ")]
+        [InlineData("  ")]
+        [InlineData("\t")]
+        [InlineData("\n")]
+        [InlineData("\n\r")]
+        public void Test003(string whitespace)
+        {
+            var comparison = ToStyleComparison($@"h1{whitespace}{{{whitespace}color:{whitespace}#000;{whitespace}}}", @"h1{color:#000;}");
+
+            StyleSheetTextNodeComparer.Compare(comparison, CompareResult.Different).ShouldBe(CompareResult.Same);
+        }
+
+        private Comparison ToStyleComparison(string controlStyleText, string testStyleText)
+        {
+            var controlStyle = ToComparisonSource($@"<style type=""text/css"">{controlStyleText}</style>");
+            var controlSource = new ComparisonSource(controlStyle.Node.FirstChild, 0, controlStyle.Path, ComparisonSourceType.Control);
+            var testStyle = ToComparisonSource($@"<style type=""text/css"">{testStyleText}</style>");
+            var testSource = new ComparisonSource(testStyle.Node.FirstChild, 0, testStyle.Path, ComparisonSourceType.Test);
+            return new Comparison(controlSource, testSource);
+        }
+    }
+}