| <!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> |
