src/third_party/WebKit/Source/devtools/front_end/CSSMetadata.js

   1 /*
   2  * Copyright (C) 2010 Nikita Vasilyev. All rights reserved.
   3  * Copyright (C) 2010 Joseph Pecoraro. All rights reserved.
   4  * Copyright (C) 2010 Google Inc. All rights reserved.
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions are
   8  * met:
   9  *
  10  *     * Redistributions of source code must retain the above copyright
  11  * notice, this list of conditions and the following disclaimer.
  12  *     * Redistributions in binary form must reproduce the above
  13  * copyright notice, this list of conditions and the following disclaimer
  14  * in the documentation and/or other materials provided with the
  15  * distribution.
  16  *     * Neither the name of Google Inc. nor the names of its
  17  * contributors may be used to endorse or promote products derived from
  18  * this software without specific prior written permission.
  19  *
  20  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  21  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  22  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  23  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  24  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  25  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  26  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  27  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  28  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  29  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  30  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  31  */
  32
  33 /**
  34  * @constructor
  35  * @param {!Array.<!{name: string, longhands: !Array.<string>}|string>} properties
  36  */
  37 WebInspector.CSSMetadata = function(properties)
  38 {
  39     this._values = /** !Array.<string> */ ([]);
  40     this._longhands = {};
  41     this._shorthands = {};
  42     for (var i = 0; i < properties.length; ++i) {
  43         var property = properties[i];
  44         if (typeof property === "string") {
  45             this._values.push(property);
  46             continue;
  47         }
  48         var propertyName = property.name;
  49         this._values.push(propertyName);
  50
  51         var longhands = properties[i].longhands;
  52         if (longhands) {
  53             this._longhands[propertyName] = longhands;
  54             for (var j = 0; j < longhands.length; ++j) {
  55                 var longhandName = longhands[j];
  56                 var shorthands = this._shorthands[longhandName];
  57                 if (!shorthands) {
  58                     shorthands = [];
  59                     this._shorthands[longhandName] = shorthands;
  60                 }
  61                 shorthands.push(propertyName);
  62             }
  63         }
  64     }
  65     this._values.sort();
  66 }
  67
  68 /**
  69  * @type {!WebInspector.CSSMetadata}
  70  */
  71 WebInspector.CSSMetadata.cssPropertiesMetainfo = new WebInspector.CSSMetadata([]);
  72
  73 WebInspector.CSSMetadata.isColorAwareProperty = function(propertyName)
  74 {
  75     return WebInspector.CSSMetadata._colorAwareProperties[propertyName] === true;
  76 }
  77
  78 WebInspector.CSSMetadata.colors = function()
  79 {
  80     if (!WebInspector.CSSMetadata._colorsKeySet)
  81         WebInspector.CSSMetadata._colorsKeySet = WebInspector.CSSMetadata._colors.keySet();
  82     return WebInspector.CSSMetadata._colorsKeySet;
  83 }
  84
  85 // Taken from http://www.w3.org/TR/CSS21/propidx.html.
  86 WebInspector.CSSMetadata.InheritedProperties = [
  87     "azimuth", "border-collapse", "border-spacing", "caption-side", "color", "cursor", "direction", "elevation",
  88     "empty-cells", "font-family", "font-size", "font-style", "font-variant", "font-weight", "font", "letter-spacing",
  89     "line-height", "list-style-image", "list-style-position", "list-style-type", "list-style", "orphans", "pitch-range",
  90     "pitch", "quotes", "resize", "richness", "speak-header", "speak-numeral", "speak-punctuation", "speak", "speech-rate", "stress",
  91     "text-align", "text-indent", "text-transform", "text-shadow", "visibility", "voice-family", "volume", "white-space", "widows",
  92     "word-spacing", "zoom"
  93 ].keySet();
  94
  95 // These non-standard Blink-specific properties augment the InheritedProperties.
  96 WebInspector.CSSMetadata.NonStandardInheritedProperties = [
  97     "-webkit-font-smoothing"
  98 ].keySet();
  99
 100 /**
 101  * @param {string} name
 102  * @return {string}
 103  */
 104 WebInspector.CSSMetadata.canonicalPropertyName = function(name)
 105 {
 106     if (!name || name.length < 9 || name.charAt(0) !== "-")
 107         return name.toLowerCase();
 108     var match = name.match(/(?:-webkit-)(.+)/);
 109     if (!match)
 110         return name.toLowerCase();
 111     return match[1].toLowerCase();
 112 }
 113
 114 /**
 115  * @param {string} propertyName
 116  * @return {boolean}
 117  */
 118 WebInspector.CSSMetadata.isPropertyInherited = function(propertyName)
 119 {
 120     return !!(WebInspector.CSSMetadata.InheritedProperties[WebInspector.CSSMetadata.canonicalPropertyName(propertyName)]
 121             || WebInspector.CSSMetadata.NonStandardInheritedProperties[propertyName.toLowerCase()]);
 122 }
 123
 124 WebInspector.CSSMetadata._colors = [
 125     "aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red",
 126     "silver", "teal", "white", "yellow", "transparent", "currentcolor", "grey", "aliceblue", "antiquewhite",
 127     "aquamarine", "azure", "beige", "bisque", "blanchedalmond", "blueviolet", "brown", "burlywood", "cadetblue",
 128     "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan",
 129     "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange",
 130     "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey",
 131     "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick",
 132     "floralwhite", "forestgreen", "gainsboro", "ghostwhite", "gold", "goldenrod", "greenyellow", "honeydew", "hotpink",
 133     "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
 134     "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink",
 135     "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow",
 136     "limegreen", "linen", "magenta", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen",
 137     "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream",
 138     "mistyrose", "moccasin", "navajowhite", "oldlace", "olivedrab", "orangered", "orchid", "palegoldenrod", "palegreen",
 139     "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "rosybrown",
 140     "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "skyblue", "slateblue",
 141     "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "thistle", "tomato", "turquoise", "violet",
 142     "wheat", "whitesmoke", "yellowgreen"
 143 ];
 144
 145 WebInspector.CSSMetadata._colorAwareProperties = [
 146     "background", "background-color", "background-image", "border", "border-color", "border-top", "border-right", "border-bottom",
 147     "border-left", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "box-shadow", "color",
 148     "fill", "outline", "outline-color", "stroke", "text-line-through-color", "text-overline-color",
 149     "text-shadow", "text-underline-color", "-webkit-box-shadow", "-webkit-column-rule-color",
 150     "-webkit-text-decoration-color", "-webkit-text-emphasis", "-webkit-text-emphasis-color"
 151 ].keySet();
 152
 153 WebInspector.CSSMetadata._propertyDataMap = {
 154     "table-layout": { values: [
 155         "auto", "fixed"
 156     ] },
 157     "visibility": { values: [
 158         "hidden", "visible", "collapse"
 159     ] },
 160     "background-repeat": { values: [
 161         "repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"
 162     ] },
 163     "content": { values: [
 164         "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote"
 165     ] },
 166     "list-style-image": { values: [
 167         "none"
 168     ] },
 169     "clear": { values: [
 170         "none", "left", "right", "both"
 171     ] },
 172     "text-underline-mode": { values: [
 173         "continuous", "skip-white-space"
 174     ] },
 175     "overflow-x": { values: [
 176         "hidden", "auto", "visible", "overlay", "scroll"
 177     ] },
 178     "stroke-linejoin": { values: [
 179         "round", "miter", "bevel"
 180     ] },
 181     "baseline-shift": { values: [
 182         "baseline", "sub", "super"
 183     ] },
 184     "border-bottom-width": { values: [
 185         "medium", "thick", "thin"
 186     ] },
 187     "marquee-speed": { values: [
 188         "normal", "slow", "fast"
 189     ] },
 190     "margin-top-collapse": { values: [
 191         "collapse", "separate", "discard"
 192     ] },
 193     "max-height": { values: [
 194         "none"
 195     ] },
 196     "box-orient": { values: [
 197         "horizontal", "vertical", "inline-axis", "block-axis"
 198     ], },
 199     "font-stretch": { values: [
 200         "normal", "wider", "narrower", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
 201         "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
 202     ] },
 203     "text-underline-style": { values: [
 204         "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
 205     ] },
 206     "text-overline-mode": { values: [
 207         "continuous", "skip-white-space"
 208     ] },
 209     "-webkit-background-composite": { values: [
 210         "highlight", "clear", "copy", "source-over", "source-in", "source-out", "source-atop", "destination-over",
 211         "destination-in", "destination-out", "destination-atop", "xor", "plus-darker", "plus-lighter"
 212     ] },
 213     "border-left-width": { values: [
 214         "medium", "thick", "thin"
 215     ] },
 216     "box-shadow": { values: [
 217         "inset", "none"
 218     ] },
 219     "-webkit-writing-mode": { values: [
 220         "lr", "rl", "tb", "lr-tb", "rl-tb", "tb-rl", "horizontal-tb", "vertical-rl", "vertical-lr", "horizontal-bt"
 221     ] },
 222     "text-line-through-mode": { values: [
 223         "continuous", "skip-white-space"
 224     ] },
 225     "border-collapse": { values: [
 226         "collapse", "separate"
 227     ] },
 228     "page-break-inside": { values: [
 229         "auto", "avoid"
 230     ] },
 231     "border-top-width": { values: [
 232         "medium", "thick", "thin"
 233     ] },
 234     "outline-color": { values: [
 235         "invert"
 236     ] },
 237     "text-line-through-style": { values: [
 238         "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
 239     ] },
 240     "outline-style": { values: [
 241         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
 242     ] },
 243     "cursor": { values: [
 244         "none", "copy", "auto", "crosshair", "default", "pointer", "move", "vertical-text", "cell", "context-menu",
 245         "alias", "progress", "no-drop", "not-allowed", "-webkit-zoom-in", "-webkit-zoom-out", "e-resize", "ne-resize",
 246         "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "ew-resize", "ns-resize",
 247         "nesw-resize", "nwse-resize", "col-resize", "row-resize", "text", "wait", "help", "all-scroll", "-webkit-grab",
 248         "-webkit-grabbing"
 249     ] },
 250     "border-width": { values: [
 251         "medium", "thick", "thin"
 252     ] },
 253     "size": { values: [
 254         "a3", "a4", "a5", "b4", "b5", "landscape", "ledger", "legal", "letter", "portrait"
 255     ] },
 256     "background-size": { values: [
 257         "contain", "cover"
 258     ] },
 259     "direction": { values: [
 260         "ltr", "rtl"
 261     ] },
 262     "marquee-direction": { values: [
 263         "left", "right", "auto", "reverse", "forwards", "backwards", "ahead", "up", "down"
 264     ] },
 265     "enable-background": { values: [
 266         "accumulate", "new"
 267     ] },
 268     "float": { values: [
 269         "none", "left", "right"
 270     ] },
 271     "overflow-y": { values: [
 272         "hidden", "auto", "visible", "overlay", "scroll"
 273     ] },
 274     "margin-bottom-collapse": { values: [
 275         "collapse",  "separate", "discard"
 276     ] },
 277     "box-reflect": { values: [
 278         "left", "right", "above", "below"
 279     ] },
 280     "overflow": { values: [
 281         "hidden", "auto", "visible", "overlay", "scroll"
 282     ] },
 283     "text-rendering": { values: [
 284         "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"
 285     ] },
 286     "text-align": { values: [
 287         "-webkit-auto", "start", "end", "left", "right", "center", "justify", "-webkit-left", "-webkit-right", "-webkit-center"
 288     ] },
 289     "list-style-position": { values: [
 290         "outside", "inside", "hanging"
 291     ] },
 292     "margin-bottom": { values: [
 293         "auto"
 294     ] },
 295     "color-interpolation": { values: [
 296         "linearrgb"
 297     ] },
 298     "background-origin": { values: [
 299         "border-box", "content-box", "padding-box"
 300     ] },
 301     "word-wrap": { values: [
 302         "normal", "break-word"
 303     ] },
 304     "font-weight": { values: [
 305         "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
 306     ] },
 307     "margin-before-collapse": { values: [
 308         "collapse", "separate", "discard"
 309     ] },
 310     "text-overline-width": { values: [
 311         "normal", "medium", "auto", "thick", "thin"
 312     ] },
 313     "text-transform": { values: [
 314         "none", "capitalize", "uppercase", "lowercase"
 315     ] },
 316     "border-right-style": { values: [
 317         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
 318     ] },
 319     "border-left-style": { values: [
 320         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
 321     ] },
 322     "-webkit-text-emphasis": { values: [
 323         "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
 324     ] },
 325     "font-style": { values: [
 326         "italic", "oblique", "normal"
 327     ] },
 328     "speak": { values: [
 329         "none", "normal", "spell-out", "digits", "literal-punctuation", "no-punctuation"
 330     ] },
 331     "color-rendering": { values: [
 332         "auto", "optimizeSpeed", "optimizeQuality"
 333     ] },
 334     "list-style-type": { values: [
 335         "none", "inline", "disc", "circle", "square", "decimal", "decimal-leading-zero", "arabic-indic", "binary", "bengali",
 336         "cambodian", "khmer", "devanagari", "gujarati", "gurmukhi", "kannada", "lower-hexadecimal", "lao", "malayalam",
 337         "mongolian", "myanmar", "octal", "oriya", "persian", "urdu", "telugu", "tibetan", "thai", "upper-hexadecimal",
 338         "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "afar",
 339         "ethiopic-halehame-aa-et", "ethiopic-halehame-aa-er", "amharic", "ethiopic-halehame-am-et", "amharic-abegede",
 340         "ethiopic-abegede-am-et", "cjk-earthly-branch", "cjk-heavenly-stem", "ethiopic", "ethiopic-halehame-gez",
 341         "ethiopic-abegede", "ethiopic-abegede-gez", "hangul-consonant", "hangul", "lower-norwegian", "oromo",
 342         "ethiopic-halehame-om-et", "sidama", "ethiopic-halehame-sid-et", "somali", "ethiopic-halehame-so-et", "tigre",
 343         "ethiopic-halehame-tig", "tigrinya-er", "ethiopic-halehame-ti-er", "tigrinya-er-abegede",
 344         "ethiopic-abegede-ti-er", "tigrinya-et", "ethiopic-halehame-ti-et", "tigrinya-et-abegede",
 345         "ethiopic-abegede-ti-et", "upper-greek", "upper-norwegian", "asterisks", "footnotes", "hebrew", "armenian",
 346         "lower-armenian", "upper-armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha",
 347         "katakana-iroha"
 348     ] },
 349     "-webkit-text-combine": { values: [
 350         "none", "horizontal"
 351     ] },
 352     "outline": { values: [
 353         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
 354     ] },
 355     "font": { values: [
 356         "caption", "icon", "menu", "message-box", "small-caption", "-webkit-mini-control", "-webkit-small-control",
 357         "-webkit-control", "status-bar", "italic", "oblique", "small-caps", "normal", "bold", "bolder", "lighter",
 358         "100", "200", "300", "400", "500", "600", "700", "800", "900", "xx-small", "x-small", "small", "medium",
 359         "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger", "serif", "sans-serif", "cursive",
 360         "fantasy", "monospace", "-webkit-body", "-webkit-pictograph"
 361     ] },
 362     "dominant-baseline": { values: [
 363         "middle", "auto", "central", "text-before-edge", "text-after-edge", "ideographic", "alphabetic", "hanging",
 364         "mathematical", "use-script", "no-change", "reset-size"
 365     ] },
 366     "display": { values: [
 367         "none", "inline", "block", "list-item", "run-in", "compact", "inline-block", "table", "inline-table",
 368         "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group",
 369         "table-column", "table-cell", "table-caption", "-webkit-box", "-webkit-inline-box",
 370         "flex", "inline-flex", "grid", "inline-grid"
 371     ] },
 372     "-webkit-text-emphasis-position": { values: [
 373         "over", "under"
 374     ] },
 375     "image-rendering": { values: [
 376         "auto", "optimizeSpeed", "optimizeQuality"
 377     ] },
 378     "alignment-baseline": { values: [
 379         "baseline", "middle", "auto", "before-edge", "after-edge", "central", "text-before-edge", "text-after-edge",
 380         "ideographic", "alphabetic", "hanging", "mathematical"
 381     ] },
 382     "outline-width": { values: [
 383         "medium", "thick", "thin"
 384     ] },
 385     "text-line-through-width": { values: [
 386         "normal", "medium", "auto", "thick", "thin"
 387     ] },
 388     "box-align": { values: [
 389         "baseline", "center", "stretch", "start", "end"
 390     ] },
 391     "border-right-width": { values: [
 392         "medium", "thick", "thin"
 393     ] },
 394     "border-top-style": { values: [
 395         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
 396     ] },
 397     "line-height": { values: [
 398         "normal"
 399     ] },
 400     "text-overflow": { values: [
 401         "clip", "ellipsis"
 402     ] },
 403     "overflow-wrap": { values: [
 404         "normal", "break-word"
 405     ] },
 406     "box-direction": { values: [
 407         "normal", "reverse"
 408     ] },
 409     "margin-after-collapse": { values: [
 410         "collapse", "separate", "discard"
 411     ] },
 412     "page-break-before": { values: [
 413         "left", "right", "auto", "always", "avoid"
 414     ] },
 415     "border-image": { values: [
 416         "repeat", "stretch"
 417     ] },
 418     "text-decoration": { values: [
 419         "blink", "line-through", "overline", "underline"
 420     ] },
 421     "position": { values: [
 422         "absolute", "fixed", "relative", "static"
 423     ] },
 424     "font-family": { values: [
 425         "serif", "sans-serif", "cursive", "fantasy", "monospace", "-webkit-body", "-webkit-pictograph"
 426     ] },
 427     "text-overflow-mode": { values: [
 428         "clip", "ellipsis"
 429     ] },
 430     "border-bottom-style": { values: [
 431         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
 432     ] },
 433     "unicode-bidi": { values: [
 434         "normal", "bidi-override", "embed", "isolate", "isolate-override", "plaintext"
 435     ] },
 436     "clip-rule": { values: [
 437         "nonzero", "evenodd"
 438     ] },
 439     "margin-left": { values: [
 440         "auto"
 441     ] },
 442     "margin-top": { values: [
 443         "auto"
 444     ] },
 445     "zoom": { values: [
 446         "normal", "document", "reset"
 447     ] },
 448     "text-overline-style": { values: [
 449         "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
 450     ] },
 451     "max-width": { values: [
 452         "none"
 453     ] },
 454     "caption-side": { values: [
 455         "top", "bottom"
 456     ] },
 457     "empty-cells": { values: [
 458         "hide", "show"
 459     ] },
 460     "pointer-events": { values: [
 461         "none", "all", "auto", "visible", "visiblepainted", "visiblefill", "visiblestroke", "painted", "fill", "stroke", "bounding-box"
 462     ] },
 463     "letter-spacing": { values: [
 464         "normal"
 465     ] },
 466     "background-clip": { values: [
 467         "border-box", "content-box", "padding-box"
 468     ] },
 469     "-webkit-font-smoothing": { values: [
 470         "none", "auto", "antialiased", "subpixel-antialiased"
 471     ] },
 472     "border": { values: [
 473         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
 474     ] },
 475     "font-size": { values: [
 476         "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller",
 477         "larger"
 478     ] },
 479     "font-variant": { values: [
 480         "small-caps", "normal"
 481     ] },
 482     "vertical-align": { values: [
 483         "baseline", "middle", "sub", "super", "text-top", "text-bottom", "top", "bottom", "-webkit-baseline-middle"
 484     ] },
 485     "marquee-style": { values: [
 486         "none", "scroll", "slide", "alternate"
 487     ] },
 488     "white-space": { values: [
 489         "normal", "nowrap", "pre", "pre-line", "pre-wrap"
 490     ] },
 491     "text-underline-width": { values: [
 492         "normal", "medium", "auto", "thick", "thin"
 493     ] },
 494     "box-lines": { values: [
 495         "single", "multiple"
 496     ] },
 497     "page-break-after": { values: [
 498         "left", "right", "auto", "always", "avoid"
 499     ] },
 500     "clip-path": { values: [
 501         "none"
 502     ] },
 503     "margin": { values: [
 504         "auto"
 505     ] },
 506     "marquee-repetition": { values: [
 507         "infinite"
 508     ] },
 509     "margin-right": { values: [
 510         "auto"
 511     ] },
 512     "word-break": { values: [
 513         "normal", "break-all", "break-word"
 514     ] },
 515     "word-spacing": { values: [
 516         "normal"
 517     ] },
 518     "-webkit-text-emphasis-style": { values: [
 519         "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
 520     ] },
 521     "-webkit-transform": { values: [
 522         "scale", "scaleX", "scaleY", "scale3d", "rotate", "rotateX", "rotateY", "rotateZ", "rotate3d", "skew", "skewX", "skewY",
 523         "translate", "translateX", "translateY", "translateZ", "translate3d", "matrix", "matrix3d", "perspective"
 524     ] },
 525     "image-resolution": { values: [
 526         "from-image", "snap"
 527     ] },
 528     "box-sizing": { values: [
 529         "content-box", "padding-box", "border-box"
 530     ] },
 531     "clip": { values: [
 532         "auto"
 533     ] },
 534     "resize": { values: [
 535         "none", "both", "horizontal", "vertical"
 536     ] },
 537     "align-content": { values: [
 538         "flex-start", "flex-end", "center", "space-between", "space-around", "stretch"
 539     ] },
 540     "align-items": {  values: [
 541         "flex-start", "flex-end", "center", "baseline", "stretch"
 542     ] },
 543     "align-self": {  values: [
 544         "auto", "flex-start", "flex-end", "center", "baseline", "stretch"
 545     ] },
 546     "flex-direction": { values: [
 547         "row", "row-reverse", "column", "column-reverse"
 548     ] },
 549     "justify-content": { values: [
 550         "flex-start", "flex-end", "center", "space-between", "space-around"
 551     ] },
 552     "flex-wrap": { values: [
 553         "nowrap", "wrap", "wrap-reverse"
 554     ] },
 555     "-webkit-animation-timing-function": { values: [
 556         "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"
 557     ] },
 558     "-webkit-animation-direction": { values: [
 559         "normal", "reverse", "alternate", "alternate-reverse"
 560     ] },
 561     "-webkit-animation-play-state": { values: [
 562         "running", "paused"
 563     ] },
 564     "-webkit-animation-fill-mode": { values: [
 565         "none", "forwards", "backwards", "both"
 566     ] },
 567     "-webkit-backface-visibility": { values: [
 568         "visible", "hidden"
 569     ] },
 570     "-webkit-box-decoration-break": { values: [
 571         "slice", "clone"
 572     ] },
 573     "-webkit-column-break-after": { values: [
 574         "auto", "always", "avoid", "left", "right", "page", "column", "avoid-page", "avoid-column"
 575     ] },
 576     "-webkit-column-break-before": { values: [
 577         "auto", "always", "avoid", "left", "right", "page", "column", "avoid-page", "avoid-column"
 578     ] },
 579     "-webkit-column-break-inside": { values: [
 580         "auto", "avoid", "avoid-page", "avoid-column"
 581     ] },
 582     "-webkit-column-span": { values: [
 583         "none", "all"
 584     ] },
 585     "-webkit-column-count": { values: [
 586         "auto"
 587     ] },
 588     "-webkit-column-gap": { values: [
 589         "normal"
 590     ] },
 591     "-webkit-line-break": { values: [
 592         "auto", "loose", "normal", "strict"
 593     ] },
 594     "-webkit-perspective": { values: [
 595         "none"
 596     ] },
 597     "-webkit-perspective-origin": { values: [
 598         "left", "center", "right", "top", "bottom"
 599     ] },
 600     "text-align-last": { values: [
 601         "auto", "start", "end", "left", "right", "center", "justify"
 602     ] },
 603     "-webkit-text-decoration-line": { values: [
 604         "none", "underline", "overline", "line-through", "blink"
 605     ] },
 606     "-webkit-text-decoration-style": { values: [
 607         "solid", "double", "dotted", "dashed", "wavy"
 608     ] },
 609     "-webkit-text-decoration-skip": { values: [
 610         "none", "objects", "spaces", "ink", "edges", "box-decoration"
 611     ] },
 612     "-webkit-transform-origin": { values: [
 613         "left", "center", "right", "top", "bottom"
 614     ] },
 615     "-webkit-transform-style": { values: [
 616         "flat", "preserve-3d"
 617     ] },
 618     "-webkit-transition-timing-function": { values: [
 619         "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"
 620     ] },
 621
 622     "-webkit-flex": { m: "flexbox" },
 623     "-webkit-flex-basis": { m: "flexbox" },
 624     "-webkit-flex-flow": { m: "flexbox" },
 625     "-webkit-flex-grow": { m: "flexbox" },
 626     "-webkit-flex-shrink": { m: "flexbox" },
 627     "-webkit-animation": { m: "animations" },
 628     "-webkit-animation-delay": { m: "animations" },
 629     "-webkit-animation-duration": { m: "animations" },
 630     "-webkit-animation-iteration-count": { m: "animations" },
 631     "-webkit-animation-name": { m: "animations" },
 632     "-webkit-column-rule": { m: "multicol" },
 633     "-webkit-column-rule-color": { m: "multicol", a: "crc" },
 634     "-webkit-column-rule-style": { m: "multicol", a: "crs" },
 635     "-webkit-column-rule-width": { m: "multicol", a: "crw" },
 636     "-webkit-column-width": { m: "multicol", a: "cw" },
 637     "-webkit-columns": { m: "multicol" },
 638     "-webkit-order": { m: "flexbox" },
 639     "-webkit-text-decoration-color": { m: "text-decor" },
 640     "-webkit-text-emphasis-color": { m: "text-decor" },
 641     "-webkit-transition": { m: "transitions" },
 642     "-webkit-transition-delay": { m: "transitions" },
 643     "-webkit-transition-duration": { m: "transitions" },
 644     "-webkit-transition-property": { m: "transitions" },
 645     "background": { m: "background" },
 646     "background-attachment": { m: "background" },
 647     "background-color": { m: "background" },
 648     "background-image": { m: "background" },
 649     "background-position": { m: "background" },
 650     "background-position-x": { m: "background" },
 651     "background-position-y": { m: "background" },
 652     "background-repeat-x": { m: "background" },
 653     "background-repeat-y": { m: "background" },
 654     "border-top": { m: "background" },
 655     "border-right": { m: "background" },
 656     "border-bottom": { m: "background" },
 657     "border-left": { m: "background" },
 658     "border-radius": { m: "background" },
 659     "bottom": { m: "visuren" },
 660     "color": { m: "color", a: "foreground" },
 661     "counter-increment": { m: "generate" },
 662     "counter-reset": { m: "generate" },
 663     "grid-template-columns": { m: "grid" },
 664     "grid-template-rows": { m: "grid" },
 665     "height": { m: "box" },
 666     "image-orientation": { m: "images" },
 667     "left": { m: "visuren" },
 668     "list-style": { m: "lists" },
 669     "min-height": { m: "box" },
 670     "min-width": { m: "box" },
 671     "opacity": { m: "color", a: "transparency" },
 672     "orphans": { m: "page" },
 673     "outline-offset": { m: "ui" },
 674     "padding": { m: "box", a: "padding1" },
 675     "padding-bottom": { m: "box" },
 676     "padding-left": { m: "box" },
 677     "padding-right": { m: "box" },
 678     "padding-top": { m: "box" },
 679     "page": { m: "page" },
 680     "quotes": { m: "generate" },
 681     "right": { m: "visuren" },
 682     "tab-size": { m: "text" },
 683     "text-indent": { m: "text" },
 684     "text-shadow": { m: "text-decor" },
 685     "top": { m: "visuren" },
 686     "unicode-range": { m: "fonts", a: "descdef-unicode-range" },
 687     "widows": { m: "page" },
 688     "width": { m: "box" },
 689     "z-index": { m: "visuren" }
 690 }
 691
 692 /**
 693  * @param {string} propertyName
 694  * @return {!WebInspector.CSSMetadata}
 695  */
 696 WebInspector.CSSMetadata.keywordsForProperty = function(propertyName)
 697 {
 698     var acceptedKeywords = ["inherit", "initial"];
 699     var descriptor = WebInspector.CSSMetadata.descriptor(propertyName);
 700     if (descriptor && descriptor.values)
 701         acceptedKeywords.push.apply(acceptedKeywords, descriptor.values);
 702     if (propertyName in WebInspector.CSSMetadata._colorAwareProperties)
 703         acceptedKeywords.push.apply(acceptedKeywords, WebInspector.CSSMetadata._colors);
 704     return new WebInspector.CSSMetadata(acceptedKeywords);
 705 }
 706
 707 /**
 708  * @param {string} propertyName
 709  * @return {?Object}
 710  */
 711 WebInspector.CSSMetadata.descriptor = function(propertyName)
 712 {
 713     if (!propertyName)
 714         return null;
 715     var unprefixedName = propertyName.replace(/^-webkit-/, "");
 716     var entry = WebInspector.CSSMetadata._propertyDataMap[propertyName];
 717     if (!entry && unprefixedName !== propertyName)
 718         entry = WebInspector.CSSMetadata._propertyDataMap[unprefixedName];
 719     return entry || null;
 720 }
 721
 722 WebInspector.CSSMetadata.initializeWithSupportedProperties = function(properties)
 723 {
 724     WebInspector.CSSMetadata.cssPropertiesMetainfo = new WebInspector.CSSMetadata(properties);
 725 }
 726
 727 WebInspector.CSSMetadata.cssPropertiesMetainfoKeySet = function()
 728 {
 729     if (!WebInspector.CSSMetadata._cssPropertiesMetainfoKeySet)
 730         WebInspector.CSSMetadata._cssPropertiesMetainfoKeySet = WebInspector.CSSMetadata.cssPropertiesMetainfo.keySet();
 731     return WebInspector.CSSMetadata._cssPropertiesMetainfoKeySet;
 732 }
 733
 734 // Weight of CSS properties based their usage on few popular websites https://gist.github.com/3751436
 735 WebInspector.CSSMetadata.Weight = {
 736     "-webkit-animation": 1,
 737     "-webkit-animation-duration": 1,
 738     "-webkit-animation-iteration-count": 1,
 739     "-webkit-animation-name": 1,
 740     "-webkit-animation-timing-function": 1,
 741     "-webkit-appearance": 1,
 742     "-webkit-background-clip": 2,
 743     "-webkit-border-horizontal-spacing": 1,
 744     "-webkit-border-vertical-spacing": 1,
 745     "-webkit-box-shadow": 24,
 746     "-webkit-font-smoothing": 2,
 747     "-webkit-transform": 1,
 748     "-webkit-transition": 8,
 749     "-webkit-transition-delay": 7,
 750     "-webkit-transition-duration": 7,
 751     "-webkit-transition-property": 7,
 752     "-webkit-transition-timing-function": 6,
 753     "-webkit-user-select": 1,
 754     "background": 222,
 755     "background-attachment": 144,
 756     "background-clip": 143,
 757     "background-color": 222,
 758     "background-image": 201,
 759     "background-origin": 142,
 760     "background-size": 25,
 761     "border": 121,
 762     "border-bottom": 121,
 763     "border-bottom-color": 121,
 764     "border-bottom-left-radius": 50,
 765     "border-bottom-right-radius": 50,
 766     "border-bottom-style": 114,
 767     "border-bottom-width": 120,
 768     "border-collapse": 3,
 769     "border-left": 95,
 770     "border-left-color": 95,
 771     "border-left-style": 89,
 772     "border-left-width": 94,
 773     "border-radius": 50,
 774     "border-right": 93,
 775     "border-right-color": 93,
 776     "border-right-style": 88,
 777     "border-right-width": 93,
 778     "border-top": 111,
 779     "border-top-color": 111,
 780     "border-top-left-radius": 49,
 781     "border-top-right-radius": 49,
 782     "border-top-style": 104,
 783     "border-top-width": 109,
 784     "bottom": 16,
 785     "box-shadow": 25,
 786     "box-sizing": 2,
 787     "clear": 23,
 788     "color": 237,
 789     "cursor": 34,
 790     "direction": 4,
 791     "display": 210,
 792     "fill": 2,
 793     "filter": 1,
 794     "float": 105,
 795     "font": 174,
 796     "font-family": 25,
 797     "font-size": 174,
 798     "font-style": 9,
 799     "font-weight": 89,
 800     "height": 161,
 801     "left": 54,
 802     "letter-spacing": 3,
 803     "line-height": 75,
 804     "list-style": 17,
 805     "list-style-image": 8,
 806     "list-style-position": 8,
 807     "list-style-type": 17,
 808     "margin": 241,
 809     "margin-bottom": 226,
 810     "margin-left": 225,
 811     "margin-right": 213,
 812     "margin-top": 241,
 813     "max-height": 5,
 814     "max-width": 11,
 815     "min-height": 9,
 816     "min-width": 6,
 817     "opacity": 24,
 818     "outline": 10,
 819     "outline-color": 10,
 820     "outline-style": 10,
 821     "outline-width": 10,
 822     "overflow": 57,
 823     "overflow-x": 56,
 824     "overflow-y": 57,
 825     "padding": 216,
 826     "padding-bottom": 208,
 827     "padding-left": 216,
 828     "padding-right": 206,
 829     "padding-top": 216,
 830     "position": 136,
 831     "resize": 1,
 832     "right": 29,
 833     "stroke": 1,
 834     "stroke-width": 1,
 835     "table-layout": 1,
 836     "text-align": 66,
 837     "text-decoration": 53,
 838     "text-indent": 9,
 839     "text-overflow": 8,
 840     "text-shadow": 19,
 841     "text-transform": 5,
 842     "top": 71,
 843     "unicode-bidi": 1,
 844     "vertical-align": 37,
 845     "visibility": 11,
 846     "white-space": 24,
 847     "width": 255,
 848     "word-wrap": 6,
 849     "z-index": 32,
 850     "zoom": 10
 851 };
 852
 853
 854 WebInspector.CSSMetadata.prototype = {
 855     /**
 856      * @param {string} prefix
 857      * @return {!Array.<string>}
 858      */
 859     startsWith: function(prefix)
 860     {
 861         var firstIndex = this._firstIndexOfPrefix(prefix);
 862         if (firstIndex === -1)
 863             return [];
 864
 865         var results = [];
 866         while (firstIndex < this._values.length && this._values[firstIndex].startsWith(prefix))
 867             results.push(this._values[firstIndex++]);
 868         return results;
 869     },
 870
 871     /**
 872      * @param {!Array.<string>} properties
 873      * @return {number}
 874      */
 875     mostUsedOf: function(properties)
 876     {
 877         var maxWeight = 0;
 878         var index = 0;
 879         for (var i = 0; i < properties.length; i++) {
 880             var weight = WebInspector.CSSMetadata.Weight[properties[i]];
 881             if (weight > maxWeight) {
 882                 maxWeight = weight;
 883                 index = i;
 884             }
 885         }
 886         return index;
 887     },
 888
 889     _firstIndexOfPrefix: function(prefix)
 890     {
 891         if (!this._values.length)
 892             return -1;
 893         if (!prefix)
 894             return 0;
 895
 896         var maxIndex = this._values.length - 1;
 897         var minIndex = 0;
 898         var foundIndex;
 899
 900         do {
 901             var middleIndex = (maxIndex + minIndex) >> 1;
 902             if (this._values[middleIndex].startsWith(prefix)) {
 903                 foundIndex = middleIndex;
 904                 break;
 905             }
 906             if (this._values[middleIndex] < prefix)
 907                 minIndex = middleIndex + 1;
 908             else
 909                 maxIndex = middleIndex - 1;
 910         } while (minIndex <= maxIndex);
 911
 912         if (foundIndex === undefined)
 913             return -1;
 914
 915         while (foundIndex && this._values[foundIndex - 1].startsWith(prefix))
 916             foundIndex--;
 917
 918         return foundIndex;
 919     },
 920
 921     /**
 922      * @return {!Object.<string, boolean>}
 923      */
 924     keySet: function()
 925     {
 926         if (!this._keySet)
 927             this._keySet = this._values.keySet();
 928         return this._keySet;
 929     },
 930
 931     /**
 932      * @param {string} str
 933      * @param {string} prefix
 934      * @return {string}
 935      */
 936     next: function(str, prefix)
 937     {
 938         return this._closest(str, prefix, 1);
 939     },
 940
 941     /**
 942      * @param {string} str
 943      * @param {string} prefix
 944      * @return {string}
 945      */
 946     previous: function(str, prefix)
 947     {
 948         return this._closest(str, prefix, -1);
 949     },
 950
 951     /**
 952      * @param {string} str
 953      * @param {string} prefix
 954      * @param {number} shift
 955      * @return {string}
 956      */
 957     _closest: function(str, prefix, shift)
 958     {
 959         if (!str)
 960             return "";
 961
 962         var index = this._values.indexOf(str);
 963         if (index === -1)
 964             return "";
 965
 966         if (!prefix) {
 967             index = (index + this._values.length + shift) % this._values.length;
 968             return this._values[index];
 969         }
 970
 971         var propertiesWithPrefix = this.startsWith(prefix);
 972         var j = propertiesWithPrefix.indexOf(str);
 973         j = (j + propertiesWithPrefix.length + shift) % propertiesWithPrefix.length;
 974         return propertiesWithPrefix[j];
 975     },
 976
 977     /**
 978      * @param {string} shorthand
 979      * @return {?Array.<string>}
 980      */
 981     longhands: function(shorthand)
 982     {
 983         return this._longhands[shorthand];
 984     },
 985
 986     /**
 987      * @param {string} longhand
 988      * @return {?Array.<string>}
 989      */
 990     shorthands: function(longhand)
 991     {
 992         return this._shorthands[longhand];
 993     }
 994 }
 995
 996 WebInspector.CSSMetadata.initializeWithSupportedProperties([]);