CSS selectors and properties testing

The objective of this example is to show some of the intended use of the supportAtRule, supportSelector, supportProperty, supportMediaQuery methods that may be found here.

The three methods allow direct inspection of supported features (at-rules, selectors, properties) using browsers own internal CSS parser. To ease the task I narrowed down my objective to only one exact thing for now, use the browser to validate some CSS syntax before injecting that into elements style or document stylesheets for use in testing and production code.

The intent was not to show or find browser bugs but test for missing support compared to standard specifications, this has nothing to do with how well browsers results are rendered on the screen nor with correctness of browser implementations.

The code just checks for what seems to be available using feature detection.

How is detection performed

Using Javascript... and observing behavior of browsers own internal CSS parsers engines.

On W3C compliant browsers the insertRule()/deleteRule() methods of the stylesheet object are used to manipulate the rules with the requested "tokens" and the outcome is inspected to match. As can be seen on the CSS interfaces it is possible to take advantage of the "DOMException" thrown by the API method available in the IDL definition.

The operation is performed in a try/catch block to take advantage of the CSS engine throwing error and letting us know of the unexpected illegal syntax.

On IE browsers up to the latest IE8 when a rule is inserted in the stylesheet, it produces two changes in the parsed output: a) the selectorText property is set to the upper case string 'UNKNOWN' if it is invalid, b) the representation read back from the stylesheet cssText have properties with upper case names if they are recognized, or they are discarded from the representation if unknown to the parser.

It was noticed that some specific properties would persist in the cssText representation maintaining the original case in names, we have taken that as a failure in these test as it seemed most adequate with the expected result.

In IE the invalid properties values are converted to the lower case string 'undefined' as an extra notification that the property is not consistent with expected value/type (maybe enumerated).

Notes: