Em css properties do not give enough information to calculate value.

[jbrayfaithlife]

Bug Report

Prerequisites

• [/] Can you reproduce the problem in a MWE?
• [/] Are you running the latest version of AngleSharp.Css?
• [/] Did you check the FAQs to see if that helps you?
• [/] Are you reporting to the correct repository? (there are multiple AngleSharp libraries, e.g., AngleSharp.Css for CSS support)
• [/] Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Description

Computed Styles do not translate em units. This does not match the behavior of the javascript function window.getComputedStyles. In the case of font-size this becomes particularly problematic because the CssProperty does not correctly set the IsInherited property. This means that in the case of an element that has inherited an em font-size, there is no way to calculate what the "true" font-size is.

Edit: upon further review of the IsInherited property, I now understand that to mean that it is indicated whether the property has a declaration of inherit, in which case this is not the flag we would need to set to solve this problem. Either we may calculate the em units properly or indicate that the css property returned does not originate on the element itself so that the value could be calculated.

Steps to Reproduce

var config = Configuration.Default.WithCss();
var context= BrowsingContext.New(config);
var source = "<p>This is <span>only</span> a test.</p>";
var cssSheet = "p { font-size: 1.5em }";
var document = await context.OpenAsync(req => req.Content(source));
var style = document.CreateElement<IHtmlStyleElement>();
style.TextContent = cssSheet;
document.Head.AppendChild(style);
var span = document.QuerySelector("span");
var fontSize = span.ComputeCurrentStyle().GetProperty("font-size");
fontSize.IsInherited.Dump();
fontSize.Value.Dump();

Expected behavior: Either IsInherited == true, or Value == 24px. Ideally both.

Actual behavior: IsInherited == false AND Value == 1.5em

Environment details: Windows, .NET 6.0.14

Possible Solution

First, when a cssProperty is computed from the parent of the element in question, IsInherited should be set to true.

Ideally Length units would utilize the ToPixels method to translate relative units to pixels, as this is the behavior of the javascript method that is being mirrored.

[jbrayfaithlife]

I was going to take a crack at solving this problem, but I am unable to assign myself to the bug.

[ddunkin]

We've worked around this by computing the values as part of rendering. https://github.com/Faithlife/AngleSharp.Css/tree/render

[FlorianRappl]

Landed in devel.