Special diffing of style attributes

Author: egil

AngleSharp.Diffing.v3.ncrunchsolution

@@ -0,0 +1,6 @@
+<SolutionConfiguration>
+  <Settings>
+    <AllowParallelTestExecution>True</AllowParallelTestExecution>
+    <SolutionConfigured>True</SolutionConfigured>
+  </Settings>
+</SolutionConfiguration>

README.md

@@ -18,7 +18,7 @@ var testHtml = "<p>World, I say hello</p>";
 var diffs = DiffBuilder
     .Compare(controlHtml)
     .WithTest(testHtml)
-    .UseDefaultOptions()
+    .WithDefaultOptions()
     .Build();
 ```
 

docs/Strategies.md

@@ -44,6 +44,7 @@ var diffs = DiffBuilder
     .WithAttributeComparer()
     .WithClassAttributeComparer()
     .WithBooleanAttributeComparer(BooleanAttributeComparision.Strict)
+    .WithStyleAttributeComparer()
     .WithInlineAttributeIgnoreSupport()
     .Build();
 ``` 
@@ -297,7 +298,7 @@ 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.
+Different whitespace rules apply to style sheets (style information) inside `<style>` tags, than to HTML5. This comparer will parse the style information inside `<style>` tags 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.:
 
@@ -382,7 +383,20 @@ var diffs = DiffBuilder
     .Build();
 ```
 
-### Ignore attributes during diffing
+#### Style attribute comparer
+Different whitespace rules apply to style information inside `style="..."` attributes, than to HTML5. This comparer will parse the style information inside `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 `WithStyleAttributeComparer()` method on the `DiffBuilder` class, e.g.:
+
+```csharp
+var diffs = DiffBuilder
+    .Compare(controlHtml)
+    .WithTest(testHtml)
+    .WithStyleAttributeComparer()
+    .Build();
+```
+
+#### Ignore attributes during diffing
 To ignore a specific attribute during comparison, add the `:ignore` postfix to the attribute on the control element. Thus will simply skip comparing the two attributes and not report any differences between them. E.g. to ignore the `class` attribute, do:
 
 ```html

src/Strategies/AttributeStrategies/DiffingStrategyPipelineExtensions.cs

@@ -63,5 +63,14 @@ public static DiffingStrategyPipeline WithInlineAttributeIgnoreSupport(this Diff
             pipeline.AddComparer(IgnoreAttributeComparer.Compare, isSpecializedComparer: true);
             return pipeline;
         }
+
+        /// <summary>
+        /// Enables the special style attributes comparer during diffing.
+        /// </summary>
+        public static DiffingStrategyPipeline WithStyleAttributeComparer(this DiffingStrategyPipeline pipeline)
+        {
+            pipeline.AddComparer(StyleAttributeComparer.Compare, isSpecializedComparer: true);
+            return pipeline;
+        }
     }
 }

src/Strategies/AttributeStrategies/StyleAttributeComparer.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Egil.AngleSharp.Diffing.Core;
+using AngleSharp.Css.Dom;
+using AngleSharp.Css.Parser;
+using AngleSharp.Dom;
+
+namespace Egil.AngleSharp.Diffing.Strategies.AttributeStrategies
+{
+    public static class StyleAttributeComparer
+    {        
+        public static CompareResult Compare(in AttributeComparison comparison, CompareResult currentDecision)
+        {
+            if (currentDecision.IsDecisionFinal()) return currentDecision;
+
+            return IsStyleAttributeComparison(comparison)
+                ? CompareElementStyle(comparison)
+                : currentDecision;
+        }
+
+        private static CompareResult CompareElementStyle(in AttributeComparison comparison)
+        {
+            var (ctrlElm, testElm) = comparison.GetNodesAsElements();
+            var ctrlStyle = ctrlElm.GetStyle();
+            var testStyle = testElm.GetStyle();
+            return ctrlStyle.CssText.Equals(testStyle.CssText, StringComparison.Ordinal)
+                ? CompareResult.Same
+                : CompareResult.Different;
+        }
+
+        private static bool IsStyleAttributeComparison(in AttributeComparison comparison)
+        {
+            return comparison.Control.Attribute.Name.Equals(AttributeNames.Style, StringComparison.Ordinal) && 
+                comparison.Test.Attribute.Name.Equals(AttributeNames.Style, StringComparison.Ordinal);
+        }
+    }
+}

tests/Strategies/AttributeStrategies/StyleAttributeComparerTest.cs

@@ -0,0 +1,38 @@
+using Egil.AngleSharp.Diffing.Core;
+using Shouldly;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Xunit;
+
+namespace Egil.AngleSharp.Diffing.Strategies.AttributeStrategies
+{
+    public class StyleAttributeComparerTest : DiffingTestBase
+    {
+        [Fact(DisplayName = "When attribute is not style the current decision is used")]
+        public void Test001()
+        {
+            var comparison = ToAttributeComparison(@"<p foo=""bar"">", "foo", @"<p foo=""zab"">", "foo");
+            StyleAttributeComparer.Compare(comparison, CompareResult.Different).ShouldBe(CompareResult.Different);
+            StyleAttributeComparer.Compare(comparison, CompareResult.Same).ShouldBe(CompareResult.Same);
+            StyleAttributeComparer.Compare(comparison, CompareResult.DifferentAndBreak).ShouldBe(CompareResult.DifferentAndBreak);
+            StyleAttributeComparer.Compare(comparison, CompareResult.SameAndBreak).ShouldBe(CompareResult.SameAndBreak);
+        }
+
+        [Fact(DisplayName = "When style attributes has different values then Different is returned")]
+        public void Test002()
+        {
+            var comparison = ToAttributeComparison(@"<p style=""color: red"">", "style", @"<p style=""color: black"">", "style"); 
+            StyleAttributeComparer.Compare(comparison, CompareResult.Different).ShouldBe(CompareResult.Different);
+        }
+
+        [Fact(DisplayName = "Comparer should correctly ignore insignificant whitespace")]
+        public void Test003()
+        {
+            var comparison = ToAttributeComparison(@"<p style=""color: red"">", "style", @"<p style=""color:red"">", "style");
+            StyleAttributeComparer.Compare(comparison, CompareResult.Different).ShouldBe(CompareResult.Same);
+        }
+    }
+}