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