layout/style/test/test_css_parse_error_smoketest.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Test for CSS parser reporting parsing errors with expected precision</title>
   6   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   8 </head>
   9 <body>
  10 <style id="testbench"></style>
  11 <script>
  12   SpecialPowers.wrap(window).docShell.cssErrorReportingEnabled = true;
  13   // Tests that apply to all types of style sheets
  14   var tests = [
  15     {
  16       css: "@unknown {}",
  17       error: "Unrecognized at-rule or error parsing at-rule ‘@unknown’.",
  18     }, {
  19       css: "x { color: invalid; }",
  20       error: "Expected color but found ‘invalid’.  Error in parsing value for ‘color’.  Declaration dropped.",
  21       cssSelectors: "x",
  22     }, {
  23       css: "x { filter: alpha(foo); }",
  24       error: "Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped.",
  25       cssSelectors: "x",
  26     }, {
  27       css: "x { color: red; abc; }",
  28       error: "Unknown property ‘abc;’.  Declaration dropped.",
  29       cssSelectors: "x",
  30     }, {
  31       css: "x { filter: 5; }",
  32       error: "Expected ‘none’, URL, or filter function but found ‘5’.  Error in parsing value for ‘filter’.  Declaration dropped.",
  33       cssSelectors: "x",
  34     }, {
  35       css: "::unknown {}",
  36       error: "Unknown pseudo-class or pseudo-element ‘unknown’.  Ruleset ignored due to bad selector.",
  37     }, {
  38       css: ":unknown {}",
  39       error: "Unknown pseudo-class or pseudo-element ‘unknown’.  Ruleset ignored due to bad selector.",
  40     }, {
  41       css: "::5 {}",
  42       error: "Expected identifier for pseudo-class or pseudo-element but found ‘5’.  Ruleset ignored due to bad selector.",
  43     }, {
  44       css: ": {}",
  45       error: "Expected identifier for pseudo-class or pseudo-element but found ‘ ’.  Ruleset ignored due to bad selector.",
  46     }, {
  47       css: "x[a.]{}",
  48       error: "Unexpected token in attribute selector: ‘.’.  Ruleset ignored due to bad selector.",
  49     }, {
  50       css: "x[*a]{}",
  51       error: "Expected ‘|’ but found ‘a’.  Ruleset ignored due to bad selector.",
  52     }, {
  53       css: "x[a=5]{}",
  54       error: "Expected identifier or string for value in attribute selector but found ‘5’.  Ruleset ignored due to bad selector.",
  55     }, {
  56       css: "x[$] {}",
  57       error: "Expected attribute name or namespace but found ‘$’.  Ruleset ignored due to bad selector.",
  58     }, {
  59       css: "a[|5] {}",
  60       error: "Expected identifier for attribute name but found ‘5’.  Ruleset ignored due to bad selector.",
  61     }, {
  62       css: "a[x|] {}",
  63       error: "Unknown namespace prefix ‘x’.  Ruleset ignored due to bad selector.",
  64     }, {
  65       css: "x| {}",
  66       error: "Unknown namespace prefix ‘x’.  Ruleset ignored due to bad selector.",
  67     }, {
  68       css: "a> {}",
  69       error: "Dangling combinator.  Ruleset ignored due to bad selector.",
  70     }, {
  71       css: "~ {}",
  72       error: "Selector expected.  Ruleset ignored due to bad selector.",
  73     }, {
  74       css: "| {}",
  75       error: "Expected element name or ‘*’ but found ‘ ’.  Ruleset ignored due to bad selector.",
  76     }, {
  77       css: ". {}",
  78       error: "Expected identifier for class selector but found ‘ ’.  Ruleset ignored due to bad selector.",
  79     }, {
  80       css: ":not() {}",
  81       error: "Selector expected.  Ruleset ignored due to bad selector.",
  82     }, {
  83       css: "* { -webkit-text-size-adjust: 100% }",
  84       error: "Error in parsing value for ‘-webkit-text-size-adjust’.  Declaration dropped.",
  85       cssSelectors: "*",
  86     }, {
  87       css: "@media (totally-unknown-feature) {}",
  88       error: "Expected media feature name but found ‘totally-unknown-feature’.",
  89     }, {
  90       css: "@media \"foo\" {}",
  91       error: "Unexpected token ‘\"foo\"’ in media list.",
  92     }, {
  93       css: "@media (min-width) {}",
  94       error: "Media features with min- or max- must have a value.",
  95     }, {
  96       css: "@media (min-width >= 3px) {}",
  97       error: "Unexpected operator in media list.",
  98     }, {
  99       css: "@media (device-height: three) {}",
 100       error: "Found invalid value for media feature.",
 101     }, {
 102       css: "@media (min-width: foo) {}",
 103       error: "Found invalid value for media feature.",
 104     }, {
 105       css: "@media (min-resolution: 2) {}",
 106       error: "Found invalid value for media feature.",
 107     }, {
 108       css: "@media (min-monochrome: 1.1) {}",
 109       error: "Found invalid value for media feature.",
 110     }, {
 111       css: "@media (min-aspect-ratio: 1 invalid) {}",
 112       error: "Unexpected token ‘invalid’ in media list.",
 113     }, {
 114       css: "@media (min-aspect-ratio: 1 / invalid) {}",
 115       error: "Found invalid value for media feature.",
 116     }, {
 117       css: "@media (orientation: invalid-orientation-value) {}",
 118       error: "Found invalid value for media feature.",
 119     }, {
 120       css: "a, .b, #c { unknown: invalid; }",
 121       error: "Unknown property ‘unknown’.  Declaration dropped.",
 122       cssSelectors: "a, .b, #c"
 123     },
 124     {
 125       css: ":host:hover { color: red; }",
 126       error: ":host selector in ‘:host:hover’ is not featureless and will never match. Maybe you intended to use :host()?"
 127     },
 128   ];
 129
 130   // Tests that apply only to constructed style sheets
 131   var constructedSheetTests = [
 132     {
 133       css: '@import url("sheet.css");',
 134       error: "@import rules are not yet valid in constructed stylesheets."
 135     }
 136   ];
 137
 138   function assertMessages(messages, action) {
 139     return new Promise(resolve => {
 140       SimpleTest.expectConsoleMessages(action, messages, resolve);
 141     });
 142   }
 143
 144   async function runTests() {
 145     for (let {css, cssSelectors = "", error} of tests) {
 146       let messages = [ { cssSelectors, errorMessage: error } ];
 147       await assertMessages(messages, () => { testbench.innerHTML = css });
 148       await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) });
 149       await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) });
 150     }
 151     for (let {css, cssSelectors = "", error} of constructedSheetTests) {
 152       let messages = [ { cssSelectors, errorMessage: error } ];
 153       await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) });
 154       await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) });
 155     }
 156   }
 157
 158   add_task(runTests);
 159
 160 </script>