Issue #2862 - Fix a few nested selectors

This commit is contained in:
Basilisk-Dev 2026-03-11 22:49:25 -04:00 • committed by wuggy
commit f2560c57b6
2 changed files with 134 additions and 145 deletions

View file

@ -683,7 +683,7 @@ private:
if (c == '{') { if (c == '{') {
return true; return true;
} }
if (c == ':' || c == ';' || c == '}') { if (c == ';' || c == '}') {
return false; return false;
} }
} }

View file

@ -1,10 +1,10 @@
<!doctype html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<title>Test for Basic CSS Nesting Lowering</title> <title>Test for Basic CSS Nesting Lowering</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script> <script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css" /> <link rel="stylesheet" href="/tests/SimpleTest/test.css">
</head> </head>
<body> <body>
<div id="scope" class="scope order"> <div id="scope" class="scope order">
@ -31,6 +31,10 @@
" border-left-style: solid;\n" + " border-left-style: solid;\n" +
" border-left-color: rgb(19, 20, 21);\n" + " border-left-color: rgb(19, 20, 21);\n" +
" }\n" + " }\n" +
" span:first-child, span:last-child {\n" +
" border-bottom-style: solid;\n" +
" border-bottom-color: rgb(22, 23, 24);\n" +
" }\n" +
" background-color: rgb(7, 8, 9);\n" + " background-color: rgb(7, 8, 9);\n" +
"}\n" + "}\n" +
"\n" + "\n" +
@ -59,54 +63,42 @@
var desc = document.getElementById("desc"); var desc = document.getElementById("desc");
var button = document.getElementById("button"); var button = document.getElementById("button");
report( report(colorOf(window, scope, "color") === "rgb(1, 2, 3)",
colorOf(window, scope, "color") === "rgb(1, 2, 3)",
"outer rule declarations should apply", "outer rule declarations should apply",
colorOf(window, scope, "color"), colorOf(window, scope, "color"),
"rgb(1, 2, 3)", "rgb(1, 2, 3)");
); report(colorOf(window, desc, "color") === "rgb(4, 5, 6)",
report(
colorOf(window, desc, "color") === "rgb(4, 5, 6)",
"nested descendant rule should be lowered", "nested descendant rule should be lowered",
colorOf(window, desc, "color"), colorOf(window, desc, "color"),
"rgb(4, 5, 6)", "rgb(4, 5, 6)");
); report(colorOf(window, desc, "border-left-color") === "rgb(19, 20, 21)",
report(
colorOf(window, desc, "border-left-color") === "rgb(19, 20, 21)",
"nested type selector rule should be lowered", "nested type selector rule should be lowered",
colorOf(window, desc, "border-left-color"), colorOf(window, desc, "border-left-color"),
"rgb(19, 20, 21)", "rgb(19, 20, 21)");
); report(colorOf(window, desc, "border-bottom-color") === "rgb(22, 23, 24)",
report( "nested type selector pseudos should be lowered",
colorOf(window, scope, "background-color") === "rgb(7, 8, 9)", colorOf(window, desc, "border-bottom-color"),
"rgb(22, 23, 24)");
report(colorOf(window, scope, "background-color") === "rgb(7, 8, 9)",
"declarations after a nested rule should preserve order", "declarations after a nested rule should preserve order",
colorOf(window, scope, "background-color"), colorOf(window, scope, "background-color"),
"rgb(7, 8, 9)", "rgb(7, 8, 9)");
); report(colorOf(window, button, "color") === "rgb(10, 11, 12)",
report(
colorOf(window, button, "color") === "rgb(10, 11, 12)",
"ampersand selectors should be expanded", "ampersand selectors should be expanded",
colorOf(window, button, "color"), colorOf(window, button, "color"),
"rgb(10, 11, 12)", "rgb(10, 11, 12)");
); report(colorOf(window, scope, "border-top-color") === "rgb(13, 14, 15)",
report(
colorOf(window, scope, "border-top-color") === "rgb(13, 14, 15)",
"nested group rules should target the parent selector", "nested group rules should target the parent selector",
colorOf(window, scope, "border-top-color"), colorOf(window, scope, "border-top-color"),
"rgb(13, 14, 15)", "rgb(13, 14, 15)");
); report(colorOf(window, scope, "border-right-color") === "rgb(16, 17, 18)",
report(
colorOf(window, scope, "border-right-color") === "rgb(16, 17, 18)",
"declarations after nested group rules should still apply", "declarations after nested group rules should still apply",
colorOf(window, scope, "border-right-color"), colorOf(window, scope, "border-right-color"),
"rgb(16, 17, 18)", "rgb(16, 17, 18)");
); report(style.sheet.cssRules.length === 9,
report(
style.sheet.cssRules.length === 8,
"lowering should produce flat top-level rules", "lowering should produce flat top-level rules",
String(style.sheet.cssRules.length), String(style.sheet.cssRules.length),
"8", "9");
);
} }
function runStandalone() { function runStandalone() {
@ -114,7 +106,7 @@
var lines = [ var lines = [
"Standalone mode.", "Standalone mode.",
"This page only demonstrates nesting if layout.css.nesting.enabled is already true in the browser.", "This page only demonstrates nesting if layout.css.nesting.enabled is already true in the browser.",
"", ""
]; ];
var style = appendTestSheet(); var style = appendTestSheet();
@ -131,11 +123,9 @@
function runMochitest() { function runMochitest() {
SimpleTest.waitForExplicitFinish(); SimpleTest.waitForExplicitFinish();
SpecialPowers.pushPrefEnv( SpecialPowers.pushPrefEnv({
{ set: [["layout.css.nesting.enabled", true]]
set: [["layout.css.nesting.enabled", true]], }, function() {
},
function () {
var style = appendTestSheet(); var style = appendTestSheet();
runChecks(style, function(pass, message, actual, expected) { runChecks(style, function(pass, message, actual, expected) {
@ -143,8 +133,7 @@
}); });
SimpleTest.finish(); SimpleTest.finish();
}, });
);
} }
if (typeof SimpleTest !== "undefined" && typeof SpecialPowers !== "undefined") { if (typeof SimpleTest !== "undefined" && typeof SpecialPowers !== "undefined") {