mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
Tests: Import all WPT css/css-nesting tests
A few are skipped for now: - A few ref tests fail - Crash tests are not supported by our runner and time out - top-level-is-scope.html crashes and needs further investigation
This commit is contained in:
Sam Atkins
committed by
Andreas Kling
Andreas Kling
parent
6bb1ffbcd3
commit
b0e79ce549
Notes:
github-actions[bot]
2024-11-07 14:12:28 +00:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/LadybirdBrowser/ladybird/commit/b0e79ce549b Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2202
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<title>CSS Nesting: CSSNestedDeclarations matching</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.trailing {
|
||||
--x: FAIL;
|
||||
& { --x: FAIL; }
|
||||
--x: PASS;
|
||||
}
|
||||
</style>
|
||||
<div class=trailing></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.trailing');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Trailing declarations apply after any preceding rules');
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.trailing_no_leading {
|
||||
& { --x: FAIL; }
|
||||
--x: PASS;
|
||||
}
|
||||
</style>
|
||||
<div class=trailing_no_leading></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.trailing_no_leading');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Trailing declarations apply after any preceding rules (no leading)');
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.trailing_multiple {
|
||||
--x: FAIL;
|
||||
--y: FAIL;
|
||||
--z: FAIL;
|
||||
--w: FAIL;
|
||||
& { --x: FAIL; }
|
||||
--x: PASS;
|
||||
--y: PASS;
|
||||
& { --z: FAIL; }
|
||||
--z: PASS;
|
||||
--w: PASS;
|
||||
}
|
||||
</style>
|
||||
<div class=trailing_multiple></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.trailing_multiple');
|
||||
let s = getComputedStyle(e);
|
||||
assert_equals(s.getPropertyValue('--x'), 'PASS');
|
||||
assert_equals(s.getPropertyValue('--y'), 'PASS');
|
||||
assert_equals(s.getPropertyValue('--z'), 'PASS');
|
||||
assert_equals(s.getPropertyValue('--w'), 'PASS');
|
||||
}, 'Trailing declarations apply after any preceding rules (multiple)');
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.trailing_specificity {
|
||||
--x: FAIL;
|
||||
:is(&, div.nomatch2) { --x: PASS; } /* Specificity: (0, 1, 1) */
|
||||
--x: FAIL; /* Specificity: (0, 1, 0) */
|
||||
}
|
||||
</style>
|
||||
<div class=trailing_specificity></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.trailing_specificity');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Nested declarations rule has same specificity as outer selector');
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
#nomatch, .specificity_top_level {
|
||||
--x: FAIL;
|
||||
:is(&, div.nomatch2) { --x: PASS; } /* Specificity: (0, 1, 1) */
|
||||
--x: FAIL; /* Specificity: (0, 1, 0). In particular, this does not have
|
||||
specificity like :is(#nomatch, .specificity_top_level). */
|
||||
}
|
||||
</style>
|
||||
<div class=specificity_top_level></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.specificity_top_level');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Nested declarations rule has top-level specificity behavior');
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
#nomatch, .specificity_top_level_max, div.specificity_top_level_max {
|
||||
--x: FAIL;
|
||||
:is(:where(&), div.nomatch2) { --x: FAIL; } /* Specificity: (0, 1, 1) */
|
||||
--x: PASS; /* Specificity: (0, 1, 1) (for div.specificity_top_level_max) */
|
||||
}
|
||||
</style>
|
||||
<div class=specificity_top_level_max></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.specificity_top_level_max');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Nested declarations rule has top-level specificity behavior (max matching)');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.nested_pseudo::after {
|
||||
--x: FAIL;
|
||||
@media (width > 0px) {
|
||||
--x: PASS;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class=nested_pseudo></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.nested_pseudo');
|
||||
assert_equals(getComputedStyle(e, '::after').getPropertyValue('--x'), 'PASS');
|
||||
}, 'Bare declartaion in nested grouping rule can match pseudo-element');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#nomatch, .nested_group_rule {
|
||||
--x: FAIL;
|
||||
@media (width > 0px) {
|
||||
--x: FAIL; /* Specificity: (0, 1, 0) */
|
||||
}
|
||||
--x: PASS;
|
||||
}
|
||||
</style>
|
||||
<div class=nested_group_rule></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.nested_group_rule');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Nested group rules have top-level specificity behavior');
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.nested_scope_rule {
|
||||
div:where(&) { /* Specificity: (0, 0, 1) */
|
||||
--x: PASS;
|
||||
}
|
||||
@scope (&) {
|
||||
--x: FAIL; /* Specificity: (0, 0, 0) */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class=nested_scope_rule></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.nested_scope_rule');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Nested @scope rules behave like :where(:scope)');
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.nested_scope_rule_trailing {
|
||||
div:where(&) { /* Specificity: (0, 0, 1) */
|
||||
--x: PASS;
|
||||
}
|
||||
@scope (&) {
|
||||
--ignored: 1;
|
||||
.ignored {}
|
||||
--x: FAIL; /* Specificity: (0, 0, 0) */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class=nested_scope_rule_trailing></div>
|
||||
<script>
|
||||
test(() => {
|
||||
let e = document.querySelector('.nested_scope_rule_trailing');
|
||||
assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
|
||||
}, 'Nested @scope rules behave like :where(:scope) (trailing)');
|
||||
</script>
|
||||
|
||||
|
||||
<style id=set_parent_selector_text_style>
|
||||
.set_parent_selector_text {
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
.a1 {
|
||||
.ignored {}
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class=set_parent_selector_text>
|
||||
<div class=a1>A1</div>
|
||||
<div class=a2>A2</div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
let a1 = document.querySelector('.set_parent_selector_text > .a1');
|
||||
let a2 = document.querySelector('.set_parent_selector_text > .a2');
|
||||
assert_equals(getComputedStyle(a1).color, 'rgb(0, 128, 0)');
|
||||
assert_equals(getComputedStyle(a2).color, 'rgb(255, 0, 0)');
|
||||
|
||||
let rules = set_parent_selector_text_style.sheet.cssRules;
|
||||
assert_equals(rules.length, 1);
|
||||
assert_equals(rules[0].cssRules.length, 2);
|
||||
|
||||
let a_rule = rules[0].cssRules[1];
|
||||
assert_equals(a_rule.selectorText, '& .a1');
|
||||
a_rule.selectorText = '.a2';
|
||||
assert_equals(a_rule.selectorText, '& .a2');
|
||||
|
||||
assert_equals(getComputedStyle(a1).color, 'rgb(255, 0, 0)');
|
||||
assert_equals(getComputedStyle(a2).color, 'rgb(0, 128, 0)');
|
||||
}, 'Nested declarations rule responds to parent selector text change');
|
||||
</script>
|
||||
Reference in New Issue
Block a user