Prepared computation model

src/AngleSharp.Css.Tests/Extensions/Nesting.cs

@@ -22,7 +22,7 @@ namespace AngleSharp.Css.Tests.Extensions
             var element = document.QuerySelector(".bar");
             var style = window.GetComputedStyle(element);
 
-            Assert.AreEqual("1.4rem", style.GetFontSize());
+            Assert.AreEqual("22.4px", style.GetFontSize());
         }
 
         [Test]
@@ -39,7 +39,7 @@ namespace AngleSharp.Css.Tests.Extensions
             var element = document.QuerySelector(".bar");
             var style = window.GetComputedStyle(element);
 
-            Assert.AreEqual("1.4rem", style.GetFontSize());
+            Assert.AreEqual("22.4px", style.GetFontSize());
         }
 
         [Test]
@@ -60,7 +60,7 @@ namespace AngleSharp.Css.Tests.Extensions
             var element = document.QuerySelector(".bar");
             var style = window.GetComputedStyle(element);
 
-            Assert.AreEqual("1.4rem", style.GetFontSize());
+            Assert.AreEqual("22.4px", style.GetFontSize());
         }
 
         [Test]

src/AngleSharp.Css/Declarations/ContentDeclaration.cs

@@ -8,6 +8,7 @@ namespace AngleSharp.Css.Declarations
     using AngleSharp.Text;
     using System;
     using System.Collections.Generic;
+    using System.Linq;
 
     static class ContentDeclaration
     {
@@ -21,7 +22,7 @@ namespace AngleSharp.Css.Declarations
 
         sealed class ContentValueConverter : IValueConverter
         {
-            private static readonly Dictionary<String, IContentMode> ContentModes = new(StringComparer.OrdinalIgnoreCase)
+            private static readonly Dictionary<String, ContentMode> ContentModes = new(StringComparer.OrdinalIgnoreCase)
             {
                 { CssKeywords.OpenQuote, new OpenQuoteContentMode() },
                 { CssKeywords.NoOpenQuote, new NoOpenQuoteContentMode() },
@@ -117,86 +118,86 @@ namespace AngleSharp.Css.Declarations
                 }
 
                 public String CssText => _modes.Length == 0 ? CssKeywords.None : _modes.Join(" ");
+
+                public ICssValue Compute(ICssComputeContext context)
+                {
+                    var modes = _modes.Select(mode => mode.Compute(context)).ToArray();
+                    return new ContentValue(modes);
+                }
             }
 
-            private interface IContentMode : ICssValue
+            private abstract class ContentMode : ICssValue
             {
-                String Stringify(IElement element);
+                public String CssText => GetCssText();
+
+                public abstract String Stringify(IElement element);
+
+                public abstract String GetCssText();
+
+                ICssValue ICssValue.Compute(ICssComputeContext context)
+                {
+                    return this;
+                }
             }
 
             /// <summary>
             /// Computes to none for the :before and :after pseudo-elements.
             /// </summary>
-            private sealed class NormalContentMode : IContentMode
+            private sealed class NormalContentMode : ContentMode
             {
-                public String CssText => CssKeywords.Normal;
+                public override String GetCssText() => CssKeywords.Normal;
 
-                public String Stringify(IElement element)
-                {
-                    return String.Empty;
-                }
+                public override String Stringify(IElement element) => String.Empty;
             }
 
             /// <summary>
             /// The value is replaced by the open quote string from the quotes
             /// property.
             /// </summary>
-            private sealed class OpenQuoteContentMode : IContentMode
+            private sealed class OpenQuoteContentMode : ContentMode
             {
-                public String CssText => CssKeywords.OpenQuote;
+                public override String GetCssText() => CssKeywords.OpenQuote;
 
-                public String Stringify(IElement element)
-                {
-                    return String.Empty;
-                }
+                public override String Stringify(IElement element) => String.Empty;
             }
 
             /// <summary>
             /// The value is replaced by the close string from the quotes
             /// property.
             /// </summary>
-            private sealed class CloseQuoteContentMode : IContentMode
+            private sealed class CloseQuoteContentMode : ContentMode
             {
-                public String CssText => CssKeywords.CloseQuote;
+                public override String GetCssText() => CssKeywords.CloseQuote;
 
-                public String Stringify(IElement element)
-                {
-                    return String.Empty;
-                }
+                public override String Stringify(IElement element) => String.Empty;
             }
 
             /// <summary>
             /// Introduces no content, but increments the level of nesting for
             /// quotes.
             /// </summary>
-            private sealed class NoOpenQuoteContentMode : IContentMode
+            private sealed class NoOpenQuoteContentMode : ContentMode
             {
-                public String CssText => CssKeywords.NoOpenQuote;
+                public override String GetCssText() => CssKeywords.NoOpenQuote;
 
-                public String Stringify(IElement element)
-                {
-                    return String.Empty;
-                }
+                public override String Stringify(IElement element) => String.Empty;
             }
 
             /// <summary>
             /// Introduces no content, but decrements the level of nesting for
             /// quotes.
             /// </summary>
-            private sealed class NoCloseQuoteContentMode : IContentMode
+            private sealed class NoCloseQuoteContentMode : ContentMode
             {
-                public String CssText => CssKeywords.NoCloseQuote;
+                public override String GetCssText() => CssKeywords.NoCloseQuote;
 
-                public String Stringify(IElement element)
-                {
-                    return String.Empty;
-                }
+                public override String Stringify(IElement element) => String.Empty;
             }
 
             /// <summary>
             /// Text content.
             /// </summary>
-            private sealed class TextContentMode : IContentMode
+            private sealed class TextContentMode : ContentMode
             {
                 private readonly String _text;
 
@@ -205,12 +206,9 @@ namespace AngleSharp.Css.Declarations
                     _text = text;
                 }
 
-                public String CssText => _text.CssString();
+                public override String GetCssText() => _text.CssString();
 
-                public String Stringify(IElement element)
-                {
-                    return _text;
-                }
+                public override String Stringify(IElement element) => _text;
             }
 
             /// <summary>
@@ -218,7 +216,7 @@ namespace AngleSharp.Css.Declarations
             /// in scope at this pseudo-element, from outermost to innermost
             /// separated by the specified string.
             /// </summary>
-            private sealed class CounterContentMode : IContentMode
+            private sealed class CounterContentMode : ContentMode
             {
                 private readonly CounterDefinition _counter;
 
@@ -227,19 +225,16 @@ namespace AngleSharp.Css.Declarations
                     _counter = counter;
                 }
 
-                public String CssText => _counter.CssText;
+                public override String GetCssText() => _counter.CssText;
 
-                public String Stringify(IElement element)
-                {
-                    return String.Empty;
-                }
+                public override String Stringify(IElement element) => String.Empty;
             }
 
             /// <summary>
             /// Returns the value of the element's attribute X as a string. If
             /// there is no attribute X, an empty string is returned.
             /// </summary>
-            private sealed class AttributeContentMode : IContentMode
+            private sealed class AttributeContentMode : ContentMode
             {
                 private readonly String _attribute;
 
@@ -248,12 +243,9 @@ namespace AngleSharp.Css.Declarations
                     _attribute = attribute;
                 }
 
-                public String CssText => FunctionNames.Attr.CssFunction(_attribute);
+                public override String GetCssText() => FunctionNames.Attr.CssFunction(_attribute);
 
-                public String Stringify(IElement element)
-                {
-                    return element.GetAttribute(_attribute) ?? String.Empty;
-                }
+                public override String Stringify(IElement element) => element.GetAttribute(_attribute) ?? String.Empty;
             }
 
             /// <summary>
@@ -261,7 +253,7 @@ namespace AngleSharp.Css.Declarations
             /// image). If the resource or image can't be displayed, it is either
             /// ignored or some placeholder shows up.
             /// </summary>
-            private sealed class UrlContentMode : IContentMode
+            private sealed class UrlContentMode : ContentMode
             {
                 private readonly CssUrlValue _url;
 
@@ -270,12 +262,9 @@ namespace AngleSharp.Css.Declarations
                     _url = url;
                 }
 
-                public String CssText => _url.CssText;
+                public override String GetCssText() => _url.CssText;
 
-                public String Stringify(IElement element)
-                {
-                    return String.Empty;
-                }
+                public override String Stringify(IElement element) => String.Empty;
             }
         }
     }

src/AngleSharp.Css/Dom/ICssProperty.cs

@@ -1,6 +1,7 @@
 namespace AngleSharp.Css.Dom
 {
     using AngleSharp.Attributes;
+    using AngleSharp.Css.Values;
     using System;
 
     /// <summary>
@@ -61,8 +62,8 @@ namespace AngleSharp.Css.Dom
         /// <summary>
         /// Creates a computed version of the property.
         /// </summary>
-        /// <param name="device">The device to compute for.</param>
+        /// <param name="context">The context to compute for.</param>
         /// <returns>The computed version of the property if uncomputed, otherwise the same.</returns>
-        ICssProperty Compute(IRenderDevice device);
+        ICssProperty Compute(ICssComputeContext context);
     }
 }

src/AngleSharp.Css/Dom/ICssValue.cs

@@ -1,6 +1,7 @@
 namespace AngleSharp.Css.Dom
 {
     using System;
+    using AngleSharp.Css.Values;
 
     /// <summary>
     /// Represents a value of a CSS property.
@@ -11,5 +12,12 @@ namespace AngleSharp.Css.Dom
         /// The text representation of the value.
         /// </summary>
         String CssText { get; }
+
+        /// <summary>
+        /// Computes the current value using the given context.
+        /// </summary>
+        /// <param name="context">The used compute context.</param>
+        /// <returns>The computed value or the original value, if already computed.</returns>
+        ICssValue Compute(ICssComputeContext context);
     }
 }

src/AngleSharp.Css/Dom/Internal/CssProperty.cs

@@ -89,13 +89,13 @@ namespace AngleSharp.Css.Dom
 
         #region Methods
 
-        public ICssProperty Compute(IRenderDevice device)
+        public ICssProperty Compute(ICssComputeContext context)
         {
-            if (_value is Length length && length.Type != Length.Unit.Px)
+            var computedValue = _value?.Compute(context);
+
+            if (computedValue != _value)
             {
-                var px = length.ToPixel(device);
-                var value = new Length(px, Length.Unit.Px);
-                return new CssProperty(_name, _converter, _flags, value, _important);
+                return new CssProperty(_name, _converter, _flags, computedValue, _important);
             }
 
             return this;

src/AngleSharp.Css/Dom/Internal/CssStyleDeclaration.cs

@@ -32,11 +32,6 @@ namespace AngleSharp.Css.Dom
 
         #region ctor
 
-        public CssStyleDeclaration()
-            : this(default(IBrowsingContext))
-        {            
-        }
-
         public CssStyleDeclaration(IBrowsingContext context)
         {
             _declarations = new List<ICssProperty>();

src/AngleSharp.Css/Extensions/CssOmExtensions.cs

@@ -1,6 +1,7 @@
 namespace AngleSharp.Css.Dom
 {
     using AngleSharp.Css.Parser;
+    using AngleSharp.Css.Values;
     using AngleSharp.Text;
     using System;
     using System.Linq;
@@ -66,18 +67,18 @@ namespace AngleSharp.Css.Dom
         }
 
         /// <summary>
-        /// Computes the values with knowledge of the device.
+        /// Computes the declarations using the given compute context.
         /// </summary>
         /// <param name="style">The base (raw) style.</param>
-        /// <param name="device">The device to use for the calculation.</param>
+        /// <param name="context">The context to use for the calculation.</param>
         /// <returns>A new style declaration with the existing or computed values.</returns>
-        public static ICssStyleDeclaration Compute(this ICssStyleDeclaration style, IRenderDevice device)
+        public static ICssStyleDeclaration Compute(this ICssStyleDeclaration style, ICssComputeContext context)
         {
-            var computedStyle = new CssStyleDeclaration();
+            var computedStyle = new CssStyleDeclaration(context.Context);
 
             foreach (var property in style)
             {
-                computedStyle.AddProperty(property.Compute(device));
+                computedStyle.AddProperty(property.Compute(context));
             }
 
             return computedStyle;

src/AngleSharp.Css/Extensions/StyleCollectionExtensions.cs

@@ -1,6 +1,7 @@
 namespace AngleSharp.Css
 {
     using AngleSharp.Css.Dom;
+    using AngleSharp.Css.Values;
     using AngleSharp.Dom;
     using AngleSharp.Html.Dom;
     using AngleSharp.Svg.Dom;
@@ -43,7 +44,7 @@ namespace AngleSharp.Css
         public static ICssStyleDeclaration ComputeDeclarations(this IStyleCollection styles, IElement element, String pseudoSelector = null)
         {
             var ctx = element.Owner?.Context;
-            var device = styles.Device;
+            var context = new CssComputeContext(styles.Device, ctx);
             var computedStyle = new CssStyleDeclaration(ctx);
             var nodes = element.GetAncestors().OfType<IElement>();
 
@@ -64,12 +65,7 @@ namespace AngleSharp.Css
                 computedStyle.UpdateDeclarations(styles.ComputeCascadedStyle(node));
             }
 
-            if (device is not null)
-            {
-                return computedStyle.Compute(device);
-            }
-
-            return computedStyle;
+            return computedStyle.Compute(context);
         }
 
         /// <summary>
@@ -77,13 +73,14 @@ namespace AngleSharp.Css
         /// Two rules with the same specificity are ordered according to their appearance. The more
         /// recent declaration wins. Inheritance is not taken into account.
         /// </summary>
-        /// <param name="rules">The style rules to apply.</param>
+        /// <param name="styles">The style rules to apply.</param>
         /// <param name="element">The element to compute the cascade for.</param>
         /// <param name="parent">The potential parent for the cascade.</param>
         /// <returns>Returns the cascaded read-only style declaration.</returns>
         public static ICssStyleDeclaration ComputeCascadedStyle(this IStyleCollection styles, IElement element, ICssStyleDeclaration parent = null)
         {
-            var computedStyle = new CssStyleDeclaration(element.Owner?.Context);
+            var ctx = element.Owner?.Context;
+            var computedStyle = new CssStyleDeclaration(ctx);
             var rules = styles.SortBySpecificity(element);
 
             foreach (var rule in rules)
@@ -138,5 +135,25 @@ namespace AngleSharp.Css
         private static ICssStyleRule GetRule(Tuple<ICssStyleRule, Priority> item) => item.Item1;
 
         #endregion
+
+        #region Context
+
+        sealed class CssComputeContext : ICssComputeContext
+        {
+            private readonly IRenderDevice _device;
+            private readonly IBrowsingContext _context;
+
+            public CssComputeContext(IRenderDevice device, IBrowsingContext context)
+            {
+                _device = device ?? new DefaultRenderDevice();
+                _context = context;
+            }
+
+            public IRenderDevice Device => _device;
+
+            public IBrowsingContext Context => _context;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssBackgroundLayerValue.cs

@@ -6,6 +6,8 @@ namespace AngleSharp.Css.Values
 
     sealed class CssBackgroundLayerValue : ICssCompositeValue
     {
+        #region Fields
+
         private readonly ICssValue _image;
         private readonly ICssValue _position;
         private readonly ICssValue _size;
@@ -14,6 +16,10 @@ namespace AngleSharp.Css.Values
         private readonly ICssValue _origin;
         private readonly ICssValue _clip;
 
+        #endregion
+
+        #region ctor
+
         /// <summary>
         /// Creates a new background image layer.
         /// </summary>
@@ -28,6 +34,10 @@ namespace AngleSharp.Css.Values
             _clip = clip;
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the background image.
         /// </summary>
@@ -117,5 +127,23 @@ namespace AngleSharp.Css.Values
                 return sb.ToPool();
             }
         }
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var image = _image.Compute(context);
+            var position = _position.Compute(context);
+            var size = _size.Compute(context);
+            var repeat = _repeat.Compute(context);
+            var attachment = _attachment.Compute(context);
+            var origin = _origin.Compute(context);
+            var clip = _clip.Compute(context);
+            return new CssBackgroundLayerValue(image, position, size, repeat, attachment, origin, clip);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssBackgroundSizeValue.cs

@@ -89,6 +89,18 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            if (_mode == ValueMode.Explicit)
+            {
+                var w = _width.Compute(context);
+                var h = _height.Compute(context);
+                return new CssBackgroundSizeValue(w, h);
+            }
+
+            return this;
+        }
+
         /// <summary>
         /// Compares to another background size.
         /// </summary>

src/AngleSharp.Css/Values/Composites/CssBackgroundValue.cs

@@ -8,9 +8,15 @@ namespace AngleSharp.Css.Values
     /// </summary>
     sealed class CssBackgroundValue : ICssCompositeValue
     {
+        #region Fields
+
         private readonly ICssValue _layers;
         private readonly ICssValue _color;
 
+        #endregion
+
+        #region ctor
+
         /// <summary>
         /// Creates a new CSS background definition.
         /// </summary>
@@ -22,6 +28,10 @@ namespace AngleSharp.Css.Values
             _color = color;
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the used color.
         /// </summary>
@@ -56,5 +66,18 @@ namespace AngleSharp.Css.Values
                 return _color?.CssText ?? String.Empty;
             }
         }
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var layers = _layers.Compute(context);
+            var color = _color.Compute(context);
+            return new CssBackgroundValue(layers, color);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssBorderImageSliceValue.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
 
@@ -113,5 +114,18 @@ namespace AngleSharp.Css.Values
         }
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var bottom = (Length)((ICssValue)_bottom).Compute(context);
+            var left = (Length)((ICssValue)_left).Compute(context);
+            var right = (Length)((ICssValue)_right).Compute(context);
+            var top = (Length)((ICssValue)_top).Compute(context);
+            return new CssBorderImageSliceValue(top, right, bottom, left, _filled);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssBorderImageValue.cs

@@ -110,5 +110,19 @@ namespace AngleSharp.Css.Values
         public ICssValue Repeat => _repeat;
 
         #endregion
+
+        #region
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var image = _image.Compute(context);
+            var slice = _slice.Compute(context);
+            var widths = _widths.Compute(context);
+            var offsets = _outsets.Compute(context);
+            var repeat = _repeat.Compute(context);
+            return new CssBorderImageValue(image, slice, widths, offsets, repeat);
+    }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssBorderRadiusValue.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
@@ -63,5 +64,16 @@ namespace AngleSharp.Css.Values
         }
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var h = ((ICssValue)_horizontal).Compute(context);
+            var v = ((ICssValue)_vertical).Compute(context);
+            return new CssBorderRadiusValue((CssPeriodicValue)h, (CssPeriodicValue)v);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssCursorValue.cs

@@ -3,15 +3,22 @@ namespace AngleSharp.Css.Values
     using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
+    using System.Linq;
 
     /// <summary>
     /// Represents a CSS cursor definition.
     /// </summary>
     sealed class CssCursorValue : ICssCompositeValue
     {
+        #region Fields
+
         private readonly ICssValue[] _definitions;
         private readonly ICssValue _cursor;
 
+        #endregion
+
+        #region ctor
+
         /// <summary>
         /// Creates a new CSS cursor definition.
         /// </summary>
@@ -23,6 +30,10 @@ namespace AngleSharp.Css.Values
             _cursor = cursor;
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the custom cursor definitions.
         /// </summary>
@@ -51,5 +62,18 @@ namespace AngleSharp.Css.Values
                 return sb.ToPool();
             }
         }
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var cursor = _cursor.Compute(context);
+            var definitions = _definitions.Select(def => def.Compute(context)).ToArray();
+            return new CssCursorValue(definitions, cursor);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssCustomCursorValue.cs

@@ -1,13 +1,20 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
 
     sealed class CssCustomCursorValue : ICssCompositeValue
     {
+        #region Fields
+
         private readonly ICssImageValue _source;
         private readonly Point? _position;
 
+        #endregion
+
+        #region ctor
+
         /// <summary>
         /// Creates a new custom cursor value.
         /// </summary>
@@ -19,6 +26,10 @@ namespace AngleSharp.Css.Values
             _position = position;
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the image to display as cursor.
         /// </summary>
@@ -49,5 +60,18 @@ namespace AngleSharp.Css.Values
                 return sb.ToPool();
             }
         }
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var source = (ICssImageValue)_source.Compute(context);
+            var position = _position.HasValue ? (Point?)((ICssValue)_position.Value).Compute(context) : null;
+            return new CssCustomCursorValue(source, position);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssFontValue.cs

@@ -135,5 +135,21 @@ namespace AngleSharp.Css.Values
         }
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var fontFamilies = _fontFamilies.Compute(context);
+            var lineHeight = _lineHeight.Compute(context);
+            var size = _size.Compute(context);
+            var stretch = _stretch.Compute(context);
+            var style = _style.Compute(context);
+            var variant = _variant.Compute(context);
+            var weight = _weight.Compute(context);
+            return new CssFontValue(style, variant, weight, stretch, size, lineHeight, fontFamilies);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssGradientStopValue.cs

@@ -59,5 +59,16 @@ namespace AngleSharp.Css.Values
         public String CssText => IsDetermined ? String.Concat(_color.CssText, " ", _location.CssText) : _color.CssText;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var color = ((ICssValue)_color).Compute(context);
+            var location = _location?.Compute(context);
+            return new CssGradientStopValue((Color)color, location);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssGridTemplateValue.cs

@@ -104,5 +104,17 @@ namespace AngleSharp.Css.Values
         }
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var rows = _rows.Compute(context);
+            var columns = _columns.Compute(context);
+            var areas = _areas.Compute(context);
+            return new CssGridTemplateValue(rows, columns, areas);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssGridValue.cs

@@ -89,5 +89,17 @@ namespace AngleSharp.Css.Values
         }
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var rows = _rows.Compute(context);
+            var columns = _columns.Compute(context);
+            var sizes = _sizes.Select(s => s.Compute(context));
+            return new CssGridValue(rows, columns, sizes, _dense);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssImageRepeatsValue.cs

@@ -59,5 +59,12 @@ namespace AngleSharp.Css.Values
                 return String.Concat(h, " ", v);
             }
         }
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var h = _horizontal.Compute(context);
+            var v = _vertical.Compute(context);
+            return new CssImageRepeatsValue(h, v);
+        }
     }
 }

src/AngleSharp.Css/Values/Composites/CssOriginValue.cs

@@ -8,10 +8,16 @@ namespace AngleSharp.Css.Values
     /// </summary>
     public sealed class CssOriginValue : ICssCompositeValue
     {
+        #region Fields
+
         private readonly ICssValue _x;
         private readonly ICssValue _y;
         private readonly ICssValue _z;
 
+        #endregion
+
+        #region ctor
+
         /// <summary>
         /// Creates a new Point3 (origin).
         /// </summary>
@@ -25,6 +31,10 @@ namespace AngleSharp.Css.Values
             _z = z;
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the CSS text representation.
         /// </summary>
@@ -51,5 +61,25 @@ namespace AngleSharp.Css.Values
         /// Gets the z coordinate.
         /// </summary>
         public ICssValue Z => _z;
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var x = _x.Compute(context);
+            var y = _y.Compute(context);
+            var z = _z.Compute(context);
+
+            if (x != _x || y != _y || z != _z)
+            {
+                return new CssOriginValue(x, y, z);
+            }
+
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Composites/CssShadowValue.cs

@@ -112,5 +112,19 @@ namespace AngleSharp.Css.Values
         public Boolean IsInset => _inset;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var offsetX = _offsetX.Compute(context);
+            var offsetY = _offsetY.Compute(context);
+            var blurRadius = _blurRadius.Compute(context);
+            var spreadRadius = _spreadRadius.Compute(context);
+            var color = (Color)((ICssValue)_color).Compute(context);
+            return new CssShadowValue(_inset, offsetX, offsetY, blurRadius, spreadRadius, color);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/CssChildValue.cs

@@ -8,9 +8,15 @@ namespace AngleSharp.Css.Values
     /// </summary>
     class CssChildValue : ICssValue
     {
+        #region Fields
+
         private readonly ICssValue _parent;
         private readonly ICssValue _value;
 
+        #endregion
+
+        #region ctor
+
         /// <summary>
         /// Creates a CSS child-parent container.
         /// </summary>
@@ -22,6 +28,10 @@ namespace AngleSharp.Css.Values
             _value = value;
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the value of the shorthand.
         /// </summary>
@@ -36,5 +46,18 @@ namespace AngleSharp.Css.Values
         /// Gets the text representation of the longhand.
         /// </summary>
         public String CssText => _value?.CssText ?? String.Empty;
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var parent = _parent.Compute(context);
+            var value = _value?.Compute(context);
+            return new CssChildValue(parent, value);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Expressions/CssCalcAddExpression.cs

@@ -36,5 +36,20 @@ namespace AngleSharp.Css.Values
         /// Gets the CSS text representation.
         /// </summary>
         public String CssText => String.Concat(_left.CssText, " + ", _right.CssText);
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var left = _left.Compute(context);
+            var right = _right.Compute(context);
+
+            if (left is ICssMetricValue x && right is ICssMetricValue y && x.UnitString == y.UnitString)
+            {
+                var result = x.Value + y.Value;
+                return (ICssValue)Activator.CreateInstance(x.GetType(), result);
+            }
+
+            // TOOD INVALID
+            return this;
+        }
     }
 }

src/AngleSharp.Css/Values/Expressions/CssCalcBracketExpression.cs

@@ -28,5 +28,10 @@ namespace AngleSharp.Css.Values
         /// Gets the CSS text representation.
         /// </summary>
         public String CssText => String.Concat("(", _content.CssText, ")");
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return _content.Compute(context);
+        }
     }
 }

src/AngleSharp.Css/Values/Expressions/CssCalcDivExpression.cs

@@ -36,5 +36,20 @@ namespace AngleSharp.Css.Values
         /// Gets the CSS text representation.
         /// </summary>
         public String CssText => String.Concat(_left.CssText, " / ", _right.CssText);
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var left = _left.Compute(context);
+            var right = _right.Compute(context);
+
+            if (left is ICssMetricValue x && right is ICssMetricValue y && x.UnitString == y.UnitString)
+            {
+                var result = x.Value / y.Value;
+                return (ICssValue)Activator.CreateInstance(x.GetType(), result);
+            }
+
+            // TOOD INVALID
+            return this;
+        }
     }
 }

src/AngleSharp.Css/Values/Expressions/CssCalcMulExpression.cs

@@ -36,5 +36,20 @@ namespace AngleSharp.Css.Values
         /// Gets the CSS text representation.
         /// </summary>
         public String CssText => String.Concat(_left.CssText, " * ", _right.CssText);
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var left = _left.Compute(context);
+            var right = _right.Compute(context);
+
+            if (left is ICssMetricValue x && right is ICssMetricValue y && x.UnitString == y.UnitString)
+            {
+                var result = x.Value * y.Value;
+                return (ICssValue)Activator.CreateInstance(x.GetType(), result);
+            }
+
+            // TOOD INVALID
+            return this;
+        }
     }
 }

src/AngleSharp.Css/Values/Expressions/CssCalcSubExpression.cs

@@ -36,5 +36,20 @@ namespace AngleSharp.Css.Values
         /// Gets the CSS text representation.
         /// </summary>
         public String CssText => String.Concat(_left.CssText, " - ", _right.CssText);
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var left = _left.Compute(context);
+            var right = _right.Compute(context);
+
+            if (left is ICssMetricValue x && right is ICssMetricValue y && x.UnitString == y.UnitString)
+            {
+                var result = x.Value - y.Value;
+                return (ICssValue)Activator.CreateInstance(x.GetType(), result);
+            }
+
+            // TOOD INVALID
+            return this;
+        }
     }
 }

src/AngleSharp.Css/Values/Functions/CssAttrValue.cs

@@ -51,5 +51,14 @@ namespace AngleSharp.Css.Values
         public String CssText => Name.CssFunction(_attribute);
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssCalcValue.cs

@@ -56,5 +56,14 @@ namespace AngleSharp.Css.Values
         public String CssText => Name.CssFunction(_expression.CssText);
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return _expression.Compute(context);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssConicGradientValue.cs

@@ -121,5 +121,17 @@ namespace AngleSharp.Css.Values
         public Boolean IsRepeating => _repeating;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var center = _center.Compute(context);
+            var angle = _angle.Compute(context);
+            var stops = _stops.Select(m => (CssGradientStopValue)((ICssValue)m).Compute(context)).ToArray();
+            return new CssConicGradientValue(angle, center, stops, _repeating);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssContentValue.cs

@@ -51,5 +51,14 @@ namespace AngleSharp.Css.Values
         public String CssText => Name.CssFunction(_type);
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssCubicBezierValue.cs

@@ -148,6 +148,11 @@ namespace AngleSharp.Css.Values
         public Boolean Equals(CssCubicBezierValue other) =>
             _x1 == other._x1 && _x2 == other._x2 && _y1 == other._y1 && _y2 == other._y2;
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssFitContentValue.cs

@@ -51,5 +51,15 @@ namespace AngleSharp.Css.Values
         public String CssText => Name.CssFunction(_dim.CssText);
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var dim = _dim.Compute(context);
+            return new CssFitContentValue(dim);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssFontFormatValue.cs

@@ -7,17 +7,38 @@ namespace AngleSharp.Css.Values
 
     sealed class CssFontFormatValue : ICssFunctionValue
     {
+        #region Fields
+
         private readonly String _fontFormat;
 
+        #endregion
+
+        #region ctor
+
         public CssFontFormatValue(String fontFormat)
         {
             _fontFormat = fontFormat;
         }
 
+        #endregion
+
+        #region Properties
+
         public String Name => CssKeywords.Format;
 
         public ICssValue[] Arguments => new ICssValue[] { new Label(_fontFormat) };
 
         public String CssText => Name.CssFunction(Arguments.Join(", "));
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssLinearGradientValue.cs

@@ -113,5 +113,16 @@ namespace AngleSharp.Css.Values
         public Boolean IsRepeating => _repeating;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var angle = _angle.Compute(context);
+            var stops = _stops.Select(m => (CssGradientStopValue)((ICssValue)m).Compute(context)).ToArray();
+            return new CssLinearGradientValue(angle, stops, _repeating);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssLocalFontValue.cs

@@ -7,17 +7,38 @@ namespace AngleSharp.Css.Values
 
     sealed class CssLocalFontValue : ICssFunctionValue
     {
+        #region Fields
+
         private readonly String _fontName;
 
+        #endregion
+
+        #region ctor
+
         public CssLocalFontValue(String fontName)
         {
             _fontName = fontName;
         }
 
+        #endregion
+
+        #region Properties
+
         public String Name => CssKeywords.Local;
 
         public ICssValue[] Arguments => new ICssValue[] { new Label(_fontName) };
 
         public String CssText => Name.CssFunction(Arguments.Join(", "));
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssMatrixValue.cs

@@ -88,6 +88,11 @@ namespace AngleSharp.Css.Values
             return new TransformMatrix(values);
         }
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssMinMaxValue.cs

@@ -60,5 +60,16 @@ namespace AngleSharp.Css.Values
         public String CssText => Name.CssFunction(Arguments.Join(", "));
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var min = _min.Compute(context);
+            var max = _max.Compute(context);
+            return new CssMinMaxValue(min, max);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssNoneValue.cs

@@ -5,10 +5,23 @@ namespace AngleSharp.Css.Values
 
     sealed class CssNoneValue : ICssImageValue
     {
+        #region Properties
+
         public String Name => CssKeywords.None;
 
         public ICssValue[] Arguments => Array.Empty<ICssValue>();
 
         public String CssText => CssKeywords.None;
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssPerspectiveValue.cs

@@ -60,6 +60,18 @@ namespace AngleSharp.Css.Values
             return new TransformMatrix(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.0 / distance.ToPixel(renderDimensions, RenderMode.Undefined));
         }
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var distance = _distance.Compute(context);
+
+            if (distance != _distance)
+            {
+                return new CssPerspectiveValue(distance);
+            }
+
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssRadialGradientValue.cs

@@ -154,6 +154,19 @@ namespace AngleSharp.Css.Values
 
         #endregion
 
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var center = (Point)((ICssValue)_center).Compute(context);
+            var width = _width.Compute(context);
+            var height = _height.Compute(context);
+            var stops = _stops.Select(m => (CssGradientStopValue)((ICssValue)m).Compute(context)).ToArray();
+            return new CssRadialGradientValue(_circle, center, width, height, _sizeMode, stops, _repeating);
+        }
+
+        #endregion
+
         #region Sizes
 
         /// <summary>

src/AngleSharp.Css/Values/Functions/CssRepeatValue.cs

@@ -60,5 +60,22 @@ namespace AngleSharp.Css.Values
         public String CssText => Name.CssFunction(Arguments.Join(", "));
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var count = _count.Compute(context);
+            var value = _value.Compute(context);
+
+            if (count != _count || value != _value)
+            {
+                return new CssRepeatValue(count, value);
+            }
+
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssRotateValue.cs

@@ -143,6 +143,12 @@ namespace AngleSharp.Css.Values
                 0.0, 0.0, 0.0, 0.0, 0.0, 0.0);
         }
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var angle = _angle.Compute(context);
+            return new CssRotateValue(_x, _y, _z, angle);
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssRunningValue.cs

@@ -51,5 +51,14 @@ namespace AngleSharp.Css.Values
         public String CssText => Name.CssFunction(_ident);
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssScaleValue.cs

@@ -139,6 +139,11 @@ namespace AngleSharp.Css.Values
         public TransformMatrix ComputeMatrix(IRenderDimensions renderDimensions) =>
             new(_sx, 0f, 0f, 0f, _sy, 0f, 0f, 0f, _sz, 0f, 0f, 0f, 0f, 0f, 0f);
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return new CssScaleValue(_sx, _sy, _sz);
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssShapeValue.cs

@@ -83,5 +83,18 @@ namespace AngleSharp.Css.Values
         public ICssValue Left => _left;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var top = _top.Compute(context);
+            var right = _right.Compute(context);
+            var bottom = _bottom.Compute(context);
+            var left = _left.Compute(context);
+            return new CssShapeValue(top, right, bottom, left);
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssSkewValue.cs

@@ -111,6 +111,19 @@ namespace AngleSharp.Css.Values
             return new TransformMatrix(1.0, a, 0.0, b, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0);
         }
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var alpha = _alpha.Compute(context);
+            var beta = _beta.Compute(context);
+
+            if (alpha != _alpha || beta != _beta)
+            {
+                return new CssSkewValue(alpha, beta);
+            }
+
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssStepsValue.cs

@@ -98,5 +98,14 @@ namespace AngleSharp.Css.Values
         public Boolean IsStart => _start;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssSymbolsValue.cs

@@ -4,7 +4,6 @@ namespace AngleSharp.Css.Values
     using AngleSharp.Text;
     using System;
     using System.Collections.Generic;
-    using System.Data;
     using System.Linq;
 
     /// <summary>
@@ -58,6 +57,21 @@ namespace AngleSharp.Css.Values
 
         #endregion
 
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            if (_type == null)
+            {
+                var type = new Constant<SymbolsType>(CssKeywords.Cyclic, SymbolsType.Cyclic);
+                return new CssSymbolsValue(type, _entries);
+            }
+
+            return this;
+        }
+
+        #endregion
+
         #region Helpers
 
         private String GetArgs()

src/AngleSharp.Css/Values/Functions/CssTranslateValue.cs

@@ -114,6 +114,14 @@ namespace AngleSharp.Css.Values
             return new TransformMatrix(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, dx, dy, dz, 0.0, 0.0, 0.0);
         }
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var x = _x.Compute(context);
+            var y = _y.Compute(context);
+            var z = _z.Compute(context);
+            return new CssTranslateValue(x, y, z);
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssUrlValue.cs

@@ -52,5 +52,14 @@ namespace AngleSharp.Css.Values
         public String Path => _path;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Functions/CssVarValue.cs

@@ -93,5 +93,21 @@ namespace AngleSharp.Css.Values
         }
 
         #endregion
+
+        #region Methods
+
+        /// <summary>
+        /// Resolves the value of the referenced variable. Returns null
+        /// if the reference is invalid or cannot be resolved.
+        /// </summary>
+        /// <param name="context">The context to use for resolving the variable.</param>
+        /// <returns>The resolved value or null.</returns>
+        public ICssValue Compute(ICssComputeContext context)
+        {
+            //return _expression.Compute(context);
+            return null;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/ICssComputeContext.cs

@@ -0,0 +1,18 @@
+namespace AngleSharp.Css.Values
+{
+    /// <summary>
+    /// Defines the context for computing styles.
+    /// </summary>
+    public interface ICssComputeContext
+    {
+        /// <summary>
+        /// Gets the device associated with the computation.
+        /// </summary>
+        IRenderDevice Device { get; }
+
+        /// <summary>
+        /// Gets the associated browsing context.
+        /// </summary>
+        IBrowsingContext Context { get; }
+    }
+}

src/AngleSharp.Css/Values/ICssMetricValue.cs

@@ -0,0 +1,20 @@
+namespace AngleSharp.Css.Values
+{
+    using System;
+
+    /// <summary>
+    /// Defines a class of CSS values that have a metric.
+    /// </summary>
+    public interface ICssMetricValue : ICssPrimitiveValue
+    {
+        /// <summary>
+        /// Gets the value of the metric.
+        /// </summary>
+        Double Value { get; }
+
+        /// <summary>
+        /// Gets the label of the unit.
+        /// </summary>
+        String UnitString { get; }
+    }
+}

src/AngleSharp.Css/Values/Multiples/CssFlowRelativeValue.cs

@@ -5,6 +5,7 @@ namespace AngleSharp.Css.Values
     using System;
     using System.Collections;
     using System.Collections.Generic;
+    using System.Linq;
 
     /// <summary>
     /// Represents a flow relative CSS value.
@@ -38,15 +39,12 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (index)
+                return index switch
                 {
-                    case 0:
-                        return Start;
-                    case 1:
-                        return End;
-                    default:
-                        throw new ArgumentOutOfRangeException(nameof(index));
-                }
+                    0 => Start,
+                    1 => (ICssValue)End,
+                    _ => throw new ArgumentOutOfRangeException(nameof(index)),
+                };
             }
         }
 
@@ -94,6 +92,12 @@ namespace AngleSharp.Css.Values
 
         IEnumerator IEnumerable.GetEnumerator() => ((IEnumerable<ICssValue>)this).GetEnumerator();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var values = _values.Select(v => (T)v.Compute(context)).ToArray();
+            return new CssFlowRelativeValue<T>(values);
+        }
+
         #endregion
     }
 

src/AngleSharp.Css/Values/Multiples/CssListValue.cs

@@ -55,6 +55,12 @@ namespace AngleSharp.Css.Values
 
         IEnumerator IEnumerable.GetEnumerator() => _items.GetEnumerator();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var items = _items.Select(v => (T)v.Compute(context)).ToArray();
+            return new CssListValue<T>(items);
+        }
+
         #endregion
     }
 

src/AngleSharp.Css/Values/Multiples/CssPeriodicValue.cs

@@ -5,6 +5,7 @@ namespace AngleSharp.Css.Values
     using System;
     using System.Collections;
     using System.Collections.Generic;
+    using System.Linq;
 
     /// <summary>
     /// Represents a periodic CSS value.
@@ -38,19 +39,14 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (index)
+                return index switch
                 {
-                    case 0:
-                        return Top;
-                    case 1:
-                        return Right;
-                    case 2:
-                        return Bottom;
-                    case 3:
-                        return Left;
-                    default:
-                        throw new ArgumentOutOfRangeException(nameof(index));
-                }
+                    0 => Top,
+                    1 => Right,
+                    2 => Bottom,
+                    3 => (ICssValue)Left,
+                    _ => throw new ArgumentOutOfRangeException(nameof(index)),
+                };
             }
         }
 
@@ -118,6 +114,12 @@ namespace AngleSharp.Css.Values
 
         IEnumerator IEnumerable.GetEnumerator() => ((IEnumerable<ICssValue>)this).GetEnumerator();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var values = _values.Select(v => (T)v.Compute(context)).ToArray();
+            return new CssPeriodicValue<T>(values);
+        }
+
         #endregion
     }
 

src/AngleSharp.Css/Values/Multiples/CssRadiusValue.cs

@@ -5,6 +5,7 @@ namespace AngleSharp.Css.Values
     using System;
     using System.Collections;
     using System.Collections.Generic;
+    using System.Linq;
 
     /// <summary>
     /// Represents a periodic CSS value.
@@ -38,15 +39,12 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (index)
+                return index switch
                 {
-                    case 0:
-                        return Width;
-                    case 1:
-                        return Height;
-                    default:
-                        throw new ArgumentOutOfRangeException(nameof(index));
-                }
+                    0 => Width,
+                    1 => (ICssValue)Height,
+                    _ => throw new ArgumentOutOfRangeException(nameof(index)),
+                };
             }
         }
 
@@ -94,6 +92,12 @@ namespace AngleSharp.Css.Values
 
         IEnumerator IEnumerable.GetEnumerator() => ((IEnumerable<ICssValue>)this).GetEnumerator();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var values = _values.Select(v => (T)v.Compute(context)).ToArray();
+            return new CssRadiusValue<T>(values);
+        }
+
         #endregion
     }
 

src/AngleSharp.Css/Values/Multiples/CssTupleValue.cs

@@ -63,6 +63,12 @@ namespace AngleSharp.Css.Values
 
         IEnumerator IEnumerable.GetEnumerator() => _items.GetEnumerator();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var items = _items.Select(v => (T)v.Compute(context)).ToArray();
+            return new CssTupleValue<T>(items, _separator);
+        }
+
         #endregion
     }
 

src/AngleSharp.Css/Values/Primitives/Angle.cs

@@ -1,12 +1,13 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
     /// Represents an angle object.
     /// https://developer.mozilla.org/en-US/docs/Web/CSS/angle
     /// </summary>
-    public readonly struct Angle : IEquatable<Angle>, IComparable<Angle>, ICssPrimitiveValue
+    public readonly struct Angle : IEquatable<Angle>, IComparable<Angle>, ICssMetricValue
     {
         #region Basic angles
 
@@ -46,6 +47,15 @@ namespace AngleSharp.Css.Values
 
         #region ctor
 
+        /// <summary>
+        /// Creates a new angle value.
+        /// </summary>
+        /// <param name="value">The value of the angle in rad.</param>
+        public Angle(Double value)
+            : this(value, Unit.Rad)
+        {
+        }
+
         /// <summary>
         /// Creates a new angle value.
         /// </summary>
@@ -83,23 +93,14 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (_unit)
+                return _unit switch
                 {
-                    case Unit.Deg:
-                        return UnitNames.Deg;
-
-                    case Unit.Grad:
-                        return UnitNames.Grad;
-
-                    case Unit.Turn:
-                        return UnitNames.Turn;
-
-                    case Unit.Rad:
-                        return UnitNames.Rad;
-
-                    default:
-                        return String.Empty;
-                }
+                    Unit.Deg => UnitNames.Deg,
+                    Unit.Grad => UnitNames.Grad,
+                    Unit.Turn => UnitNames.Turn,
+                    Unit.Rad => UnitNames.Rad,
+                    _ => String.Empty,
+                };
             }
         }
 
@@ -146,6 +147,17 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            if (_unit != Unit.Rad)
+            {
+                var rad = ToRadian();
+                return new Angle(rad, Unit.Rad);
+            }
+
+            return this;
+        }
+
         /// <summary>
         /// Tries to convert the given string to an Angle.
         /// </summary>
@@ -173,14 +185,14 @@ namespace AngleSharp.Css.Values
         /// <returns>A valid CSS unit or None.</returns>
         public static Unit GetUnit(String s)
         {
-            switch (s)
+            return s switch
             {
-                case "deg": return Unit.Deg;
-                case "grad": return Unit.Grad;
-                case "turn": return Unit.Turn;
-                case "rad": return Unit.Rad;
-                default: return Unit.None;
-            }
+                "deg" => Unit.Deg,
+                "grad" => Unit.Grad,
+                "turn" => Unit.Turn,
+                "rad" => Unit.Rad,
+                _ => Unit.None,
+            };
         }
 
         /// <summary>
@@ -189,20 +201,13 @@ namespace AngleSharp.Css.Values
         /// <returns>The value in rad.</returns>
         public Double ToRadian()
         {
-            switch (_unit)
+            return _unit switch
             {
-                case Unit.Deg:
-                    return Math.PI / 180.0 * _value;
-
-                case Unit.Grad:
-                    return Math.PI / 200.0 * _value;
-
-                case Unit.Turn:
-                    return 2.0 * Math.PI * _value;
-
-                default:
-                    return _value;
-            }
+                Unit.Deg => Math.PI / 180.0 * _value,
+                Unit.Grad => Math.PI / 200.0 * _value,
+                Unit.Turn => 2.0 * Math.PI * _value,
+                _ => _value,
+            };
         }
 
         /// <summary>
@@ -211,20 +216,13 @@ namespace AngleSharp.Css.Values
         /// <returns>The value in turns.</returns>
         public Double ToTurns()
         {
-            switch (_unit)
+            return _unit switch
             {
-                case Unit.Deg:
-                    return _value / 360.0;
-
-                case Unit.Grad:
-                    return _value / 400.0;
-
-                case Unit.Rad:
-                    return _value / (2.0 * Math.PI);
-
-                default:
-                    return _value;
-            }
+                Unit.Deg => _value / 360.0,
+                Unit.Grad => _value / 400.0,
+                Unit.Rad => _value / (2.0 * Math.PI),
+                _ => _value,
+            };
         }
 
         /// <summary>

src/AngleSharp.Css/Values/Primitives/Color.cs

@@ -1,6 +1,7 @@
 namespace AngleSharp.Css.Values
 {
     using AngleSharp.Css;
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
     using System.Globalization;
@@ -596,6 +597,11 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         /// <summary>
         /// Mixes two colors using alpha compositing as described here:
         /// http://en.wikipedia.org/wiki/Alpha_compositing

src/AngleSharp.Css/Values/Primitives/Constant.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
@@ -59,7 +60,7 @@ namespace AngleSharp.Css.Values
         /// <param name="obj">The object to check against.</param>
         /// <returns>True if both are equal, otherwise false.</returns>
         public override Boolean Equals(Object obj) =>
-            obj is Constant<T> constant ? Equals(constant) : false;
+            obj is Constant<T> constant && Equals(constant);
 
         /// <summary>
         /// Gets the computed hash code of the constant.
@@ -67,6 +68,11 @@ namespace AngleSharp.Css.Values
         /// <returns>The hash code of the object.</returns>
         public override Int32 GetHashCode() => _data.GetHashCode();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Primitives/CounterDefinition.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
 
@@ -79,7 +80,7 @@ namespace AngleSharp.Css.Values
         /// <param name="obj">The object to check against.</param>
         /// <returns>True if both are equal, otherwise false.</returns>
         public override Boolean Equals(Object obj) =>
-            obj is CounterDefinition cd ? Equals(cd) : false;
+            obj is CounterDefinition cd && Equals(cd);
 
         /// <summary>
         /// Gets the hash code of the object.
@@ -87,6 +88,11 @@ namespace AngleSharp.Css.Values
         /// <returns>The computed hash code.</returns>
         public override Int32 GetHashCode() => CssText.GetHashCode();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         #endregion
 
         #region Helpers

src/AngleSharp.Css/Values/Primitives/CounterValue.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
 
@@ -66,7 +67,7 @@ namespace AngleSharp.Css.Values
         /// <param name="obj">The object to check against.</param>
         /// <returns>True if both are equal, otherwise false.</returns>
         public override Boolean Equals(Object obj) =>
-            obj is CounterValue cv ? Equals(cv) : false;
+            obj is CounterValue cv && Equals(cv);
 
         /// <summary>
         /// Gets the hash code of the object.
@@ -74,6 +75,11 @@ namespace AngleSharp.Css.Values
         /// <returns>The computed hash code.</returns>
         public override Int32 GetHashCode() => CssText.GetHashCode();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Primitives/Fraction.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
@@ -53,14 +54,11 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (_unit)
+                return _unit switch
                 {
-                    case Unit.Fr:
-                        return UnitNames.Fr;
-
-                    default:
-                        return String.Empty;
-                }
+                    Unit.Fr => UnitNames.Fr,
+                    _ => String.Empty,
+                };
             }
         }
 
@@ -68,6 +66,11 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         /// <summary>
         /// Tries to convert the given string to a Fraction.
         /// </summary>
@@ -95,11 +98,11 @@ namespace AngleSharp.Css.Values
         /// <returns>A valid CSS unit or None.</returns>
         public static Unit GetUnit(String s)
         {
-            switch (s)
+            return s switch
             {
-                case "fr": return Unit.Fr;
-                default: return Unit.None;
-            }
+                "fr" => Unit.Fr,
+                _ => Unit.None,
+            };
         }
 
         /// <summary>

src/AngleSharp.Css/Values/Primitives/Frequency.cs

@@ -1,11 +1,12 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
     /// Represents a time value.
     /// </summary>
-    public readonly struct Frequency : IEquatable<Frequency>, IComparable<Frequency>, ICssPrimitiveValue
+    public readonly struct Frequency : IEquatable<Frequency>, IComparable<Frequency>, ICssMetricValue
     {
         #region Fields
 
@@ -16,6 +17,15 @@ namespace AngleSharp.Css.Values
 
         #region ctor
 
+        /// <summary>
+        /// Creates a new frequency value.
+        /// </summary>
+        /// <param name="value">The value of the frequency in Hz.</param>
+        public Frequency(Double value)
+            : this(value, Unit.Hz)
+        {
+        }
+
         /// <summary>
         /// Creates a new frequency value.
         /// </summary>
@@ -53,17 +63,12 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (_unit)
+                return _unit switch
                 {
-                    case Unit.Khz:
-                        return UnitNames.Khz;
-
-                    case Unit.Hz:
-                        return UnitNames.Hz;
-
-                    default:
-                        return String.Empty;
-                }
+                    Unit.Khz => UnitNames.Khz,
+                    Unit.Hz => UnitNames.Hz,
+                    _ => String.Empty,
+                };
             }
         }
 
@@ -110,6 +115,17 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            if (_unit != Unit.Hz)
+            {
+                var hz = ToHertz();
+                return new Frequency(hz, Unit.Hz);
+            }
+
+            return this;
+        }
+
         /// <summary>
         /// Tries to convert the given string to a Frequency.
         /// </summary>
@@ -137,12 +153,12 @@ namespace AngleSharp.Css.Values
         /// <returns>A valid CSS unit or None.</returns>
         public static Unit GetUnit(String s)
         {
-            switch (s)
+            return s switch
             {
-                case "hz": return Unit.Hz;
-                case "khz": return Unit.Khz;
-                default: return Unit.None;
-            }
+                "hz" => Unit.Hz,
+                "khz" => Unit.Khz,
+                _ => Unit.None,
+            };
         }
 
         /// <summary>

src/AngleSharp.Css/Values/Primitives/Identifier.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
 
@@ -58,7 +59,7 @@ namespace AngleSharp.Css.Values
         /// <param name="obj">The object to check against.</param>
         /// <returns>True if both are equal, otherwise false.</returns>
         public override Boolean Equals(Object obj) =>
-            obj is Identifier ident ? Equals(ident) : false;
+            obj is Identifier ident && Equals(ident);
 
         /// <summary>
         /// Gets the hash code of the object.
@@ -66,6 +67,11 @@ namespace AngleSharp.Css.Values
         /// <returns>The computed hash code.</returns>
         public override Int32 GetHashCode() => _text.GetHashCode();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Primitives/Label.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
 
@@ -43,6 +44,11 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         /// <summary>
         /// Checks the two labels for equality.
         /// </summary>
@@ -58,7 +64,7 @@ namespace AngleSharp.Css.Values
         /// <param name="obj">The object to check against.</param>
         /// <returns>True if both are equal, otherwise false.</returns>
         public override Boolean Equals(Object obj) =>
-            obj is Label label ? Equals(label) : false;
+            obj is Label label && Equals(label);
 
         /// <summary>
         /// Gets the hash code of the object.

src/AngleSharp.Css/Values/Primitives/Length.cs

@@ -1,11 +1,12 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
     /// Represents an absolute length value.
     /// </summary>
-    public readonly struct Length : IEquatable<Length>, IComparable<Length>, ICssPrimitiveValue
+    public readonly struct Length : IEquatable<Length>, IComparable<Length>, ICssMetricValue
     {
         #region Basic lengths
 
@@ -65,6 +66,15 @@ namespace AngleSharp.Css.Values
 
         #region ctor
 
+        /// <summary>
+        /// Creates a new length value in px.
+        /// </summary>
+        /// <param name="value">The value of the length in px.</param>
+        public Length(Double value)
+            : this(value, Unit.Px)
+        {
+        }
+
         /// <summary>
         /// Creates a new length value.
         /// </summary>
@@ -133,25 +143,25 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (_unit)
+                return _unit switch
                 {
-                    case Unit.Px: return UnitNames.Px;
-                    case Unit.Em: return UnitNames.Em;
-                    case Unit.Ex: return UnitNames.Ex;
-                    case Unit.Cm: return UnitNames.Cm;
-                    case Unit.Mm: return UnitNames.Mm;
-                    case Unit.In: return UnitNames.In;
-                    case Unit.Pt: return UnitNames.Pt;
-                    case Unit.Pc: return UnitNames.Pc;
-                    case Unit.Ch: return UnitNames.Ch;
-                    case Unit.Rem: return UnitNames.Rem;
-                    case Unit.Vw: return UnitNames.Vw;
-                    case Unit.Vh: return UnitNames.Vh;
-                    case Unit.Vmin: return UnitNames.Vmin;
-                    case Unit.Vmax: return UnitNames.Vmax;
-                    case Unit.Percent: return UnitNames.Percent;
-                    default: return String.Empty;
-                }
+                    Unit.Px => UnitNames.Px,
+                    Unit.Em => UnitNames.Em,
+                    Unit.Ex => UnitNames.Ex,
+                    Unit.Cm => UnitNames.Cm,
+                    Unit.Mm => UnitNames.Mm,
+                    Unit.In => UnitNames.In,
+                    Unit.Pt => UnitNames.Pt,
+                    Unit.Pc => UnitNames.Pc,
+                    Unit.Ch => UnitNames.Ch,
+                    Unit.Rem => UnitNames.Rem,
+                    Unit.Vw => UnitNames.Vw,
+                    Unit.Vh => UnitNames.Vh,
+                    Unit.Vmin => UnitNames.Vmin,
+                    Unit.Vmax => UnitNames.Vmax,
+                    Unit.Percent => UnitNames.Percent,
+                    _ => String.Empty,
+                };
             }
         }
 
@@ -213,6 +223,17 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            if (_unit != Length.Unit.Px)
+            {
+                var px = ToPixel(context.Device);
+                return new Length(px, Length.Unit.Px);
+            }
+
+            return this;
+        }
+
         /// <summary>
         /// Tries to convert the given string to a Length.
         /// </summary>
@@ -246,25 +267,25 @@ namespace AngleSharp.Css.Values
         /// <returns>A valid CSS unit or None.</returns>
         public static Unit GetUnit(String s)
         {
-            switch (s)
+            return s switch
             {
-                case "ch": return Unit.Ch;
-                case "cm": return Unit.Cm;
-                case "em": return Unit.Em;
-                case "ex": return Unit.Ex;
-                case "in": return Unit.In;
-                case "mm": return Unit.Mm;
-                case "pc": return Unit.Pc;
-                case "pt": return Unit.Pt;
-                case "px": return Unit.Px;
-                case "rem": return Unit.Rem;
-                case "vh": return Unit.Vh;
-                case "vmax": return Unit.Vmax;
-                case "vmin": return Unit.Vmin;
-                case "vw": return Unit.Vw;
-                case "%": return Unit.Percent;
-                default: return Unit.None;
-            }
+                "ch" => Unit.Ch,
+                "cm" => Unit.Cm,
+                "em" => Unit.Em,
+                "ex" => Unit.Ex,
+                "in" => Unit.In,
+                "mm" => Unit.Mm,
+                "pc" => Unit.Pc,
+                "pt" => Unit.Pt,
+                "px" => Unit.Px,
+                "rem" => Unit.Rem,
+                "vh" => Unit.Vh,
+                "vmax" => Unit.Vmax,
+                "vmin" => Unit.Vmin,
+                "vw" => Unit.Vw,
+                "%" => Unit.Percent,
+                _ => Unit.None,
+            };
         }
 
         /// <summary>

src/AngleSharp.Css/Values/Primitives/LineNames.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
     using System.Collections.Generic;
@@ -62,7 +63,7 @@ namespace AngleSharp.Css.Values
         /// <param name="obj">The object to check against.</param>
         /// <returns>True if both are equal, otherwise false.</returns>
         public override Boolean Equals(Object obj) =>
-            obj is LineNames names ? Equals(names) : false;
+            obj is LineNames names && Equals(names);
 
         /// <summary>
         /// Gets the hash code of the object.
@@ -70,6 +71,11 @@ namespace AngleSharp.Css.Values
         /// <returns>The computed hash code.</returns>
         public override Int32 GetHashCode() => CssText.GetHashCode();
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         #endregion
     }
 }

src/AngleSharp.Css/Values/Primitives/Point.cs

@@ -145,6 +145,23 @@ namespace AngleSharp.Css.Values
 
         #endregion
 
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            var x = _x.Compute(context);
+            var y = _x.Compute(context);
+
+            if (x != _x || y != _y)
+            {
+                return new Point(x, y);
+            }
+
+            return this;
+        }
+
+        #endregion
+
         #region Equality
 
         /// <summary>

src/AngleSharp.Css/Values/Primitives/Quote.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
 
@@ -51,6 +52,11 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         /// <summary>
         /// Checks the two quotes for equality.
         /// </summary>
@@ -66,7 +72,7 @@ namespace AngleSharp.Css.Values
         /// <param name="obj">The object to check against.</param>
         /// <returns>True if both are equal, otherwise false.</returns>
         public override Boolean Equals(Object obj) =>
-            obj is Quote quote ? Equals(quote) : false;
+            obj is Quote quote && Equals(quote);
 
         /// <summary>
         /// Gets the hash code of the object.

src/AngleSharp.Css/Values/Primitives/Ratio.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
@@ -55,6 +56,11 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
         /// <summary>
         /// Checks if the current resolution equals the given one.
         /// </summary>

src/AngleSharp.Css/Values/Primitives/Resolution.cs

@@ -1,11 +1,12 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
     /// Represents a resolution value.
     /// </summary>
-    public readonly struct Resolution : IEquatable<Resolution>, IComparable<Resolution>, ICssPrimitiveValue
+    public readonly struct Resolution : IEquatable<Resolution>, IComparable<Resolution>, ICssMetricValue
     {
         #region Fields
 
@@ -16,6 +17,15 @@ namespace AngleSharp.Css.Values
 
         #region ctor
 
+        /// <summary>
+        /// Creates a new resolution value.
+        /// </summary>
+        /// <param name="value">The value of the resolution in dppx.</param>
+        public Resolution(Double value)
+            : this(value, Unit.Dppx)
+        {
+        }
+
         /// <summary>
         /// Creates a new resolution value.
         /// </summary>
@@ -53,20 +63,13 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (_unit)
+                return _unit switch
                 {
-                    case Unit.Dpcm:
-                        return UnitNames.Dpcm;
-
-                    case Unit.Dpi:
-                        return UnitNames.Dpi;
-
-                    case Unit.Dppx:
-                        return UnitNames.Dppx;
-
-                    default:
-                        return String.Empty;
-                }
+                    Unit.Dpcm => UnitNames.Dpcm,
+                    Unit.Dpi => UnitNames.Dpi,
+                    Unit.Dppx => UnitNames.Dppx,
+                    _ => String.Empty,
+                };
             }
         }
 
@@ -74,6 +77,17 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            if (_unit != Unit.Dppx)
+            {
+                var dots = ToDotsPerPixel();
+                return new Resolution(dots, Unit.Dppx);
+            }
+
+            return this;
+        }
+
         /// <summary>
         /// Tries to convert the given string to a Resolution.
         /// </summary>
@@ -101,13 +115,13 @@ namespace AngleSharp.Css.Values
         /// <returns>A valid CSS unit or None.</returns>
         public static Unit GetUnit(String s)
         {
-            switch (s)
+            return s switch
             {
-                case "dpcm": return Unit.Dpcm;
-                case "dpi": return Unit.Dpi;
-                case "dppx": return Unit.Dppx;
-                default: return Unit.None;
-            }
+                "dpcm" => Unit.Dpcm,
+                "dpi" => Unit.Dpi,
+                "dppx" => Unit.Dppx,
+                _ => Unit.None,
+            };
         }
 
         /// <summary>

src/AngleSharp.Css/Values/Primitives/Time.cs

@@ -1,11 +1,12 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
     /// Represents a time value.
     /// </summary>
-    public readonly struct Time : IEquatable<Time>, IComparable<Time>, ICssPrimitiveValue
+    public readonly struct Time : IEquatable<Time>, IComparable<Time>, ICssMetricValue
     {
         #region Basic times
 
@@ -25,6 +26,15 @@ namespace AngleSharp.Css.Values
 
         #region ctor
 
+        /// <summary>
+        /// Creates a new time value.
+        /// </summary>
+        /// <param name="value">The value of the time in ms.</param>
+        public Time(Double value)
+            : this(value, Unit.Ms)
+        {
+        }
+
         /// <summary>
         /// Creates a new time value.
         /// </summary>
@@ -62,17 +72,12 @@ namespace AngleSharp.Css.Values
         {
             get
             {
-                switch (_unit)
+                return _unit switch
                 {
-                    case Unit.Ms:
-                        return UnitNames.Ms;
-
-                    case Unit.S:
-                        return UnitNames.S;
-
-                    default:
-                        return String.Empty;
-                }
+                    Unit.Ms => UnitNames.Ms,
+                    Unit.S => UnitNames.S,
+                    _ => String.Empty,
+                };
             }
         }
 
@@ -119,6 +124,17 @@ namespace AngleSharp.Css.Values
 
         #region Methods
 
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            if (_unit != Unit.Ms)
+            {
+                var ms = ToMilliseconds();
+                return new Time(ms, Unit.Ms);
+            }
+
+            return this;
+        }
+
         /// <summary>
         /// Tries to convert the given string to a Time.
         /// </summary>
@@ -146,12 +162,12 @@ namespace AngleSharp.Css.Values
         /// <returns>A valid CSS unit or None.</returns>
         public static Unit GetUnit(String s)
         {
-            switch (s)
+            return s switch
             {
-                case "s": return Unit.S;
-                case "ms": return Unit.Ms;
-                default: return Unit.None;
-            }
+                "s" => Unit.S,
+                "ms" => Unit.Ms,
+                _ => Unit.None,
+            };
         }
 
         /// <summary>

src/AngleSharp.Css/Values/Raws/CssAnyValue.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using System;
 
     /// <summary>
@@ -39,5 +40,15 @@ namespace AngleSharp.Css.Values
         public String CssText => _text;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            //TODO INVALID
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Raws/CssInheritValue.cs

@@ -8,10 +8,16 @@ namespace AngleSharp.Css.Values
     /// </summary>
     sealed class CssInheritValue : ICssSpecialValue
     {
+        #region ctor
+
         private CssInheritValue()
         {
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the only instance.
         /// </summary>
@@ -26,5 +32,16 @@ namespace AngleSharp.Css.Values
         /// Gets the CSS text representation.
         /// </summary>
         public String CssText => CssKeywords.Inherit;
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Raws/CssInitialValue.cs

@@ -40,5 +40,14 @@ namespace AngleSharp.Css.Values
         public String CssText => CssKeywords.Initial;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Raws/CssReferenceValue.cs

@@ -1,5 +1,6 @@
 namespace AngleSharp.Css.Values
 {
+    using AngleSharp.Css.Dom;
     using AngleSharp.Text;
     using System;
     using System.Collections.Generic;
@@ -10,10 +11,16 @@ namespace AngleSharp.Css.Values
     /// </summary>
     public sealed class CssReferenceValue : ICssRawValue
     {
+        #region Fields
+
         private readonly String _value;
         private readonly TextRange[] _ranges;
         private readonly CssVarValue[] _references;
 
+        #endregion
+
+        #region ctor
+
         /// <summary>
         /// Creates a new variable reference.
         /// </summary>
@@ -26,6 +33,10 @@ namespace AngleSharp.Css.Values
             _references = references.Select(m => m.Item2).ToArray();
         }
 
+        #endregion
+
+        #region Properties
+
         /// <summary>
         /// Gets the literal value of the shorthand.
         /// </summary>
@@ -45,5 +56,26 @@ namespace AngleSharp.Css.Values
         /// Gets the CSS text representation.
         /// </summary>
         public String CssText => _value;
+
+        #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            foreach (var reference in _references)
+            {
+                var result = reference.Compute(context);
+
+                if (result is not null)
+                {
+                    return result;
+                }
+            }
+
+            return null;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/Raws/CssUnsetValue.cs

@@ -40,5 +40,14 @@ namespace AngleSharp.Css.Values
         public String CssText => CssKeywords.Unset;
 
         #endregion
+
+        #region Methods
+
+        ICssValue ICssValue.Compute(ICssComputeContext context)
+        {
+            return this;
+        }
+
+        #endregion
     }
 }

src/AngleSharp.Css/Values/TransformMatrix.cs

@@ -208,7 +208,7 @@ namespace AngleSharp.Css.Values
         /// </summary>
         /// <param name="obj">The object to test with.</param>
         /// <returns>True if the two objects are equal, otherwise false.</returns>
-        public override Boolean Equals(Object obj) => obj is TransformMatrix other ? Equals(other) : false;
+        public override Boolean Equals(Object obj) => obj is TransformMatrix other && Equals(other);
 
         /// <summary>
         /// Returns a hash code that defines the current length.