[macOS] Color wells should appear pressed when presenting a color picker
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Models / CSSKeywordCompletions.js
index 327a7b0..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)
 {
-    let acceptedKeywords = ["initial", "unset", "revert", "var()"];
+    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.includes(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder) && WebInspector.CSSCompletions.cssNameCompletions) {
-        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)
+{
+    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;
     }
 
@@ -84,15 +106,15 @@ 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-variant-numeric", "font-weight",
+    "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",
@@ -118,7 +140,7 @@ WebInspector.CSSKeywordCompletions.InheritedProperties = [
     "-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",
@@ -139,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",
@@ -151,7 +173,7 @@ WebInspector.CSSKeywordCompletions._colorAwareProperties = [
     "-webkit-tap-highlight-color"
 ].keySet();
 
-WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
+WI.CSSKeywordCompletions._propertyKeywordMap = {
     "table-layout": [
         "auto", "fixed"
     ],
@@ -162,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()", "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()", "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"
     ],
@@ -177,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"
@@ -189,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"
@@ -220,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"
@@ -229,21 +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", "zoom-in", "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-zoom-in", "-webkit-zoom-out",
-        "-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()", "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",
@@ -251,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()", "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"
@@ -296,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"
@@ -329,7 +360,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "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"
@@ -382,7 +413,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "-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-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",
@@ -402,7 +433,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "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"
@@ -474,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()", "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"
@@ -491,7 +522,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "-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"
@@ -500,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"
@@ -518,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"
@@ -560,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"
@@ -594,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"
@@ -608,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": [
@@ -709,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"
@@ -839,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"
     ],
@@ -867,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"
@@ -930,22 +967,22 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "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", "/"
@@ -957,16 +994,16 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "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"
@@ -1003,27 +1040,12 @@ 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", "attachment", "caps-lock-indicator"
+        "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-animation-trigger": [
         "auto", "container-scroll()"
     ],
-    "-webkit-scroll-snap-type": [
-        "none", "mandatory", "proximity"
-    ],
-    "-webkit-scroll-snap-points-x": [
-        "elements", "repeat()"
-    ],
-    "-webkit-scroll-snap-points-y": [
-        "elements", "repeat()"
-    ],
-    "-webkit-scroll-snap-destination": [
-        "none", "left", "right", "bottom", "top", "center"
-    ],
-    "-webkit-scroll-snap-coordinate": [
-        "none", "left", "right", "bottom", "top", "center"
-    ],
 
     // iOS Properties
     "-webkit-text-size-adjust": [