CSS Conditional Tests: @supports selector() - Complete Test Suite

Test 1: @supports selector() with multiple selectors doesn't work

Test passes if there is a filled green square and no red.

This tests whether browsers correctly fail the condition for multiple selectors in selector().

Test 2: @supports selector() with -webkit- unknown pseudo-elements and negation

Test passes if there is a filled green square and no red.

This tests whether browsers correctly handle negation with an unknown pseudo-element.

Test 3: @supports selector() with pseudo-elements

Test passes if there is a filled green square and no red.

This tests whether browsers recognize pseudo-elements in the selector() function.

Test 4: @supports selector() with compound selector

Test passes if there is a filled green square and no red.

This tests whether browsers can handle complex compound selectors in the selector() function.

Test 5: @supports selector() with unsupported but valid pseudo and negation

Test passes if there is a filled green square and no red.

This tests whether browsers give back a valid syntax selector
(obscure edge case CSS used: :nth-child(1 of .foo)) that isn't actually supported.

Test 6: @supports selector() with cascade of selectors

Test passes if there is a filled green square and no red.

This tests whether browsers can handle passing cascaded selectors.

Test 7: @supports selector() with :has() pseudo-class and negation

Test passes if there is a filled green square and no red.

This tests whether browsers correctly identify support for the :has() pseudo-class. This is not supported yet.

Test 8.1: @supports selector(:nth-child(5n))

Test passes if there is a filled green square.

Test 8.2: @supports selector(:nth-child(2n))

Test passes if there is a filled green square.

Test 8.3: @supports selector(li:nth-child(2n))

Test passes if there is a filled green square.

Test 8.4: @supports selector(:nth-child(odd))

Test passes if there is a filled green square.

Test 8.5: @supports selector(:nth-child(even))

Test passes if there is a filled green square.

Test 8.6: @supports selector(:nth-child(3n+1))

Test passes if there is a filled green square.

Test 8.7: @supports selector(:nth-child(2n + 2))

Test passes if there is a filled green square.

Test 9: @supports not selector(div)

Test passes if there is a filled green square.

Test 10: Complex selector chain
@supports selector(section > div:nth-child(2n+1):not(.foo, .bar):hover)

Test passes if there is a filled green square.