Giters

AngleSharp / AngleSharp.Css

:angel: Library to enable support for cascading stylesheets in AngleSharp.

Home Page:https://anglesharp.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The margin CSS properties are not correctly parsed when unit-less

vladislav-todorov opened this issue · comments

commented

Description

The margin properties are not correctly parsed when unit-less. As you can see on the playground (https://playcode.io/1750419) the margins of the elements are respected when rendering the page. Unfortunately, the ParseStyleSheet() method does not respect them.

Steps to Reproduce

Run the following example:

using AngleSharp.Css.Dom;
using AngleSharp.Css.Parser;

string style = "p { margin-top: 80; margin-bottom: 40; margin-left: 60; margin-right: 20; }";
CssParser cssParser = new CssParser(new CssParserOptions()
{
    IsIncludingUnknownDeclarations = true,
    IsIncludingUnknownRules = true,
    IsToleratingInvalidSelectors = true,
});
ICssStyleSheet sheet = cssParser.ParseStyleSheet(style);
ICssRule rule = sheet.Rules[0];
Console.WriteLine(rule.CssText);
Console.ReadLine();

Expected Behavior

The output should be:
p { margin-top: 80; margin-bottom: 40; margin-left: 60; margin-right: 20; }

Actual Behavior

The output is:
p { }

Possible Solution / Known Workarounds

Change:

public static IValueConverter Converter = AutoLengthOrPercentConverter;

to this:

public static IValueConverter Converter = Or(
            AutoLengthOrPercentConverter,
            NumberConverter);

in the respective declaration classes.

commented

This is all working as it should.

Compare with the spec and the behavior in real browsers:

image

There are just a couple of CSS values that (for historical reasons) work unitless.

commented

(Note that unitless behavior is different in quirks mode, i.e., without a proper HTML5 doctype. AngleSharp, however, only has limited support for quirks mode and AngleSharp.Css does not support quirks mode. You can see that with your demo when you prepend <!DOCTYPE html> to the document.)