<!DOCTYPE html>
<style>
div { color: red; }
</style>
<style>
@supports (display:block) {
    div:not(.outside).valid { color: green; }
}
div:not(.inside).valid {
    color:green;
}
</style>
<style>
div.nocondition.inside { color: green; }
@supports {
    div:not(.outside).nocondition { color: red; }
}
div:not(.inside).nocondition {
    color:green;
}
</style>
<style>
div.norule.outside { color: green; }
@supports (display:block)
div:not(.inside).norule {
    color:red;
}
</style>
<style>
@supports;
div:not(.inside).semicolon {
    color:green;
}
</style>
<div class="inside valid">This should be green if not() pseudo class selector works inside @supports rule.</div>
<div class="outside valid">This should be green if not() pseudo class selector works after/outside @supports rule.</div>

<div class="inside nocondition">This should be green if not() pseudo class selector DOES NOT work inside @supports rule without condition.</div>
<div class="outside nocondition">This should be green if not() pseudo class selector works after/outside @supports rule without condition.</div>

<div class="outside norule">This should be green if not() pseudo class selector DOES NOT work after/outside @supports rule without rule.</div>

<div class="outside semicolon">This should be green if not() pseudo class selector works after/outside @supports rule without condition and rule.</div>