Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
IanKemp opened this issue Jun 12, 2022 · 1 comment
Closed
Milestone

Comments

@IanKemp
Copy link

IanKemp commented Jun 12, 2022

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?

@IanKemp IanKemp changed the title Pseudo-element style rules don't appear to be correctly computed Pseudo-element style rules don't appear to be correctly read from external stylesheet Jun 12, 2022
@IanKemp IanKemp changed the title Pseudo-element style rules don't appear to be correctly read from external stylesheet Pseudo-element style rules don't appear to be read from external stylesheet Jun 12, 2022
@FlorianRappl FlorianRappl added this to the v1.0 milestone Jan 15, 2023
@FlorianRappl
Copy link
Contributor

This is a duplicate of #140 (and therefore implicitly also #133). Solved and ready with next preview / 1.0.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants