mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-19 14:57:32 +09:00
149 lines
4.8 KiB
HTML
149 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test CSS Nesting Flattening Recovery Paths</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
|
|
</head>
|
|
<body>
|
|
<div id="recBase" class="rec-base"><span id="recBaseChild"></span></div>
|
|
<div id="recMalformed" class="rec-malformed"></div>
|
|
<div id="recGroup" class="rec-group"></div>
|
|
<div id="recTail" class="rec-tail"></div>
|
|
<pre id="standalone-log"></pre>
|
|
<script>
|
|
"use strict";
|
|
|
|
function propOf(win, element, property) {
|
|
return win.getComputedStyle(element).getPropertyValue(property);
|
|
}
|
|
|
|
function appendTestSheet() {
|
|
var style = document.createElement("style");
|
|
style.textContent =
|
|
".rec-base {\n" +
|
|
" color: rgb(1, 2, 3);\n" +
|
|
" |* {\n" +
|
|
" color: rgb(4, 5, 6);\n" +
|
|
" }\n" +
|
|
" background-color: rgb(7, 8, 9);\n" +
|
|
"}\n" +
|
|
"\n" +
|
|
".rec-malformed {\n" +
|
|
" color: rgb(20, 21, 22);\n" +
|
|
" : {\n" +
|
|
" color: rgb(23, 24, 25);\n" +
|
|
" }\n" +
|
|
" border-top-style: solid;\n" +
|
|
" border-top-color: rgb(26, 27, 28);\n" +
|
|
"}\n" +
|
|
"\n" +
|
|
".rec-group {\n" +
|
|
" color: rgb(32, 33, 34);\n" +
|
|
" @counter-style rec-counter {\n" +
|
|
" system: fixed;\n" +
|
|
" symbols: a;\n" +
|
|
" }\n" +
|
|
" background-color: rgb(35, 36, 37);\n" +
|
|
"}\n" +
|
|
"\n" +
|
|
".rec-tail {\n" +
|
|
" color: rgb(50, 51, 52);\n" +
|
|
"}\n";
|
|
document.head.appendChild(style);
|
|
return style;
|
|
}
|
|
|
|
function runChecks(style, report) {
|
|
var recBase = document.getElementById("recBase");
|
|
var recBaseChild = document.getElementById("recBaseChild");
|
|
var recMalformed = document.getElementById("recMalformed");
|
|
var recGroup = document.getElementById("recGroup");
|
|
var recTail = document.getElementById("recTail");
|
|
|
|
report(propOf(window, recBase, "color") === "rgb(1, 2, 3)",
|
|
"unsupported nested selector should not wipe earlier declarations",
|
|
propOf(window, recBase, "color"),
|
|
"rgb(1, 2, 3)");
|
|
report(propOf(window, recBase, "background-color") === "rgb(7, 8, 9)",
|
|
"unsupported nested selector should not wipe later declarations",
|
|
propOf(window, recBase, "background-color"),
|
|
"rgb(7, 8, 9)");
|
|
report(propOf(window, recBaseChild, "color") === "rgb(1, 2, 3)",
|
|
"unsupported nested selector should not restyle descendants unexpectedly",
|
|
propOf(window, recBaseChild, "color"),
|
|
"rgb(1, 2, 3)");
|
|
|
|
report(propOf(window, recMalformed, "color") === "rgb(20, 21, 22)",
|
|
"malformed nested selector should keep declaration before it",
|
|
propOf(window, recMalformed, "color"),
|
|
"rgb(20, 21, 22)");
|
|
report(propOf(window, recMalformed, "border-top-color") === "rgb(26, 27, 28)",
|
|
"malformed nested selector should keep declaration after it",
|
|
propOf(window, recMalformed, "border-top-color"),
|
|
"rgb(26, 27, 28)");
|
|
|
|
report(propOf(window, recGroup, "color") === "rgb(32, 33, 34)",
|
|
"nested unsupported at-rule should keep declaration before it",
|
|
propOf(window, recGroup, "color"),
|
|
"rgb(32, 33, 34)");
|
|
report(propOf(window, recGroup, "background-color") === "rgb(35, 36, 37)",
|
|
"nested unsupported at-rule should keep declaration after it",
|
|
propOf(window, recGroup, "background-color"),
|
|
"rgb(35, 36, 37)");
|
|
|
|
report(propOf(window, recTail, "color") === "rgb(50, 51, 52)",
|
|
"rules after recovery scenarios should still parse",
|
|
propOf(window, recTail, "color"),
|
|
"rgb(50, 51, 52)");
|
|
|
|
report(style.sheet.cssRules.length >= 4,
|
|
"stylesheet should remain parseable after recovery scenarios",
|
|
String(style.sheet.cssRules.length),
|
|
">= 4");
|
|
}
|
|
|
|
function runStandalone() {
|
|
var log = document.getElementById("standalone-log");
|
|
var lines = [
|
|
"Standalone mode.",
|
|
"This page only demonstrates nesting if layout.css.nesting.enabled is already true in the browser.",
|
|
""
|
|
];
|
|
var style = appendTestSheet();
|
|
|
|
runChecks(style, function(pass, message, actual, expected) {
|
|
lines.push((pass ? "PASS" : "FAIL") + ": " + message);
|
|
if (!pass) {
|
|
lines.push(" expected: " + expected);
|
|
lines.push(" actual: " + actual);
|
|
}
|
|
});
|
|
|
|
log.textContent = lines.join("\n");
|
|
}
|
|
|
|
function runMochitest() {
|
|
SimpleTest.waitForExplicitFinish();
|
|
SpecialPowers.pushPrefEnv({
|
|
set: [["layout.css.nesting.enabled", true]]
|
|
}, function() {
|
|
var style = appendTestSheet();
|
|
|
|
runChecks(style, function(pass, message, actual, expected) {
|
|
ok(pass, message + " (expected: " + expected + ", actual: " + actual + ")");
|
|
});
|
|
|
|
SimpleTest.finish();
|
|
});
|
|
}
|
|
|
|
if (typeof SimpleTest !== "undefined" && typeof SpecialPowers !== "undefined") {
|
|
runMochitest();
|
|
} else {
|
|
runStandalone();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|