jogibear9988 commented 2 years ago

Bug Report

Prerequisites

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

For more information, see the CONTRIBUTING guide.

Grid area is converted to wrong css

Try this snippet:

        var source = "#nav-header {grid-area: navheader; }";
        var css = ParseStyleSheet(source);
        var text = css.Rules[0].CssText;

Expected behavior: [What you expected to happen]

I expect the text to be the same as in source (or nearly)

Actual behavior: [What actually happened]

the text look like this:

   #nav-header { grid-area: navheader / navheader / auto / auto }

problem is, this text renders the html differently then the original one (at least in chrome)

jogibear9988 commented 2 years ago

If you do this in Chrome:

  $0.style.gridArea="bb"
  window.getComputedStyle($0).gridRowEnd
  window.getComputedStyle($0).gridColEnd

you get "bb" for both of the values. AngleSharp set's them to "auto"

jogibear9988 commented 2 years ago

I can fix this by adding

            if (tuple.Items.Length > 0)
            {
                return tuple.Items[0];
            }

to this method:

before that line:

  return new Constant<Object>(CssKeywords.Auto, null);

but I don't know how to fix the minification correctly.

I think in the Merge if all 4 values are the same, they should be merged back to one.