41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Nesting: Style invalidates after CSSOM mutations to nested rules</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-style-rule">
|
|
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-group-rules">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<style id=set_parent_selector_text_style>
|
|
.set_parent_selector_text {
|
|
div {
|
|
color: red;
|
|
}
|
|
.a1 {
|
|
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(getComputedStyle(a1).color, 'rgb(255, 0, 0)');
|
|
assert_equals(getComputedStyle(a2).color, 'rgb(0, 128, 0)');
|
|
}, 'Nested rule responds to parent selector text change');
|
|
</script>
|
|
|