Skip to content

Pseudo-element style rules don't appear to be read from external stylesheet #116

@IanKemp

Description

@IanKemp

Please see project attached: AngleSharpCssPseudoTest.zip

In brief I have test.css with the following CSS rule defined:

.thing[data-foo*="4"] .inner:before {
    background: red;
    content: "bar ";
}

Then I have test.html that references test.css with an element that uses the aforementioned rule:

<div class="thing" data-foo="1 2 3 4 5 6 7">
    <div class="inner first">This is red</div>
</div>

Finally I'm attempting to retrieve the rule definition as applied to the .first element via:

var config = Configuration.Default
	.WithRequesters()
	.WithDefaultLoader(new LoaderOptions { IsResourceLoadingEnabled = true })
	.WithCss();

var context = BrowsingContext.New(config);

var htmlFile = $"file:{Path.Combine(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location)!, "test.html")}";
var document = await context.OpenAsync(htmlFile);

var element = document.QuerySelector(".first");
var tree = document.DefaultView.Render();
var node = tree.Find(element);
await node.DownloadResources();

var style = document.DefaultView.GetComputedStyle(element);
var pseudos = document.DefaultView.GetPseudoElements(element);

Console.WriteLine(style.CssText);
Console.WriteLine(pseudos["::before"].Style.CssText);

Console.ReadKey(true);

But no matter what I do I cannot retrieve the content of that CSS rule; all I get back is the default style of display: block; unicode-bidi: embed applied to that element.

However, if I change the CSS style to be defined inline in test.html and remove the reference to test.css:

<style>
	.thing[data-foo*="4"] .inner:before {
		background: red;
		content: "bar ";
	}
</style>

then pseudos["::before"].Style.CssText returns what I expect.

I assume I'm loading the stylesheet incorrectly somehow (although document.StyleSheets does return test.css), please can you advise what I'm doing wrong?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions