Error in HTML after upgrade to 0.10

[jogibear9988]

I use following Code:

                    element = CreateElement("button", htmlDocument);
                    ((IHtmlElement) element).GetStyle().SetPointerEvents("auto");
                    ((IHtmlElement) element).GetStyle().SetBorderWidth("1px");
                    ((IHtmlElement) element).GetStyle().SetBorderStyle("solid");
                    ((IHtmlElement) element).GetStyle().SetBorderColor("black");

wich creates following HTML:

     <button style="pointer-events: auto;border-width: 1px;border-top: solid rgba(0, 0, 0, 1);border-right: solid rgba(0, 0, 0, 1);border-bottom: solid rgba(0, 0, 0, 1);border-left: solid rgba(0, 0, 0, 1);"</button>

wich is wrong in Chrome, cause then bordersize is 3px and not 1px

[jogibear9988]

also it would be nice if the generated css would be smaller (when all borders are the same, they could be combined)

[FlorianRappl]

This is actually what is tried and done inside. Note, however, that recombination is not as simple as you think.

[jogibear9988]

i don't think it's easy. ;-)

[jogibear9988]

is there anything I could help to get this fixed?

[FlorianRappl]

Sure - contribute directly via making the required changes to the source code. There are two locations for this:

1. Generically the recombination algorithms (but I think its mostly non-generic, so this could be also the wrong lead); look at the IValueAggregator and extension methods for it. Specifically the ones used from the CssStyleDeclaration
2. The specific value aggregators. Usually they are in the static declaration classes (we have one for each declaration). The ones for the shorthands also specify an IValueAggregator instance instead of just a IValueConverter.

Sorry that this seems to be quite high-level. I will try to break it down a little bit later, but truth is that the code needs further simplification and improvement in this area. I am hoping to have some time to work in this soon, but currently again busy with some other projects.

I think the whole value model needs further refinement (this is the reason it is not exposed yet).

HTH and let me know if you need further information.

[jogibear9988]

Maybe as a first step, I disable the aggregation completely? better long corrent styles instead of wrong short ones?

[jogibear9988]

Is there a way to disable aggregation via code atm?

[FlorianRappl]

Not sure if I understand the problem; if you don't want the aggregation then just access the declarations (shorthands are not always expanded, so accessing the declarations gives you for sure the individual ones).

As a result you can just make a simple serialization a la String.Join("; ", declarations.Select(m => m.CssText)).

HTH!

[jogibear9988]

The problem is

https://github.com/AngleSharp/AngleSharp.Css/blob/master/src/AngleSharp.Css/Dom/Internal/CssStyleDeclaration.cs#L140

shorthandName is "border-width"

then the aggregator here

https://github.com/AngleSharp/AngleSharp.Css/blob/master/src/AngleSharp.Css/Dom/Internal/CssStyleDeclaration.cs#L171

returns a value and you remove them

https://github.com/AngleSharp/AngleSharp.Css/blob/master/src/AngleSharp.Css/Dom/Internal/CssStyleDeclaration.cs#L178

and so for the next shortHandName = "border-top"

the longhands array is missing the values for "border-width" and the aggregator returns wrong result

[FlorianRappl]

Yes - PR welcome :)

[jogibear9988]

if I remove the following line:

https://github.com/AngleSharp/AngleSharp.Css/blob/master/src/AngleSharp.Css/Dom/Internal/CssStyleDeclaration.cs#L178

the following test

    [Test]
    public void CssBorderTest()
    {
        var context = BrowsingContext.New(Configuration.Default.WithCss());
        var style = new CssStyleDeclaration(context);
        style.SetBorderWidth("1px");
        style.SetBorderStyle("solid");
        style.SetBorderColor("black");
        var css = style.CssText;
    }

will return this

  border-width: 1px; border-top: 1px solid rgba(0, 0, 0, 1); border-right: solid rgba(0, 0, 0, 1); border-bottom: solid rgba(0, 0, 0, 1); border-left: solid rgba(0, 0, 0, 1)

without invalid code is generated

[jogibear9988]

Yes - PR welcome :)

atm. I've no good idea how to fix. Only to remove the line, so no incorrect css is generated