Emilio Cobos Álvarez
de97758a99
This happens because when we fail to parse a declaration with nesting, we try to parse as a selector, and that fails but the error still contains an "invalid declaration". However the error reporting code gets a bit confused because we get an invalid decl error, but with a selector error. For now, make sure we always provide a param. That's dealt cleanly by messages that don't expect it. Do some minor clean-up while at it too. Differential Revision: https://phabricator.services.mozilla.com/D253748
183 lines
7.2 KiB
HTML
183 lines
7.2 KiB
HTML
<!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."
|
||
},
|
||
{
|
||
css: 'foo { :host(:not[bar]) & { color: red } }',
|
||
// This is not the most ideal error, but it's better than nothing.
|
||
error: "Unknown property ‘:host(:not[bar]) & {’. Declaration dropped.",
|
||
cssSelectors: "foo",
|
||
},
|
||
];
|
||
|
||
// 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>
|