layout/inspector/tests/test_bug877690.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

michael@0 1 <!DOCTYPE HTML>
michael@0 2 <html>
michael@0 3 <!--
michael@0 4 https://bugzilla.mozilla.org/show_bug.cgi?id=877690
michael@0 5 -->
michael@0 6 <head>
michael@0 7 <meta charset="utf-8">
michael@0 8 <title>Test for Bug 877690</title>
michael@0 9 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
michael@0 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
michael@0 11 <script type="application/javascript">
michael@0 12
michael@0 13 /** Test for Bug 877690 **/
michael@0 14
michael@0 15 // Returns true if array contains item. False otherwise. Raises an exception if
michael@0 16 // array is not an Array object. If the item is found in array, remove item.
michael@0 17 function contains(array, item) {
michael@0 18 if (!array.indexOf) {
michael@0 19 throw new "First argument is not an array";
michael@0 20 }
michael@0 21 var index = array.indexOf(item);
michael@0 22 if (index == -1) {
michael@0 23 return false;
michael@0 24 }
michael@0 25 array.splice(index, 1);
michael@0 26 return true;
michael@0 27 }
michael@0 28
michael@0 29 // Returns true if values contains all and only the expected values. False otherwise.
michael@0 30 function testValues(values, expected) {
michael@0 31 expected.forEach(function (expectedValue) {
michael@0 32 if (!contains(values, expectedValue)) {
michael@0 33 return false;
michael@0 34 }
michael@0 35 });
michael@0 36 return values.length === 0;
michael@0 37 }
michael@0 38
michael@0 39 function do_test() {
michael@0 40 var utils = SpecialPowers.Cc["@mozilla.org/inspector/dom-utils;1"]
michael@0 41 .getService(SpecialPowers.Ci.inIDOMUtils);
michael@0 42
michael@0 43 // test a property with keywords and colors
michael@0 44 var prop = "color";
michael@0 45 var values = utils.getCSSValuesForProperty(prop);
michael@0 46 var expected = [ "initial", "inherit", "unset", "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure",
michael@0 47 "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood",
michael@0 48 "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson",
michael@0 49 "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey",
michael@0 50 "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred",
michael@0 51 "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey",
michael@0 52 "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue",
michael@0 53 "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold",
michael@0 54 "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew", "hotpink", "indianred",
michael@0 55 "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
michael@0 56 "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey",
michael@0 57 "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey",
michael@0 58 "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine",
michael@0 59 "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen",
michael@0 60 "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite",
michael@0 61 "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen",
michael@0 62 "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue",
michael@0 63 "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen",
michael@0 64 "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen",
michael@0 65 "steelblue", "tan", "teal", "thistle", "tomato", "transparent", "turquoise", "violet", "wheat",
michael@0 66 "white", "whitesmoke", "yellow", "yellowgreen", "rgb", "hsl", "rgba", "hsla" ];
michael@0 67 ok(testValues(values, expected), "property color's values.");
michael@0 68
michael@0 69 // test a shorthand property
michael@0 70 var prop = "background";
michael@0 71 var values = utils.getCSSValuesForProperty(prop);
michael@0 72 var expected = [ "initial", "inherit", "unset", "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure",
michael@0 73 "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue",
michael@0 74 "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue",
michael@0 75 "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta",
michael@0 76 "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue",
michael@0 77 "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray",
michael@0 78 "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
michael@0 79 "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew", "hotpink", "indianred",
michael@0 80 "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
michael@0 81 "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink",
michael@0 82 "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue",
michael@0 83 "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue",
michael@0 84 "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen",
michael@0 85 "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin",
michael@0 86 "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod",
michael@0 87 "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum",
michael@0 88 "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown",
michael@0 89 "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey",
michael@0 90 "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "transparent", "turquoise",
michael@0 91 "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen", "no-repeat", "repeat",
michael@0 92 "repeat-x", "repeat-y", "fixed", "scroll", "local", "center", "top", "bottom", "left", "right",
michael@0 93 "border-box", "padding-box", "content-box", "border-box", "padding-box", "content-box", "contain",
michael@0 94 "cover", "rgb", "hsl", "rgba", "hsla", "none", "-moz-element", "-moz-image-rect", "url", "linear-gradient",
michael@0 95 "radial-gradient", "repeating-linear-gradient", "repeating-radial-gradient", "-moz-linear-gradient",
michael@0 96 "-moz-radial-gradient", "-moz-repeating-linear-gradient", "-moz-repeating-radial-gradient" ];
michael@0 97 ok(testValues(values, expected), "Shorthand property values.");
michael@0 98
michael@0 99 var prop = "border";
michael@0 100 var values = utils.getCSSValuesForProperty(prop);
michael@0 101 var expected = [ "-moz-calc", "initial", "unset", "-moz-use-text-color", "aliceblue",
michael@0 102 "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet",
michael@0 103 "brown", "burlywood", "cadetblue", "calc", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk",
michael@0 104 "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki",
michael@0 105 "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
michael@0 106 "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "dashed", "deeppink",
michael@0 107 "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "dotted", "double", "fill", "firebrick", "floralwhite",
michael@0 108 "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "grey", "green", "greenyellow",
michael@0 109 "groove", "hidden", "honeydew", "hotpink", "hsl", "hsla", "indianred", "indigo", "inherit", "inset", "ivory",
michael@0 110 "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan",
michael@0 111 "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen",
michael@0 112 "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen",
michael@0 113 "linen", "logical", "magenta", "maroon", "medium", "mediumaquamarine", "mediumblue", "mediumorchid",
michael@0 114 "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
michael@0 115 "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "none",
michael@0 116 "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "outset", "palegoldenrod", "palegreen",
michael@0 117 "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "physical", "pink", "plum", "powderblue",
michael@0 118 "purple", "red", "repeat", "rgb", "rgba", "ridge", "rosybrown", "round", "royalblue", "saddlebrown", "salmon",
michael@0 119 "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey",
michael@0 120 "snow", "solid", "springgreen", "steelblue", "stretch", "tan", "teal", "thick", "thin", "thistle", "tomato",
michael@0 121 "transparent", "turquoise", "-moz-element", "-moz-image-rect", "url", "violet", "wheat", "white", "whitesmoke",
michael@0 122 "yellow", "yellowgreen", "linear-gradient", "radial-gradient", "repeating-linear-gradient",
michael@0 123 "repeating-radial-gradient", "-moz-linear-gradient", "-moz-radial-gradient", "-moz-repeating-linear-gradient",
michael@0 124 "-moz-repeating-radial-gradient" ]
michael@0 125 ok(testValues(values, expected), "Shorthand property values.");
michael@0 126
michael@0 127 // test keywords only
michael@0 128 var prop = "border-top";
michael@0 129 var values = utils.getCSSValuesForProperty(prop);
michael@0 130 var expected = [ "initial", "inherit", "unset", "thin", "medium", "thick", "none", "hidden", "dotted",
michael@0 131 "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "-moz-use-text-color",
michael@0 132 "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black",
michael@0 133 "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse",
michael@0 134 "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan",
michael@0 135 "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen",
michael@0 136 "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray",
michael@0 137 "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey",
michael@0 138 "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
michael@0 139 "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew", "hotpink", "indianred",
michael@0 140 "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
michael@0 141 "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey",
michael@0 142 "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey",
michael@0 143 "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine",
michael@0 144 "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen",
michael@0 145 "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite",
michael@0 146 "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen",
michael@0 147 "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue",
michael@0 148 "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell",
michael@0 149 "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue",
michael@0 150 "tan", "teal", "thistle", "tomato", "transparent", "turquoise", "violet", "wheat", "white", "whitesmoke",
michael@0 151 "yellow", "yellowgreen", "calc", "-moz-calc", "rgb", "hsl", "rgba", "hsla" ];
michael@0 152 ok(testValues(values, expected), "property border-top's values.");
michael@0 153
michael@0 154 // tests no keywords or colors
michael@0 155 var prop = "padding-bottom";
michael@0 156 var values = utils.getCSSValuesForProperty(prop);
michael@0 157 var expected = [ "initial", "inherit", "unset", "calc", "-moz-calc" ];
michael@0 158 ok(testValues(values, expected), "property padding-bottom's values.");
michael@0 159
michael@0 160 // test proprety
michael@0 161 var prop = "display";
michael@0 162 var values = utils.getCSSValuesForProperty(prop);
michael@0 163 var expected = [ "initial", "inherit", "unset", "none", "inline", "block", "inline-block", "list-item",
michael@0 164 "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
michael@0 165 "table-column-group", "table-column", "table-cell", "table-caption", "-moz-box", "-moz-inline-box",
michael@0 166 "-moz-grid", "-moz-inline-grid", "-moz-grid-group", "-moz-grid-line", "-moz-stack", "-moz-inline-stack",
michael@0 167 "-moz-deck", "-moz-popup", "-moz-groupbox", "flex", "inline-flex", "grid", "inline-grid" ];
michael@0 168 ok(testValues(values, expected), "property display's values.");
michael@0 169
michael@0 170 // test property
michael@0 171 var prop = "float";
michael@0 172 var values = utils.getCSSValuesForProperty(prop);
michael@0 173 var expected = [ "initial", "inherit", "unset", "none", "left", "right" ];
michael@0 174 ok(testValues(values, expected), "proprety float values");
michael@0 175
michael@0 176 // Test property with "auto"
michael@0 177 var prop = "margin";
michael@0 178 var values = utils.getCSSValuesForProperty(prop);
michael@0 179 var expected = [ "-moz-calc", "initial", "unset", "auto", "calc", "inherit" ];
michael@0 180 ok(testValues(values, expected), "property margin's values.");
michael@0 181
michael@0 182 // Test property with "normal"
michael@0 183 var prop = "font-style";
michael@0 184 var values = utils.getCSSValuesForProperty(prop);
michael@0 185 var expected = [ "initial", "inherit", "unset", "italic", "normal", "oblique" ];
michael@0 186 ok(testValues(values, expected), "property font-style's values.");
michael@0 187
michael@0 188 // Test property with "cubic-bezier" and "step".
michael@0 189 var prop = "-moz-transition";
michael@0 190 var values = utils.getCSSValuesForProperty(prop);
michael@0 191 var expected = [ "initial", "all", "unset", "cubic-bezier", "ease", "ease-in", "ease-in-out",
michael@0 192 "ease-out", "inherit", "linear", "none", "step-end", "step-start",
michael@0 193 "steps" ];
michael@0 194 ok(testValues(values, expected), "property -moz-transition's values.");
michael@0 195
michael@0 196 // test invalid property
michael@0 197 var prop = "invalidProperty";
michael@0 198 try {
michael@0 199 utils.getCSSValuesForProperty(prop);
michael@0 200 ok(false, "invalid property should throw an exception");
michael@0 201 }
michael@0 202 catch(e) {
michael@0 203 // test passed
michael@0 204 }
michael@0 205
michael@0 206 // test border-image propery, for bug 973345
michael@0 207 var prop = "border-image";
michael@0 208 var values = utils.getCSSValuesForProperty(prop);
michael@0 209 var expected = [ "-moz-calc", "initial", "unset", "-moz-use-text-color", "aliceblue",
michael@0 210 "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet",
michael@0 211 "brown", "burlywood", "cadetblue", "calc", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk",
michael@0 212 "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki",
michael@0 213 "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
michael@0 214 "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "dashed", "deeppink",
michael@0 215 "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "dotted", "double", "fill", "firebrick", "floralwhite",
michael@0 216 "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "grey", "green", "greenyellow",
michael@0 217 "groove", "hidden", "honeydew", "hotpink", "hsl", "hsla", "indianred", "indigo", "inherit", "inset", "ivory",
michael@0 218 "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan",
michael@0 219 "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen",
michael@0 220 "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen",
michael@0 221 "linen", "logical", "magenta", "maroon", "medium", "mediumaquamarine", "mediumblue", "mediumorchid",
michael@0 222 "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
michael@0 223 "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "none",
michael@0 224 "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "outset", "palegoldenrod", "palegreen",
michael@0 225 "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "physical", "pink", "plum", "powderblue",
michael@0 226 "purple", "red", "repeat", "rgb", "rgba", "ridge", "rosybrown", "round", "royalblue", "saddlebrown", "salmon",
michael@0 227 "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey",
michael@0 228 "snow", "solid", "springgreen", "steelblue", "stretch", "tan", "teal", "thick", "thin", "thistle", "tomato",
michael@0 229 "transparent", "turquoise", "-moz-element", "-moz-image-rect", "url", "violet", "wheat", "white", "whitesmoke",
michael@0 230 "yellow", "yellowgreen", "linear-gradient", "radial-gradient", "repeating-linear-gradient",
michael@0 231 "repeating-radial-gradient", "-moz-linear-gradient", "-moz-radial-gradient", "-moz-repeating-linear-gradient",
michael@0 232 "-moz-repeating-radial-gradient" ]
michael@0 233 ok(testValues(values, expected), "property border-image's values.");
michael@0 234
michael@0 235 SimpleTest.finish();
michael@0 236 }
michael@0 237
michael@0 238 SimpleTest.waitForExplicitFinish();
michael@0 239 addLoadEvent(do_test);
michael@0 240
michael@0 241 </script>
michael@0 242 </head>
michael@0 243 <body>
michael@0 244 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=877690">Mozilla Bug 877690</a>
michael@0 245 <p id="display"></p>
michael@0 246 <div id="content" style="display: none">
michael@0 247 </div>
michael@0 248 <pre id="test">
michael@0 249 </pre>
michael@0 250 </body>
michael@0 251 </html>

mercurial