I'd be happy to take a stab at this. I guess we want it to look something like https://github.com/Modernizr/Modernizr/blob/e6aafdec12f7cb7dba7a5033a54ac30ada91c927/feature-detects/css/checked.js?

We'd have to focus the element to see if it receives the style or not, though. Would that cause any issues?

hey @OliverJAsh!
Yep, that is how you would reliably detect support. Changing focus is a nightmare, however. You would want to cache document.activeElement and reapply focus() after the fact.

Edit:
Actually! There is a simpler way.

document.querySelector throws on invalid selectors. You can just call document.querySelector(':focus-within') within a try-catch, if it doesn't throw it should be supported. We may find a browser that gives a false result, in which case we would need to actually test the style. However, in the mean time since it is a modern feature, we should be good with just that sniff test for now

document.querySelector(':focus-within') within a try-catch, if it doesn't throw it should be supported

Oh, neat!

If I was to raise a PR and add a test for this, how would I test the Modernizr test locally? Is there a testing framework I can use? Are the Modernizr tests tested at build time? I couldn't find any docs on this.

If I was to raise a PR and add a test for this, how would I test the Modernizr test locally?

add the file to the feature-detects folder, and then run grunt test. The results of the test are checked against caniuse data, so make sure to include it in the metadata header.

Is there a testing framework I can use?

the repo uses mocha, however the tests will be run at PR time, so by all means feel free to let travis to the work

#2287