<!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="result inside valid">This should be green if not() pseudo class selector works inside @supports rule.</div>
<div class="result outside valid">This should be green if not() pseudo class selector works after/outside @supports rule.</div>

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

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

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

<script src="../resources/js-test-pre.js"></script>
<script>
    description("Test that @supports doesn't break 'not' pseudo class selector.");


    shouldBeDefined("CSSRule.SUPPORTS_RULE");

    evalAndLog("rules = document.styleSheets[1].cssRules");
    shouldEvaluateTo("rules.length", 2);
    shouldBe("rules[0].type", "CSSRule.SUPPORTS_RULE");
    shouldEvaluateTo("rules[0].cssRules.length", 1);
    shouldBe("rules[0].cssRules[0].type", "CSSRule.STYLE_RULE");
    shouldBeEqualToString("rules[0].cssRules[0].style.color", "green");
    shouldBe("rules[1].type", "CSSRule.STYLE_RULE");
    shouldBeEqualToString("rules[1].style.color", "green");

    evalAndLog("rules = document.styleSheets[2].cssRules");
    shouldEvaluateTo("rules.length", 2);
    shouldBe("rules[1].type", "CSSRule.STYLE_RULE");
    shouldBeEqualToString("rules[1].style.color", "green");

    evalAndLog("rules = document.styleSheets[3].cssRules");
    shouldEvaluateTo("rules.length", 1);
    shouldBe("rules[0].type", "CSSRule.STYLE_RULE");
    shouldBeEqualToString("rules[0].style.color", "green");

    debug("Checks all elements are green.");
    var results = document.getElementsByClassName("result");
    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        shouldBeEqualToString("getComputedStyle(result, null).color", "rgb(0, 128, 0)");
    }
</script>
<script src="../resources/js-test-post.js"></script>