Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/style/test/mochitest.toml
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test for CSS parser reporting parsing errors with expected precision</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
</head>
<body>
<style id="testbench"></style>
<script>
SpecialPowers.wrap(window).docShell.cssErrorReportingEnabled = true;
// Tests that apply to all types of style sheets
var tests = [
{
css: "@unknown {}",
error: "Unrecognized at-rule or error parsing at-rule ‘@unknown’.",
}, {
css: "x { color: invalid; }",
error: "Expected color but found ‘invalid’. Error in parsing value for ‘color’. Declaration dropped.",
cssSelectors: "x",
}, {
css: "x { filter: alpha(foo); }",
error: "Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped.",
cssSelectors: "x",
}, {
css: "x { color: red; abc; }",
error: "Unknown property ‘abc;’. Declaration dropped.",
cssSelectors: "x",
}, {
css: "x { filter: 5; }",
error: "Expected ‘none’, URL, or filter function but found ‘5’. Error in parsing value for ‘filter’. Declaration dropped.",
cssSelectors: "x",
}, {
css: "::unknown {}",
error: "Unknown pseudo-class or pseudo-element ‘unknown’. Ruleset ignored due to bad selector.",
}, {
css: ":unknown {}",
error: "Unknown pseudo-class or pseudo-element ‘unknown’. Ruleset ignored due to bad selector.",
}, {
css: "::5 {}",
error: "Expected identifier for pseudo-class or pseudo-element but found ‘5’. Ruleset ignored due to bad selector.",
}, {
css: ": {}",
error: "Expected identifier for pseudo-class or pseudo-element but found ‘ ’. Ruleset ignored due to bad selector.",
}, {
css: "x[a.]{}",
error: "Unexpected token in attribute selector: ‘.’. Ruleset ignored due to bad selector.",
}, {
css: "x[*a]{}",
error: "Expected ‘|’ but found ‘a’. Ruleset ignored due to bad selector.",
}, {
css: "x[a=5]{}",
error: "Expected identifier or string for value in attribute selector but found ‘5’. Ruleset ignored due to bad selector.",
}, {
css: "x[$] {}",
error: "Expected attribute name or namespace but found ‘$’. Ruleset ignored due to bad selector.",
}, {
css: "a[|5] {}",
error: "Expected identifier for attribute name but found ‘5’. Ruleset ignored due to bad selector.",
}, {
css: "a[x|] {}",
error: "Unknown namespace prefix ‘x’. Ruleset ignored due to bad selector.",
}, {
css: "x| {}",
error: "Unknown namespace prefix ‘x’. Ruleset ignored due to bad selector.",
}, {
css: "a> {}",
error: "Dangling combinator. Ruleset ignored due to bad selector.",
}, {
css: "~ {}",
error: "Selector expected. Ruleset ignored due to bad selector.",
}, {
css: "| {}",
error: "Expected element name or ‘*’ but found ‘ ’. Ruleset ignored due to bad selector.",
}, {
css: ". {}",
error: "Expected identifier for class selector but found ‘ ’. Ruleset ignored due to bad selector.",
}, {
css: ":not() {}",
error: "Selector expected. Ruleset ignored due to bad selector.",
}, {
css: "* { -webkit-text-size-adjust: 100% }",
error: "Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped.",
cssSelectors: "*",
}, {
css: "@media (totally-unknown-feature) {}",
error: "Expected media feature name but found ‘totally-unknown-feature’.",
}, {
css: "@media \"foo\" {}",
error: "Unexpected token ‘\"foo\"’ in media list.",
}, {
css: "@media (min-width) {}",
error: "Media features with min- or max- must have a value.",
}, {
css: "@media (min-width >= 3px) {}",
error: "Unexpected operator in media list.",
}, {
css: "@media (device-height: three) {}",
error: "Found invalid value for media feature.",
}, {
css: "@media (min-width: foo) {}",
error: "Found invalid value for media feature.",
}, {
css: "@media (min-resolution: 2) {}",
error: "Found invalid value for media feature.",
}, {
css: "@media (min-monochrome: 1.1) {}",
error: "Found invalid value for media feature.",
}, {
css: "@media (min-aspect-ratio: 1 invalid) {}",
error: "Unexpected token ‘invalid’ in media list.",
}, {
css: "@media (min-aspect-ratio: 1 / invalid) {}",
error: "Found invalid value for media feature.",
}, {
css: "@media (orientation: invalid-orientation-value) {}",
error: "Found invalid value for media feature.",
}, {
css: "a, .b, #c { unknown: invalid; }",
error: "Unknown property ‘unknown’. Declaration dropped.",
cssSelectors: "a, .b, #c"
},
{
css: ":host:hover { color: red; }",
error: ":host selector in ‘:host:hover’ is not featureless and will never match. Maybe you intended to use :host()?"
},
{
css: "@position-try --foo { width: 10px !important; }",
error: "Property cannot be declared as !important in this context. Declaration dropped."
},
{
css: '@property --my-property { initial-value: green; inherits: true; }',
error: "@property syntax descriptor is missing."
},
{
css: '@property --my-property { syntax: "<color>"; initial-value: green; }',
error: "@property inherits descriptor is missing."
},
{
css: '@property --my-property { syntax: "<color>"; initial-value: green; inherits: maybe; }',
error: "@property inherits descriptor ‘inherits: maybe;’ does not match specified syntax."
},
];
// Tests that apply only to constructed style sheets
var constructedSheetTests = [
{
css: '@import url("sheet.css");',
error: "@import rules are not yet valid in constructed stylesheets."
}
];
function assertMessages(messages, action) {
return new Promise(resolve => {
SimpleTest.expectConsoleMessages(action, messages, resolve);
});
}
async function runTests() {
for (let {css, cssSelectors = "", error} of tests) {
let messages = [ { cssSelectors, errorMessage: error } ];
await assertMessages(messages, () => { testbench.innerHTML = css });
await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) });
await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) });
}
for (let {css, cssSelectors = "", error} of constructedSheetTests) {
let messages = [ { cssSelectors, errorMessage: error } ];
await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) });
await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) });
}
}
add_task(runTests);
</script>