[macOS] Color wells should appear pressed when presenting a color picker
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Models / CSSKeywordCompletions.js
index 866ea4b..3567bed 100644 (file)
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.CSSKeywordCompletions = {};
+WI.CSSKeywordCompletions = {};
 
-WebInspector.CSSKeywordCompletions.forProperty = function(propertyName)
+WI.CSSKeywordCompletions.forProperty = function(propertyName)
 {
-    var acceptedKeywords = ["initial"];
-    var isNotPrefixed = propertyName.charAt(0) !== "-";
+    let acceptedKeywords = ["initial", "unset", "revert", "var()", "env()"];
+    let isNotPrefixed = propertyName.charAt(0) !== "-";
 
-    if (propertyName in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName]);
-    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap["-webkit-" + propertyName]);
+    if (propertyName in WI.CSSKeywordCompletions._propertyKeywordMap)
+        acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._propertyKeywordMap[propertyName]);
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WI.CSSKeywordCompletions._propertyKeywordMap)
+        acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._propertyKeywordMap["-webkit-" + propertyName]);
 
-    if (propertyName in WebInspector.CSSKeywordCompletions._colorAwareProperties)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
-    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._colorAwareProperties)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
+    if (propertyName in WI.CSSKeywordCompletions._colorAwareProperties)
+        acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._colors);
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WI.CSSKeywordCompletions._colorAwareProperties)
+        acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._colors);
     else if (propertyName.endsWith("color"))
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
+        acceptedKeywords = acceptedKeywords.concat(WI.CSSKeywordCompletions._colors);
 
     // Only suggest "inherit" on inheritable properties even though it is valid on all properties.
-    if (propertyName in WebInspector.CSSKeywordCompletions.InheritedProperties)
+    if (propertyName in WI.CSSKeywordCompletions.InheritedProperties)
         acceptedKeywords.push("inherit");
-    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions.InheritedProperties)
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WI.CSSKeywordCompletions.InheritedProperties)
         acceptedKeywords.push("inherit");
 
-    if (acceptedKeywords.contains(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder)) {
-        acceptedKeywords.remove(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder);
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSCompletions.cssNameCompletions.values);
+    if (acceptedKeywords.includes(WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder) && WI.CSSCompletions.cssNameCompletions) {
+        acceptedKeywords.remove(WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder);
+        acceptedKeywords = acceptedKeywords.concat(WI.CSSCompletions.cssNameCompletions.values);
     }
 
-    return new WebInspector.CSSCompletions(acceptedKeywords, true);
+    return new WI.CSSCompletions(acceptedKeywords, true);
 };
 
-WebInspector.CSSKeywordCompletions.addCustomCompletions = function(properties)
+WI.CSSKeywordCompletions.forFunction = function(functionName)
 {
-    // COMPATIBILITY (iOS 6): This used to be an array of strings. They won't have custom values.
-    if (properties.length && typeof properties[0] === "string")
-        return;
+    let suggestions = ["var()"];
+
+    if (functionName === "var")
+        suggestions = [];
+    else if (functionName === "calc" || functionName === "min" || functionName === "max")
+        suggestions = suggestions.concat(["calc()", "min()", "max()"]);
+    else if (functionName === "env")
+        suggestions = suggestions.concat(["safe-area-inset-top", "safe-area-inset-right", "safe-area-inset-bottom", "safe-area-inset-left"]);
+    else if (functionName === "image-set")
+        suggestions.push("url()");
+    else if (functionName === "repeat")
+        suggestions = suggestions.concat(["auto", "auto-fill", "auto-fit", "min-content", "max-content"]);
+    else if (functionName.endsWith("gradient")) {
+        suggestions = suggestions.concat(["to", "left", "right", "top", "bottom"]);
+        suggestions = suggestions.concat(WI.CSSKeywordCompletions._colors);
+    }
 
+    return new WI.CSSCompletions(suggestions, true);
+};
+
+WI.CSSKeywordCompletions.addCustomCompletions = function(properties)
+{
     for (var property of properties) {
         if (property.values)
-            WebInspector.CSSKeywordCompletions.addPropertyCompletionValues(property.name, property.values);
+            WI.CSSKeywordCompletions.addPropertyCompletionValues(property.name, property.values);
     }
 };
 
-WebInspector.CSSKeywordCompletions.addPropertyCompletionValues = function(propertyName, newValues)
+WI.CSSKeywordCompletions.addPropertyCompletionValues = function(propertyName, newValues)
 {
-    var existingValues = WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName];
+    var existingValues = WI.CSSKeywordCompletions._propertyKeywordMap[propertyName];
     if (!existingValues) {
-        WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName] = newValues;
+        WI.CSSKeywordCompletions._propertyKeywordMap[propertyName] = newValues;
         return;
     }
 
@@ -88,16 +106,16 @@ WebInspector.CSSKeywordCompletions.addPropertyCompletionValues = function(proper
     for (var value of newValues)
         union.add(value);
 
-    WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName] = [...union.values()];
+    WI.CSSKeywordCompletions._propertyKeywordMap[propertyName] = [...union.values()];
 };
 
-WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder = "__all-properties__";
+WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder = "__all-properties__";
 
-WebInspector.CSSKeywordCompletions.InheritedProperties = [
+WI.CSSKeywordCompletions.InheritedProperties = [
     "azimuth", "border-collapse", "border-spacing", "caption-side", "clip-rule", "color", "color-interpolation",
     "color-interpolation-filters", "color-rendering", "cursor", "direction", "elevation", "empty-cells", "fill",
-    "fill-opacity", "fill-rule", "font", "font-family", "font-size", "font-style", "font-variant", "font-weight",
-    "glyph-orientation-horizontal", "glyph-orientation-vertical", "image-rendering", "kerning", "letter-spacing",
+    "fill-opacity", "fill-rule", "font", "font-family", "font-size", "font-style", "font-variant", "font-variant-numeric", "font-weight", "font-optical-sizing",
+    "glyph-orientation-horizontal", "glyph-orientation-vertical", "hanging-punctuation", "image-rendering", "kerning", "letter-spacing",
     "line-height", "list-style", "list-style-image", "list-style-position", "list-style-type", "marker", "marker-end",
     "marker-mid", "marker-start", "orphans", "pitch", "pitch-range", "pointer-events", "quotes", "resize", "richness",
     "shape-rendering", "speak", "speak-header", "speak-numeral", "speak-punctuation", "speech-rate", "stress", "stroke",
@@ -105,7 +123,7 @@ WebInspector.CSSKeywordCompletions.InheritedProperties = [
     "stroke-width", "tab-size", "text-align", "text-anchor", "text-decoration", "text-indent", "text-rendering",
     "text-shadow", "text-transform", "visibility", "voice-family", "volume", "white-space", "widows", "word-break",
     "word-spacing", "word-wrap", "writing-mode", "-webkit-aspect-ratio", "-webkit-border-horizontal-spacing",
-    "-webkit-border-vertical-spacing", "-webkit-box-direction", "-webkit-color-correction", "-webkit-font-feature-settings",
+    "-webkit-border-vertical-spacing", "-webkit-box-direction", "-webkit-color-correction", "font-feature-settings",
     "-webkit-font-kerning", "-webkit-font-smoothing", "-webkit-font-variant-ligatures",
     "-webkit-hyphenate-character", "-webkit-hyphenate-limit-after", "-webkit-hyphenate-limit-before",
     "-webkit-hyphenate-limit-lines", "-webkit-hyphens", "-webkit-line-align", "-webkit-line-box-contain",
@@ -116,12 +134,13 @@ WebInspector.CSSKeywordCompletions.InheritedProperties = [
     "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width", "-webkit-user-modify",
     "-webkit-user-select", "-webkit-writing-mode", "-webkit-cursor-visibility", "image-orientation", "image-resolution",
     "overflow-wrap", "-webkit-text-align-last", "-webkit-text-justify", "-webkit-ruby-position", "-webkit-text-decoration-line",
+    "font-synthesis",
 
     // iOS Properties
     "-webkit-overflow-scrolling", "-webkit-touch-callout", "-webkit-tap-highlight-color"
 ].keySet();
 
-WebInspector.CSSKeywordCompletions._colors = [
+WI.CSSKeywordCompletions._colors = [
     "aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red",
     "silver", "teal", "white", "yellow", "transparent", "currentcolor", "grey", "aliceblue", "antiquewhite",
     "aquamarine", "azure", "beige", "bisque", "blanchedalmond", "blueviolet", "brown", "burlywood", "cadetblue",
@@ -142,7 +161,7 @@ WebInspector.CSSKeywordCompletions._colors = [
     "wheat", "whitesmoke", "yellowgreen", "rgb()", "rgba()", "hsl()", "hsla()"
 ];
 
-WebInspector.CSSKeywordCompletions._colorAwareProperties = [
+WI.CSSKeywordCompletions._colorAwareProperties = [
     "background", "background-color", "background-image", "border", "border-color", "border-top", "border-right", "border-bottom",
     "border-left", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "box-shadow", "color",
     "fill", "outline", "outline-color", "stroke", "text-line-through", "text-line-through-color", "text-overline", "text-overline-color",
@@ -154,7 +173,7 @@ WebInspector.CSSKeywordCompletions._colorAwareProperties = [
     "-webkit-tap-highlight-color"
 ].keySet();
 
-WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
+WI.CSSKeywordCompletions._propertyKeywordMap = {
     "table-layout": [
         "auto", "fixed"
     ],
@@ -165,14 +184,20 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
     ],
     "content": [
-        "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote", "attr()", "counter()", "counters()", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+        "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote", "attr()", "counter()", "counters()", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "image-set()"
     ],
     "list-style-image": [
-        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "image-set()"
     ],
     "clear": [
         "none", "left", "right", "both"
     ],
+    "fill-rule": [
+        "nonzero", "evenodd"
+    ],
+    "stroke-linecap": [
+        "butt", "round", "square"
+    ],
     "stroke-linejoin": [
         "round", "miter", "bevel"
     ],
@@ -180,7 +205,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "baseline", "sub", "super"
     ],
     "border-bottom-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "margin-top-collapse": [
         "collapse", "separate", "discard"
@@ -192,11 +217,14 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "normal", "wider", "narrower", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
         "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
     ],
+    "font-optical-sizing": [
+        "auto", "none",
+    ],
     "-webkit-color-correction": [
         "default", "srgb"
     ],
     "border-left-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "-webkit-writing-mode": [
         "lr", "rl", "tb", "lr-tb", "rl-tb", "tb-rl", "horizontal-tb", "vertical-rl", "vertical-lr", "horizontal-bt"
@@ -223,7 +251,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "collapse", "separate"
     ],
     "border-top-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "outline-color": [
         "invert", "-webkit-focus-ring-color"
@@ -232,20 +260,21 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double", "auto"
     ],
     "cursor": [
-        "none", "copy", "auto", "crosshair", "default", "pointer", "move", "vertical-text", "cell", "context-menu",
-        "alias", "progress", "no-drop", "not-allowed", "-webkit-zoom-in", "-webkit-zoom-out", "e-resize", "ne-resize",
-        "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "ew-resize", "ns-resize",
-        "nesw-resize", "nwse-resize", "col-resize", "row-resize", "text", "wait", "help", "all-scroll", "-webkit-grab",
-        "-webkit-grabbing", "url()", "-webkit-image-set()"
+        "auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text",
+        "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing",
+        "e-resize", "n-resize", "ne-resize", "nw-resize", "s-resize", "se-resize", "sw-resize", "w-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize",
+        "col-resize", "row-resize", "all-scroll", "zoom-in", "zoom-out",
+        "-webkit-grab", "-webkit-grabbing", "-webkit-zoom-in", "-webkit-zoom-out",
+        "url()", "image-set()"
     ],
     "border-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "size": [
         "a3", "a4", "a5", "b4", "b5", "landscape", "ledger", "legal", "letter", "portrait"
     ],
     "background": [
-        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()",
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "image-set()",
         "repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round",
         "scroll", "fixed", "local",
         "auto", "contain", "cover",
@@ -253,7 +282,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "border-box", "padding-box", "content-box"
     ],
     "background-image": [
-        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "image-set()"
     ],
     "background-size": [
         "auto", "contain", "cover"
@@ -285,6 +314,9 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "float": [
         "none", "left", "right"
     ],
+    "hanging-punctuation": [
+        "none", "first", "last", "allow-end", "force-end"
+    ],
     "overflow-x": [
         "hidden", "auto", "visible", "overlay", "scroll", "marquee"
     ],
@@ -295,7 +327,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "hidden", "auto", "visible", "overlay", "scroll", "marquee", "-webkit-paged-x", "-webkit-paged-y"
     ],
     "margin-bottom-collapse": [
-        "collapse",  "separate", "discard"
+        "collapse", "separate", "discard"
     ],
     "-webkit-box-reflect": [
         "none", "left", "right", "above", "below"
@@ -321,11 +353,14 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "font-weight": [
         "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
     ],
+    "font-synthesis": [
+        "none", "weight", "style"
+    ],
     "margin-before-collapse": [
         "collapse", "separate", "discard"
     ],
     "text-overline-width": [
-        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()"
+        "normal", "medium", "auto", "thick", "thin", "calc()"
     ],
     "text-transform": [
         "none", "capitalize", "uppercase", "lowercase"
@@ -374,11 +409,11 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "-webkit-control", "status-bar", "italic", "oblique", "small-caps", "normal", "bold", "bolder", "lighter",
         "100", "200", "300", "400", "500", "600", "700", "800", "900", "xx-small", "x-small", "small", "medium",
         "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger", "serif", "sans-serif", "cursive",
-        "fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-webkit-system-font", "-apple-system-font",
+        "fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-apple-system",
         "-apple-system-headline", "-apple-system-body", "-apple-system-subheadline", "-apple-system-footnote",
         "-apple-system-caption1", "-apple-system-caption2", "-apple-system-short-headline", "-apple-system-short-body",
         "-apple-system-short-subheadline", "-apple-system-short-footnote", "-apple-system-short-caption1",
-        "-apple-system-tall-body"
+        "-apple-system-tall-body", "-apple-system-title0", "-apple-system-title1", "-apple-system-title2", "-apple-system-title3", "-apple-system-title4", "system-ui"
     ],
     "dominant-baseline": [
         "middle", "auto", "central", "text-before-edge", "text-after-edge", "ideographic", "alphabetic", "hanging",
@@ -388,17 +423,17 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "none", "inline", "block", "list-item", "compact", "inline-block", "table", "inline-table",
         "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group",
         "table-column", "table-cell", "table-caption", "-webkit-box", "-webkit-inline-box", "-wap-marquee",
-        "flex", "inline-flex", "-webkit-grid", "-webkit-inline-grid"
+        "flex", "inline-flex", "grid", "inline-grid"
     ],
     "image-rendering": [
-        "auto", "optimizeSpeed", "optimizeQuality", "-webkit-crisp-edges", "-webkit-optimize-contrast"
+        "auto", "optimizeSpeed", "optimizeQuality", "-webkit-crisp-edges", "-webkit-optimize-contrast", "crisp-edges", "pixelated"
     ],
     "alignment-baseline": [
         "baseline", "middle", "auto", "before-edge", "after-edge", "central", "text-before-edge", "text-after-edge",
         "ideographic", "alphabetic", "hanging", "mathematical"
     ],
     "outline-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "text-line-through-width": [
         "normal", "medium", "auto", "thick", "thin"
@@ -439,6 +474,15 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "margin-after-collapse": [
         "collapse", "separate", "discard"
     ],
+    "break-after": [
+         "left", "right", "recto", "verso", "auto", "avoid", "page", "column", "region", "avoid-page", "avoid-column", "avoid-region"
+    ],
+    "break-before": [
+          "left", "right", "recto", "verso", "auto", "avoid", "page", "column", "region", "avoid-page", "avoid-column", "avoid-region"
+    ],
+    "break-inside": [
+          "auto", "avoid", "avoid-page", "avoid-column", "avoid-region"
+    ],
     "page-break-after": [
         "left", "right", "auto", "always", "avoid"
     ],
@@ -461,7 +505,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "none", "auto", "manual"
     ],
     "border-image": [
-        "repeat", "stretch", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+        "repeat", "stretch", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "image-set()"
     ],
     "border-image-repeat": [
         "repeat", "stretch", "space", "round"
@@ -474,11 +518,11 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     ],
     "font-family": [
         "serif", "sans-serif", "cursive", "fantasy", "monospace", "-webkit-body", "-webkit-pictograph",
-        "-webkit-system-font", "-apple-system-font", "-apple-system-headline", "-apple-system-body",
+        "-apple-system", "-apple-system-headline", "-apple-system-body",
         "-apple-system-subheadline", "-apple-system-footnote", "-apple-system-caption1", "-apple-system-caption2",
         "-apple-system-short-headline", "-apple-system-short-body", "-apple-system-short-subheadline",
         "-apple-system-short-footnote", "-apple-system-short-caption1", "-apple-system-tall-body",
-        "-apple-system-title1", "-apple-system-title2", "-apple-system-title3"
+        "-apple-system-title0", "-apple-system-title1", "-apple-system-title2", "-apple-system-title3", "-apple-system-title4", "system-ui"
     ],
     "text-overflow-mode": [
         "clip", "ellipsis"
@@ -487,7 +531,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
     ],
     "unicode-bidi": [
-        "normal", "bidi-override", "embed", "-webkit-plaintext", "-webkit-isolate", "-webkit-isolate-override"
+        "normal", "bidi-override", "embed", "plaintext", "isolate", "isolate-override"
     ],
     "clip-rule": [
         "nonzero", "evenodd"
@@ -505,40 +549,40 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "auto"
     ],
     "width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
     ],
     "height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "calc()"
     ],
     "max-width": [
-        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
     ],
     "min-width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
     ],
     "max-height": [
-        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+        "none", "intrinsic", "min-intrinsic", "calc()"
     ],
     "min-height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "calc()"
     ],
     "-webkit-logical-width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
     ],
     "-webkit-logical-height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "calc()"
     ],
     "-webkit-max-logical-width": [
-        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
     ],
     "-webkit-min-logical-width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
     ],
     "-webkit-max-logical-height": [
-        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+        "none", "intrinsic", "min-intrinsic", "calc()"
     ],
     "-webkit-min-logical-height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+        "intrinsic", "min-intrinsic", "calc()"
     ],
     "empty-cells": [
         "hide", "show"
@@ -547,10 +591,10 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "none", "all", "auto", "visible", "visiblepainted", "visiblefill", "visiblestroke", "painted", "fill", "stroke"
     ],
     "letter-spacing": [
-        "normal", "calc()", "-webkit-calc()"
+        "normal", "calc()"
     ],
     "word-spacing": [
-        "normal", "calc()", "-webkit-calc()"
+        "normal", "calc()"
     ],
     "-webkit-font-kerning": [
         "auto", "normal", "none"
@@ -567,6 +611,10 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "font-variant": [
         "small-caps", "normal"
     ],
+    "font-variant-numeric": [
+        "normal", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums",
+        "diagonal-fractions", "stacked-fractions"
+    ],
     "vertical-align": [
         "baseline", "middle", "sub", "super", "text-top", "text-bottom", "top", "bottom", "-webkit-baseline-middle"
     ],
@@ -577,7 +625,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "normal", "break-all", "break-word"
     ],
     "text-underline-width": [
-        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()"
+        "normal", "medium", "auto", "thick", "thin", "calc()"
     ],
     "text-indent": [
         "-webkit-each-line", "-webkit-hanging"
@@ -591,7 +639,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "clip-path": [
         "none", "url()", "circle()", "ellipse()", "inset()", "polygon()", "margin-box", "border-box", "padding-box", "content-box"
     ],
-    "-webkit-shape-outside": [
+    "shape-outside": [
         "none", "url()", "circle()", "ellipse()", "inset()", "polygon()", "margin-box", "border-box", "padding-box", "content-box"
     ],
     "orphans": [
@@ -606,6 +654,12 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "page": [
         "auto"
     ],
+    "perspective": [
+        "none"
+    ],
+    "perspective-origin": [
+        "none", "left", "right", "bottom", "top", "center"
+    ],
     "-webkit-marquee-increment": [
         "small", "large", "medium"
     ],
@@ -636,11 +690,14 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "-webkit-text-emphasis-position": [
         "over", "under", "left", "right"
     ],
-    "-webkit-transform": [
+    "transform": [
         "none",
         "scale()", "scaleX()", "scaleY()", "scale3d()", "rotate()", "rotateX()", "rotateY()", "rotateZ()", "rotate3d()", "skew()", "skewX()", "skewY()",
         "translate()", "translateX()", "translateY()", "translateZ()", "translate3d()", "matrix()", "matrix3d()", "perspective()"
     ],
+    "transform-style": [
+        "flat", "preserve-3d"
+    ],
     "-webkit-cursor-visibility": [
         "auto", "auto-hide"
     ],
@@ -666,11 +723,14 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "from-image", "snap"
     ],
     "-webkit-blend-mode": [
-        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "plus-darker", "plus-lighter", "hue", "saturation", "color", "luminosity",
+    ],
+    "mix-blend-mode": [
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "plus-darker", "plus-lighter", "hue", "saturation", "color", "luminosity",
     ],
     "mix": [
         "auto",
-        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity",
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "plus-darker", "plus-lighter", "hue", "saturation", "color", "luminosity",
         "clear", "copy", "destination", "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "xor"
     ],
     "geometry": [
@@ -680,13 +740,13 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "normal", "break-word"
     ],
     "transition": [
-        "none", "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "all", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
+        "none", "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "spring()", "all", WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder
     ],
     "transition-timing-function": [
-        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
+        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "spring()"
     ],
     "transition-property": [
-        "all", "none", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
+        "all", "none", WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder
     ],
     "-webkit-column-progression": [
         "normal", "reverse"
@@ -695,16 +755,41 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "slice", "clone"
     ],
     "align-content": [
-        "flex-start", "flex-end", "center", "space-between", "space-around", "stretch"
+        "auto",
+        "baseline", "last-baseline",
+        "space-between", "space-around", "space-evenly", "stretch",
+        "center", "start", "end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "justify-content": [
+        "auto",
+        "baseline", "last-baseline", "space-between", "space-around", "space-evenly", "stretch",
+        "center", "start", "end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
     ],
     "align-items": [
-        "flex-start", "flex-end", "center", "baseline", "stretch"
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
     ],
     "align-self": [
-        "auto", "flex-start", "flex-end", "center", "baseline", "stretch"
-    ],
-    "justify-content": [
-        "flex-start", "flex-end", "center", "space-between", "space-around"
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "justify-items": [
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "justify-self": [
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
     ],
     "flex-direction": [
         "row", "row-reverse", "column", "column-reverse"
@@ -722,35 +807,53 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "flex-basis": [
         "auto"
     ],
-    "-webkit-grid-after": [
+    "grid": [
+        "none"
+    ],
+    "grid-area": [
         "auto"
     ],
-    "-webkit-grid-before": [
+    "grid-auto-columns": [
+        "auto", "-webkit-max-content", "-webkit-min-content", "minmax()",
+    ],
+    "grid-auto-flow": [
+        "row", "column", "dense"
+    ],
+    "grid-auto-rows": [
+        "auto", "-webkit-max-content", "-webkit-min-content", "minmax()",
+    ],
+    "grid-column": [
         "auto"
     ],
-    "-webkit-grid-end": [
+    "grid-column-start": [
         "auto"
     ],
-    "-webkit-grid-start": [
+    "grid-column-end": [
         "auto"
     ],
-    "-webkit-grid-auto-flow": [
-        "none", "rows", "columns"
+    "grid-row": [
+        "auto"
     ],
-    "-webkit-grid-column": [
+    "grid-row-start": [
         "auto"
     ],
-    "-webkit-grid-row": [
+    "grid-row-end": [
         "auto"
     ],
-    "-webkit-grid-columns": [
-        "auto", "-webkit-max-content", "-webkit-min-content"
+    "grid-template": [
+        "none"
+    ],
+    "grid-template-areas": [
+        "none"
+    ],
+    "grid-template-columns": [
+        "none", "auto", "-webkit-max-content", "-webkit-min-content", "minmax()", "repeat()"
     ],
-    "-webkit-grid-rows": [
-        "auto", "-webkit-max-content", "-webkit-min-content"
+    "grid-template-rows": [
+        "none", "auto", "-webkit-max-content", "-webkit-min-content", "minmax()", "repeat()"
     ],
     "-webkit-ruby-position": [
-        "after", "before"
+        "after", "before", "inter-character"
     ],
     "-webkit-text-align-last": [
         "auto", "start", "end", "left", "right", "center", "justify"
@@ -767,6 +870,12 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "orientation": [
         "auto", "portait", "landscape"
     ],
+    "scroll-snap-align": [
+        "none", "start", "center", "end"
+    ],
+    "scroll-snap-type": [
+        "none", "mandatory", "proximity", "x", "y", "inline", "block", "both"
+    ],
     "user-zoom": [
         "zoom", "fixed"
     ],
@@ -795,10 +904,10 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "paused", "running"
     ],
     "-webkit-animation-timing-function": [
-        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
+        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "spring()"
     ],
     "-webkit-column-span": [
-        "all", "none", "calc()", "-webkit-calc()"
+        "all", "none", "calc()"
     ],
     "-webkit-region-break-after": [
         "auto", "always", "avoid", "left", "right"
@@ -848,53 +957,56 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     "-webkit-text-security": [
         "disc", "circle", "square", "none"
     ],
-    "-webkit-transform-style": [
-        "flat", "preserve-3d"
-    ],
     "-webkit-user-drag": [
         "auto", "none", "element"
     ],
     "-webkit-user-modify": [
         "read-only", "read-write", "read-write-plaintext-only"
     ],
+    "-webkit-user-select": [
+        "auto", "none", "text", "all"
+    ],
     "-webkit-text-stroke-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "-webkit-border-start-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "-webkit-border-end-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "-webkit-border-before-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "-webkit-border-after-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "-webkit-column-rule-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+        "medium", "thick", "thin", "calc()"
     ],
     "-webkit-aspect-ratio": [
         "auto", "from-dimensions", "from-intrinsic", "/"
     ],
-    "-webkit-filter": [
+    "filter": [
         "none", "grayscale()", "sepia()", "saturate()", "hue-rotate()", "invert()", "opacity()", "brightness()", "contrast()", "blur()", "drop-shadow()", "custom()"
     ],
-    "-webkit-perspective": [
-        "none"
+    "-webkit-backdrop-filter": [
+        "none", "grayscale()", "sepia()", "saturate()", "hue-rotate()", "invert()", "opacity()", "brightness()", "contrast()", "blur()", "drop-shadow()", "custom()"
     ],
     "-webkit-column-count": [
-        "auto", "calc()", "-webkit-calc()"
+        "auto", "calc()"
     ],
     "-webkit-column-gap": [
-        "normal", "calc()", "-webkit-calc()"
+        "normal", "calc()"
     ],
     "-webkit-column-axis": [
         "horizontal", "vertical", "auto"
     ],
     "-webkit-column-width": [
-        "auto", "calc()", "-webkit-calc()"
+        "auto", "calc()"
+    ],
+    "-webkit-column-fill": [
+        "auto", "balance"
     ],
     "-webkit-hyphenate-character": [
         "none"
@@ -918,9 +1030,9 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "sideways", "sideways-right", "vertical-right", "upright"
     ],
     "-webkit-line-box-contain": [
-        "block", "inline", "font", "glyphs", "replaced", "inline-box", "none", "initial"
+        "block", "inline", "font", "glyphs", "replaced", "inline-box", "none"
     ],
-    "-webkit-font-feature-settings": [
+    "font-feature-settings": [
         "normal"
     ],
     "-webkit-font-variant-ligatures": [
@@ -928,20 +1040,11 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
     ],
     /*
     "-webkit-appearance": [
-        "none", "checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "default-button", "inner-spin-button", "listbox", "listitem", "media-enter-fullscreen-button", "media-exit-fullscreen-button", "media-fullscreen-volume-slider", "media-fullscreen-volume-slider-thumb", "media-mute-button", "media-play-button", "media-overlay-play-button", "media-seek-back-button", "media-seek-forward-button", "media-rewind-button", "media-return-to-realtime-button", "media-toggle-closed-captions-button", "media-slider", "media-sliderthumb", "media-volume-slider-container", "media-volume-slider", "media-volume-sliderthumb", "media-volume-slider-mute-button", "media-controls-background", "media-controls-fullscreen-background", "media-current-time-display", "media-time-remaining-display", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "meter", "progress-bar", "progress-bar-value", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "snapshotted-plugin-overlay", "textfield", "relevancy-level-indicator", "continuous-capacity-level-indicator", "discrete-capacity-level-indicator", "rating-level-indicator", "textarea"
+        "none", "checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "default-button", "inner-spin-button", "listbox", "listitem", "media-enter-fullscreen-button", "media-exit-fullscreen-button", "media-fullscreen-volume-slider", "media-fullscreen-volume-slider-thumb", "media-mute-button", "media-play-button", "media-overlay-play-button", "media-seek-back-button", "media-seek-forward-button", "media-rewind-button", "media-return-to-realtime-button", "media-toggle-closed-captions-button", "media-slider", "media-sliderthumb", "media-volume-slider-container", "media-volume-slider", "media-volume-sliderthumb", "media-volume-slider-mute-button", "media-controls-background", "media-controls-fullscreen-background", "media-current-time-display", "media-time-remaining-display", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "meter", "progress-bar", "progress-bar-value", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "snapshotted-plugin-overlay", "textfield", "relevancy-level-indicator", "continuous-capacity-level-indicator", "discrete-capacity-level-indicator", "rating-level-indicator", "textarea", "attachment", "caps-lock-indicator", "color-well"
     ],
     */
-    "-webkit-scroll-snap-type": [
-        "mandatory", "proximity", "none"
-    ],
-    "-webkit-scroll-snap-points-x": [
-        "elements", "repeat"
-    ],
-    "-webkit-scroll-snap-points-y": [
-        "elements", "repeat"
-    ],
-    "-webkit-scroll-snap-coordinate": [
-        "none"
+    "-webkit-animation-trigger": [
+        "auto", "container-scroll()"
     ],
 
     // iOS Properties