test_css_parse_error_smoketest.html (7349B)
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 css: "@position-try --foo { width: 10px !important; }", 130 error: "Property cannot be declared as !important in this context. Declaration dropped." 131 }, 132 { 133 css: '@property --my-property { initial-value: green; inherits: true; }', 134 error: "@property syntax descriptor is missing." 135 }, 136 { 137 css: '@property --my-property { syntax: "<color>"; initial-value: green; }', 138 error: "@property inherits descriptor is missing." 139 }, 140 { 141 css: '@property --my-property { syntax: "<color>"; initial-value: green; inherits: maybe; }', 142 error: "@property inherits descriptor ‘inherits: maybe;’ does not match specified syntax." 143 }, 144 { 145 css: 'foo { :host(:not[bar]) & { color: red } }', 146 // This is not the most ideal error, but it's better than nothing. 147 error: "Unknown property ‘:host(:not[bar]) & {’. Declaration dropped.", 148 cssSelectors: "foo", 149 }, 150 ]; 151 152 // Tests that apply only to constructed style sheets 153 var constructedSheetTests = [ 154 { 155 css: '@import url("sheet.css");', 156 error: "@import rules are not yet valid in constructed stylesheets." 157 } 158 ]; 159 160 function assertMessages(messages, action) { 161 return new Promise(resolve => { 162 SimpleTest.expectConsoleMessages(action, messages, resolve); 163 }); 164 } 165 166 async function runTests() { 167 for (let {css, cssSelectors = "", error} of tests) { 168 let messages = [ { cssSelectors, errorMessage: error } ]; 169 await assertMessages(messages, () => { testbench.innerHTML = css }); 170 await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) }); 171 await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) }); 172 } 173 for (let {css, cssSelectors = "", error} of constructedSheetTests) { 174 let messages = [ { cssSelectors, errorMessage: error } ]; 175 await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) }); 176 await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) }); 177 } 178 } 179 180 add_task(runTests); 181 182 </script>