<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=657143 --> <head> <title>Test for Bug 657143</title> <script type="text/javascript" src="/MochiKit/MochiKit.js"></script> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=657143">Mozilla Bug 657143</a> <p id="display"></p> <style> /* Ensure that there is at least one custom property on the root element's computed style */ :root { --test: some value; } </style> <div id="content" style="display: none"> </div> <pre id="test"> <script class="testbody" type="text/javascript"> /** Test for Bug 657143 **/ // Check ordering of CSS properties in nsComputedDOMStylePropertyList.h // by splitting the getComputedStyle() into five sublists // then cloning and sort()ing the lists and comparing with originals. function isMozPrefixed(aProp) { return aProp.startsWith("-moz"); } function isNotMozPrefixed(aProp) { return !isMozPrefixed(aProp); } function isWebkitPrefixed(aProp) { return aProp.startsWith("-webkit"); } function isNotWebkitPrefixed(aProp) { return !isWebkitPrefixed(aProp); } function isCustom(aProp) { return aProp.startsWith("--"); } function isNotCustom(aProp) { return !isCustom(aProp); } var styleList = window.getComputedStyle(document.documentElement); cssA = [], mozA = [], webkitA = [], svgA = [], customA = []; // Partition the list of property names into four lists: // // cssA: regular, non-SVG properties // mozA: '-moz-' prefixed properties // svgA: SVG properties // customA: '--' prefixed custom properties var list = cssA; for (var i = 0, j = styleList.length; i < j; i++) { var prop = styleList.item(i); switch (list) { case cssA: if (isMozPrefixed(prop)) { list = mozA; } // fall through case mozA: if (isWebkitPrefixed(prop)) { list = webkitA; } // fall through case webkitA: // Assume that the first SVG property is 'clip-path'. if (prop == "clip-path") { list = svgA; } // fall through case svgA: if (isCustom(prop)) { list = customA; } // fall through } list.push(prop); } var cssB = cssA.slice(0).sort(), mozB = mozA.slice(0).sort(), webkitB = webkitA.slice(0).sort(), svgB = svgA.slice(0).sort(); is(cssA.toString(), cssB.toString(), 'CSS property list should be alphabetical'); is(mozA.toString(), mozB.toString(), 'Experimental -moz- CSS property list should be alphabetical'); is(webkitA.toString(), webkitB.toString(), 'Compatible -webkit- CSS property list should be alphabetical'); is(svgA.toString(), svgB.toString(), 'SVG property list should be alphabetical'); // We don't test that the custom property list is sorted, as the CSSOM // specification does not yet require it, and we don't return them // in sorted order. ok(!cssA.find(isWebkitPrefixed), 'Compatible -webkit- CSS properties should not be in the mature CSS property list'); ok(!cssA.find(isMozPrefixed), 'Experimental -moz- CSS properties should not be in the mature CSS property list'); ok(!cssA.find(isCustom), 'Custom CSS properties should not be in the mature CSS property list'); ok(!mozA.find(isWebkitPrefixed), 'Compatible -webkit- CSS properties should not be in the experimental -moz- CSS ' + 'property list'); ok(!mozA.find(isNotMozPrefixed), 'Experimental -moz- CSS property list should not contain non -moz- prefixed ' + 'CSS properties'); ok(!mozA.find(isCustom), 'Custom CSS properties should not be in the experimental -moz- CSS property list'); ok(!webkitA.find(isNotWebkitPrefixed), 'Compatible -webkit- CSS properties should not contain non -webkit- prefixed ' + 'CSS properties'); ok(!webkitA.find(isMozPrefixed), 'Experimental -moz- CSS properties should not be in the compatible -webkit- CSS ' + 'property list'); ok(!webkitA.find(isCustom), 'Custom CSS properties should not be in the compatible -webkit- CSS property list'); ok(!svgA.find(isWebkitPrefixed), 'Compatible -webkit- CSS properties should not be in the SVG property list'); ok(!svgA.find(isMozPrefixed), 'Experimental -moz- CSS properties should not be in the SVG property list'); ok(!svgA.find(isCustom), 'Custom CSS properties should not be in the SVG property list'); ok(!customA.find(isNotCustom), 'Non-custom CSS properties should not be in the custom property list'); </script> </pre> </body> </html>