search

AngleSharp / AngleSharp.Css

:angel: Library to enable support for cascading stylesheets in AngleSharp.
https://anglesharp.github.io
MIT License
72 stars 34 forks source link

Parentheses in calc() expression removed #67

Closed mganss closed 3 years ago

mganss commented 3 years ago

Parentheses in calc() expressions are removed. Repro:

var p = new HtmlParser(new HtmlParserOptions(), BrowsingContext.New(new Configuration().WithCss(new CssParserOptions())));
var dom = p.ParseDocument(@"<html><body><div style=""width: calc((600px - 300px) / 2)"">Test</div></body></html>");
var div = dom.QuerySelector("div");
var style = div.GetStyle();
var css = style.CssText; // -> "width: calc(600px - 300px / 2)"

This works in both Chrome and Firefox, yielding 150px instead of 450px for the test case above. Strangely, it seems the spec doesn't allow for parentheses: https://drafts.csswg.org/css-values-3/#calc-notation

OTOH at [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc()#syntax) it says:

You may also use parentheses to establish computation order when needed.

Nested calc()s are also removed by AngleSharp.Css as well, yet these are clearly allowed by the spec.

var p = new HtmlParser(new HtmlParserOptions(), BrowsingContext.New(new Configuration().WithCss(new CssParserOptions())));
var dom = p.ParseDocument(@"<html><body><div style=""width: calc(calc(600px - 300px) / 2)"">Test</div></body></html>");
var div = dom.QuerySelector("div");
var style = div.GetStyle();
var css = style.CssText; // -> "width: calc(600px - 300px / 2)"

This issue causes https://github.com/mganss/HtmlSanitizer/issues/263.

FlorianRappl commented 3 years ago

Yeah that is indeed an issue - I think the current implementation is a bit too naive here, but I guess it can be easily extended by bringing in a special kind of value for these bracket expressions.