How can i Assert that the CSS for a page has successfully loaded and applied its styles in Watin 2.1?
相关问题
- Adding a timeout to a render function in ReactJS
-
Why does the box-shadow property not apply to a
- Add animation to jQuery function Interval
- jQuery hover to slide?
- Issue with star rating css
There has been an update to the article lined to by @ShadowScripter. The new method purportedly works in all browsers, including FF.
Since browser compatibility can vary, and new future browser standards subject to change, I would recommend a combination of the onload listener and adding CSS to the style sheet so you can listen for when the HTML elements z-index changes if you are using a single style sheet. Otherwise, use the function below with a new meta tag for each style.
Add the following to the CSS file that you are loading:
Add the following to your script:
Example
index.html
:script.js
:the_style.css
PLEASE do not make your script load synchronously (without the
async
attribute) just so you can capture the link's onload event. There are better ways, like the method above.After doing some research and writing up my answer, I stumbled upon this link that explains everything you need to know about CSS, when it is loaded and how you can check for it.
The link provided explains it so well, in fact, that I'm adding some quotes from it for future reference.
If you're curious, my answer was going to be #2 and a variation of #4.
When is a stylesheet really loaded?
...
With that out of the way, let's see what we have here.
Options for the magic part, sorted from nice-and-easy to ridiculous
5th option is too crazy and assumes you have control over the content of the CSS, so forget it. Plus it checks for current styles in a timeout meaning it will flush the reflow queue and can be potentially slow. The slower the CSS to arrive, the more reflows. So, really, forget it.
So how about implementing the magic?
After page load you can verify the style on some of your elements something like this:
And etc...