mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Anders Hartvoll Ruud
1b0d010be2
Automatic update from web-platform-tests [css-nesting] Implement CSSNestedDeclarations behind a flag The CSSWG recently resolved to change how "bare" declarations work when mixed with nested style rules. Previously, any declaration following a nested style rule would be "shifted up" to join the leading declarations, but as of the work leading up to Issue 10234 [1], such declarations now instead remain in place (wrapped in a CSSNestedDeclarations rule). This CL implements this rule, as well as the parser changes needed to produce those rules during ConsumeDeclarationList. The parsing behavior is similar to the behavior previously seen for emitting signalling/invisible rules (removed in CL:5593832), although naturally without any signalling, nor any invisibility. Per spec, CSSNestedDeclarations is a kind of style rule that matches exactly what its parent style rule matches, and with the same specificity behavior. This is different from the '&' pseudo-class, which uses the maximum specificity across its arguments, and can't match pseudo-elements. This CL implements this via an inner StyleRule, held by the CSSNestedDeclarations rule. This inner StyleRule can't be observed via CSSOM. It exists primarily to be able to bucket the rule normally on RuleSet. [1] https://github.com/w3c/csswg-drafts/issues/10234 Change-Id: If9afe0cbb41e7de0acdd781ecfbf6884d677c6f8 Binary-Size: crbug.com/344608183 Bug: 343463516, 361600667 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5594117 Reviewed-by: Steinar H Gunderson <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Reviewed-by: Philip Pfaffe <[email protected]> Cr-Commit-Position: refs/heads/main@{#1347266} -- wpt-commits: b23720e948f2af9d5ddb01d94ca49fbd1c40382e wpt-pr: 47744
113 lines
2.1 KiB
HTML
113 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>Basic nesting</title>
|
|
<link rel="author" title="Adam Argyle" href="mailto:[email protected]">
|
|
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
|
<link rel="match" href="nesting-basic-ref.html">
|
|
<style>
|
|
.test {
|
|
background-color: red;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
}
|
|
|
|
.test-1 {
|
|
& > div {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
.test-2 {
|
|
& > div {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
.test-3 {
|
|
& .test-3-child {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
span > b {
|
|
.test-4 section & {
|
|
display: inline-block;
|
|
background-color: green;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.test-4 section > & {
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
.test-6 {
|
|
&.test {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
.test-7, .t7- {
|
|
& + .test-7-child, &.t7-- {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
.test-8 {
|
|
& {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
.test-9 {
|
|
&:is(.t9-, &.t9--) {
|
|
background-color: green;
|
|
}
|
|
}
|
|
|
|
.test-10 {
|
|
& {
|
|
background-color: red;
|
|
}
|
|
background-color: green;
|
|
}
|
|
|
|
.test-11 {
|
|
& {
|
|
background-color: red;
|
|
}
|
|
background-color: green !important;
|
|
}
|
|
|
|
/* & at top level counts as :scope, i.e. the root element here */
|
|
& .test-12 {
|
|
background-color: green;
|
|
}
|
|
& > .test-12 {
|
|
background-color: red !important;
|
|
}
|
|
|
|
body * + * {
|
|
margin-top: 8px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<p>Tests pass if <strong>block is green</strong></p>
|
|
<div class="test test-1"><div></div></div>
|
|
<div class="test test-2"><div></div></div>
|
|
<div class="test test-3"><div class="test-3-child"></div></div>
|
|
<div class="test test-4">
|
|
<section>
|
|
<span><b></b></span>
|
|
</section>
|
|
</div>
|
|
<div class="test test-6"><div></div></div>
|
|
<div class="test t7- t7--"><div class="test-7-child"></div></div>
|
|
<div class="test test-8"><div></div></div>
|
|
<div class="test test-9 t9-- t9-"><div></div></div>
|
|
<div class="test test-10"><div></div></div>
|
|
<div class="test test-11"><div></div></div>
|
|
<div class="test test-12"></div>
|
|
</body>
|