Grid Area wrong parsed

[jogibear9988]

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version of AngleSharp?
• 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

Grid area is converted to wrong css

Steps to Reproduce

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]

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]

I can fix this by adding

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

to this method:

AngleSharp.Css/src/AngleSharp.Css/Declarations/GridAreaDeclaration.cs

Line 65 in e549e0b

private static ICssValue GetItemSimple(CssTupleValue tuple, Int32 index)

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.