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?
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4