GeezerVison is showing github.com — wpt/css/selectors/not-specificity.html at master · web-platform-tests/wpt

Expand file tree

not-specificity.html

Copy path

More file actions

Latest commit

History

50 lines (42 loc) · 1.7 KB

not-specificity.html

Copy path

File metadata and controls

50 lines (42 loc) · 1.7 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

<!DOCTYPE html>

<title>Specificity for complex :not selectors</title>

<style>

main :not(#foo) { --t0:PASS; }

main :not(.foo) { --t0:FAIL; }

main :not(div#foo) { --t1:PASS; }

main :not(#foo) { --t1:FAIL; }

main :not(.bar, #foo) { --t2:FAIL; }

main :not(#foo, .bar) { --t2:PASS; }

main :not(.bar, #foo) { --t3:PASS; }

main :not(.foo, .bar) { --t3:FAIL; }

main :not(span + span) { --t4:PASS; }

main :not(span) { --t4:FAIL; }

main :not(span, li, #foo) { --t5:PASS; }

main :not(span, li, p) { --t5:FAIL; }

main :not(span, :not(:not(.a#foo)), p) { --t6:PASS; }

main :not(span, #foo, p) { --t6:FAIL; }

main :not(span, #foo, p) { --t7:PASS; }

main :not(span, :where(.a#foo), p) { --t7:FAIL; }

</style>

</main>

function test_value(name, description) {

test(function() {

let actual = getComputedStyle(div).getPropertyValue(name);

assert_equals(actual, 'PASS');

}, description);

}

test_value('--t0', ':not(#foo) wins over :not(.foo)');

test_value('--t1', ':not(div#foo) wins over :not(#foo)');

test_value('--t2', ':not(.bar, #foo) has same specificity as :not(#foo, .bar)');

test_value('--t3', ':not(.bar, #foo) wins over :not(.foo, .bar)');

test_value('--t4', ':not(span + span) wins over :not(span)');

test_value('--t5', ':not(span, li, p) wins over :not(span, lo, p)');

test_value('--t6', ':not(span, :not(:not(.a#foo)), p) wins over :not(span, #foo, p)');

test_value('--t7', ':not(span, #foo, p) wins over :not(span, :where(.a#foo), p)');

</script>