44 lines
1.4 KiB
HTML
44 lines
1.4 KiB
HTML
|
<!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>
|