Attachment 360252 Details for Bug 193166 – Patch

[patch] Patch

bug-193166-20190126143824.patch (text/plain), 58.70 KB, created by Devin Rousso on 2019-01-26 14:38:25 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-01-26 14:38:25 PST

Size: 58.70 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index d44512a4776c90aacb84c787f230d86211d886e7..ffddf7c4c6be26091f8a4312fd3ddd2ad0174d4f 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,19 @@
>+2019-01-26  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: handle CSS Color 4 color syntaxes
>+        https://bugs.webkit.org/show_bug.cgi?id=193166
>+        <rdar://problem/47062403>
>+
>+        Reviewed by Simon Fraser.
>+
>+        * UserInterface/Models/Color.js:
>+        (WI.Color.fromString):
>+        (WI.Color.fromString.splitFunctionString): Added.
>+        (WI.Color.fromString.parseFunctionAlpha): Added.
>+        (WI.Color.fromString.parseFunctionComponent): Added.
>+        (WI.Color.fromString.parseHueComponent): Added.
>+        (WI.Color.fromString.parsePercentageComponent): Added.
>+
> 2019-01-26  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: provide a way to edit the user agent of a remote target
>diff --git a/Source/WebInspectorUI/UserInterface/Models/Color.js b/Source/WebInspectorUI/UserInterface/Models/Color.js
>index 4ca04a4e83d3fadf56d958d6077aa6fc148bbca2..b66f1a6f9c35558473458d6d322453d6391a39f6 100644
>--- a/Source/WebInspectorUI/UserInterface/Models/Color.js
>+++ b/Source/WebInspectorUI/UserInterface/Models/Color.js
>@@ -48,108 +48,126 @@ WI.Color = class Color
> 
>     static fromString(colorString)
>     {
>-        let value = colorString.toLowerCase().replace(/%|\s+/g, "");
>-        let transparentKeywords = ["transparent", "rgba(0,0,0,0)", "hsla(0,0,0,0)"];
>-        if (transparentKeywords.includes(value)) {
>-            let color = new WI.Color(WI.Color.Format.Keyword, [0, 0, 0, 0]);
>-            color.keyword = "transparent";
>+        const matchRegExp = /^(?:#(?<hex>[0-9a-f]{3,8})|rgba?$(?<rgb>[^)]+)$|(?<keyword>\w+)|hsla?$(?<hsl>[^)]+)$)$/i;
>+        let match = colorString.match(matchRegExp);
>+        if (!match)
>+            return null;
>+
>+        if (match.groups.hex) {
>+            let hex = match.groups.hex.toUpperCase();
>+            switch (hex.length) {
>+            case 3:
>+                return new WI.Color(WI.Color.Format.ShortHEX, [
>+                    parseInt(hex.charAt(0) + hex.charAt(0), 16),
>+                    parseInt(hex.charAt(1) + hex.charAt(1), 16),
>+                    parseInt(hex.charAt(2) + hex.charAt(2), 16),
>+                    1
>+                ]);
>+
>+            case 6:
>+                return new WI.Color(WI.Color.Format.HEX, [
>+                    parseInt(hex.substring(0, 2), 16),
>+                    parseInt(hex.substring(2, 4), 16),
>+                    parseInt(hex.substring(4, 6), 16),
>+                    1
>+                ]);
>+
>+            case 4:
>+                return new WI.Color(WI.Color.Format.ShortHEXAlpha, [
>+                    parseInt(hex.charAt(0) + hex.charAt(0), 16),
>+                    parseInt(hex.charAt(1) + hex.charAt(1), 16),
>+                    parseInt(hex.charAt(2) + hex.charAt(2), 16),
>+                    parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255
>+                ]);
>+
>+            case 8:
>+                return new WI.Color(WI.Color.Format.HEXAlpha, [
>+                    parseInt(hex.substring(0, 2), 16),
>+                    parseInt(hex.substring(2, 4), 16),
>+                    parseInt(hex.substring(4, 6), 16),
>+                    parseInt(hex.substring(6, 8), 16) / 255
>+                ]);
>+            }
>+
>+            return null;
>+        }
>+
>+        if (match.groups.keyword) {
>+            let keyword = match.groups.keyword.toLowerCase();
>+            if (!WI.Color.Keywords.hasOwnProperty(keyword))
>+                return null;
>+            let color = new WI.Color(WI.Color.Format.Keyword, WI.Color.Keywords[keyword].slice());
>+            color.keyword = keyword;
>             color.original = colorString;
>             return color;
>         }
> 
>-        // Simple - #hex, rgb(), keyword, hsl()
>-        let simple = /^(?:#(?<hex>[0-9a-f]{3,8})|rgb$(?<rgb>[^)]+)$|(?<keyword>\w+)|hsl$(?<hsl>[^)]+)$)$/i;
>-        let match = colorString.match(simple);
>-        if (match) {
>-            if (match.groups.hex) {
>-                let hex = match.groups.hex.toUpperCase();
>-                let len = hex.length;
>-                if (len === 3) {
>-                    return new WI.Color(WI.Color.Format.ShortHEX, [
>-                        parseInt(hex.charAt(0) + hex.charAt(0), 16),
>-                        parseInt(hex.charAt(1) + hex.charAt(1), 16),
>-                        parseInt(hex.charAt(2) + hex.charAt(2), 16),
>-                        1
>-                    ]);
>-                } else if (len === 6) {
>-                    return new WI.Color(WI.Color.Format.HEX, [
>-                        parseInt(hex.substring(0, 2), 16),
>-                        parseInt(hex.substring(2, 4), 16),
>-                        parseInt(hex.substring(4, 6), 16),
>-                        1
>-                    ]);
>-                } else if (len === 4) {
>-                    return new WI.Color(WI.Color.Format.ShortHEXAlpha, [
>-                        parseInt(hex.charAt(0) + hex.charAt(0), 16),
>-                        parseInt(hex.charAt(1) + hex.charAt(1), 16),
>-                        parseInt(hex.charAt(2) + hex.charAt(2), 16),
>-                        parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255
>-                    ]);
>-                } else if (len === 8) {
>-                    return new WI.Color(WI.Color.Format.HEXAlpha, [
>-                        parseInt(hex.substring(0, 2), 16),
>-                        parseInt(hex.substring(2, 4), 16),
>-                        parseInt(hex.substring(4, 6), 16),
>-                        parseInt(hex.substring(6, 8), 16) / 255
>-                    ]);
>-                } else
>-                    return null;
>-            } else if (match.groups.rgb) {
>-                let rgb = match.groups.rgb.split(/\s*,\s*/);
>-                if (rgb.length !== 3)
>-                    return null;
>-                return new WI.Color(WI.Color.Format.RGB, [
>-                    parseInt(rgb[0]),
>-                    parseInt(rgb[1]),
>-                    parseInt(rgb[2]),
>-                    1
>-                ]);
>-            } else if (match.groups.keyword) {
>-                let keyword = match.groups.keyword.toLowerCase();
>-                if (!WI.Color.Keywords.hasOwnProperty(keyword))
>-                    return null;
>-                let color = new WI.Color(WI.Color.Format.Keyword, WI.Color.Keywords[keyword].concat(1));
>-                color.keyword = keyword;
>-                color.original = colorString;
>-                return color;
>-            } else if (match.groups.hsl) {
>-                let hsl = match.groups.hsl.replace(/%/g, "").split(/\s*,\s*/);
>-                if (hsl.length !== 3)
>-                    return null;
>-                return new WI.Color(WI.Color.Format.HSL, [
>-                    parseInt(hsl[0]),
>-                    parseInt(hsl[1]),
>-                    parseInt(hsl[2]),
>-                    1
>-                ]);
>-            }
>+        function splitFunctionString(string) {
>+            return string.trim().replace(/(\s*(,|\/)\s*|\s+)/g, "|").split("|");
>         }
> 
>-        // Advanced - rgba(), hsla()
>-        let advanced = /^(?:rgba$(?<rgba>[^)]+)$|hsla$(?<hsla>[^)]+)$)$/i;
>-        match = colorString.match(advanced);
>-        if (match) {
>-            if (match.groups.rgba) {
>-                let rgba = match.groups.rgba.split(/\s*,\s*/);
>-                if (rgba.length !== 4)
>-                    return null;
>-                return new WI.Color(WI.Color.Format.RGBA, [
>-                    parseInt(rgba[0]),
>-                    parseInt(rgba[1]),
>-                    parseInt(rgba[2]),
>-                    Number.constrain(parseFloat(rgba[3]), 0, 1)
>-                ]);
>-            } else if (match.groups.hsla) {
>-                let hsla = match.groups.hsla.replace(/%/g, "").split(/\s*,\s*/);
>-                if (hsla.length !== 4)
>-                    return null;
>-                return new WI.Color(WI.Color.Format.HSLA, [
>-                    parseInt(hsla[0]),
>-                    parseInt(hsla[1]),
>-                    parseInt(hsla[2]),
>-                    Number.constrain(parseFloat(hsla[3]), 0, 1)
>-                ]);
>+        function parseFunctionAlpha(alpha) {
>+            let value = parseFloat(alpha);
>+            if (alpha.includes("%"))
>+                value /= 100;
>+            return Number.constrain(value, 0, 1);
>+        }
>+
>+        if (match.groups.rgb) {
>+            let rgb = splitFunctionString(match.groups.rgb);
>+            if (rgb.length !== 3 && rgb.length !== 4)
>+                return null;
>+
>+            function parseFunctionComponent(component) {
>+                let value = parseFloat(component);
>+                if (component.includes("%"))
>+                    value = value * 255 / 100;
>+                return Number.constrain(value, 0, 255);
>             }
>+
>+            let alpha = 1;
>+            if (rgb.length === 4)
>+                alpha = parseFunctionAlpha(rgb[3]);
>+
>+            return new WI.Color(rgb.length === 4 ? WI.Color.Format.RGBA : WI.Color.Format.RGB, [
>+                parseFunctionComponent(rgb[0]),
>+                parseFunctionComponent(rgb[1]),
>+                parseFunctionComponent(rgb[2]),
>+                alpha,
>+            ]);
>+        }
>+
>+        if (match.groups.hsl) {
>+            let hsl = splitFunctionString(match.groups.hsl);
>+            if (hsl.length !== 3 && hsl.length !== 4)
>+                return null;
>+
>+            let alpha = 1;
>+            if (hsl.length === 4)
>+                alpha = parseFunctionAlpha(hsl[3]);
>+
>+            function parseHueComponent(hue) {
>+                let value = parseFloat(hue);
>+                if (/(\b|\d)rad\b/.test(hue))
>+                    value = value * 180 / Math.PI;
>+                else if (/(\b|\d)grad\b/.test(hue))
>+                    value = value * 360 / 400;
>+                else if (/(\b|\d)turn\b/.test(hue))
>+                    value = value * 360;
>+                return Number.constrain(value, 0, 360);
>+            }
>+
>+            function parsePercentageComponent(component) {
>+                let value = parseFloat(component);
>+                return Number.constrain(value, 0, 100);
>+            }
>+
>+            return new WI.Color(hsl.length === 4 ? WI.Color.Format.HSLA : WI.Color.Format.HSL, [
>+                parseHueComponent(hsl[0]),
>+                parsePercentageComponent(hsl[1]),
>+                parsePercentageComponent(hsl[2]),
>+                alpha,
>+            ]);
>         }
> 
>         return null;
>@@ -595,150 +613,151 @@ WI.Color.FunctionNames = new Set([
> ]);
> 
> WI.Color.Keywords = {
>-    "aliceblue": [240, 248, 255],
>-    "antiquewhite": [250, 235, 215],
>-    "aquamarine": [127, 255, 212],
>-    "azure": [240, 255, 255],
>-    "beige": [245, 245, 220],
>-    "bisque": [255, 228, 196],
>-    "black": [0, 0, 0],
>-    "blanchedalmond": [255, 235, 205],
>-    "blue": [0, 0, 255],
>-    "blueviolet": [138, 43, 226],
>-    "brown": [165, 42, 42],
>-    "burlywood": [222, 184, 135],
>-    "cadetblue": [95, 158, 160],
>-    "chartreuse": [127, 255, 0],
>-    "chocolate": [210, 105, 30],
>-    "coral": [255, 127, 80],
>-    "cornflowerblue": [100, 149, 237],
>-    "cornsilk": [255, 248, 220],
>-    "crimson": [237, 164, 61],
>-    "cyan": [0, 255, 255],
>-    "darkblue": [0, 0, 139],
>-    "darkcyan": [0, 139, 139],
>-    "darkgoldenrod": [184, 134, 11],
>-    "darkgray": [169, 169, 169],
>-    "darkgreen": [0, 100, 0],
>-    "darkgrey": [169, 169, 169],
>-    "darkkhaki": [189, 183, 107],
>-    "darkmagenta": [139, 0, 139],
>-    "darkolivegreen": [85, 107, 47],
>-    "darkorange": [255, 140, 0],
>-    "darkorchid": [153, 50, 204],
>-    "darkred": [139, 0, 0],
>-    "darksalmon": [233, 150, 122],
>-    "darkseagreen": [143, 188, 143],
>-    "darkslateblue": [72, 61, 139],
>-    "darkslategray": [47, 79, 79],
>-    "darkslategrey": [47, 79, 79],
>-    "darkturquoise": [0, 206, 209],
>-    "darkviolet": [148, 0, 211],
>-    "deeppink": [255, 20, 147],
>-    "deepskyblue": [0, 191, 255],
>-    "dimgray": [105, 105, 105],
>-    "dimgrey": [105, 105, 105],
>-    "dodgerblue": [30, 144, 255],
>-    "firebrick": [178, 34, 34],
>-    "floralwhite": [255, 250, 240],
>-    "forestgreen": [34, 139, 34],
>-    "gainsboro": [220, 220, 220],
>-    "ghostwhite": [248, 248, 255],
>-    "gold": [255, 215, 0],
>-    "goldenrod": [218, 165, 32],
>-    "gray": [128, 128, 128],
>-    "green": [0, 128, 0],
>-    "greenyellow": [173, 255, 47],
>-    "grey": [128, 128, 128],
>-    "honeydew": [240, 255, 240],
>-    "hotpink": [255, 105, 180],
>-    "indianred": [205, 92, 92],
>-    "indigo": [75, 0, 130],
>-    "ivory": [255, 255, 240],
>-    "khaki": [240, 230, 140],
>-    "lavender": [230, 230, 250],
>-    "lavenderblush": [255, 240, 245],
>-    "lawngreen": [124, 252, 0],
>-    "lemonchiffon": [255, 250, 205],
>-    "lightblue": [173, 216, 230],
>-    "lightcoral": [240, 128, 128],
>-    "lightcyan": [224, 255, 255],
>-    "lightgoldenrodyellow": [250, 250, 210],
>-    "lightgray": [211, 211, 211],
>-    "lightgreen": [144, 238, 144],
>-    "lightgrey": [211, 211, 211],
>-    "lightpink": [255, 182, 193],
>-    "lightsalmon": [255, 160, 122],
>-    "lightseagreen": [32, 178, 170],
>-    "lightskyblue": [135, 206, 250],
>-    "lightslategray": [119, 136, 153],
>-    "lightslategrey": [119, 136, 153],
>-    "lightsteelblue": [176, 196, 222],
>-    "lightyellow": [255, 255, 224],
>-    "lime": [0, 255, 0],
>-    "limegreen": [50, 205, 50],
>-    "linen": [250, 240, 230],
>-    "magenta": [255, 0, 255],
>-    "maroon": [128, 0, 0],
>-    "mediumaquamarine": [102, 205, 170],
>-    "mediumblue": [0, 0, 205],
>-    "mediumorchid": [186, 85, 211],
>-    "mediumpurple": [147, 112, 219],
>-    "mediumseagreen": [60, 179, 113],
>-    "mediumslateblue": [123, 104, 238],
>-    "mediumspringgreen": [0, 250, 154],
>-    "mediumturquoise": [72, 209, 204],
>-    "mediumvioletred": [199, 21, 133],
>-    "midnightblue": [25, 25, 112],
>-    "mintcream": [245, 255, 250],
>-    "mistyrose": [255, 228, 225],
>-    "moccasin": [255, 228, 181],
>-    "navajowhite": [255, 222, 173],
>-    "navy": [0, 0, 128],
>-    "oldlace": [253, 245, 230],
>-    "olive": [128, 128, 0],
>-    "olivedrab": [107, 142, 35],
>-    "orange": [255, 165, 0],
>-    "orangered": [255, 69, 0],
>-    "orchid": [218, 112, 214],
>-    "palegoldenrod": [238, 232, 170],
>-    "palegreen": [152, 251, 152],
>-    "paleturquoise": [175, 238, 238],
>-    "palevioletred": [219, 112, 147],
>-    "papayawhip": [255, 239, 213],
>-    "peachpuff": [255, 218, 185],
>-    "peru": [205, 133, 63],
>-    "pink": [255, 192, 203],
>-    "plum": [221, 160, 221],
>-    "powderblue": [176, 224, 230],
>-    "purple": [128, 0, 128],
>-    "rebeccapurple": [102, 51, 153],
>-    "red": [255, 0, 0],
>-    "rosybrown": [188, 143, 143],
>-    "royalblue": [65, 105, 225],
>-    "saddlebrown": [139, 69, 19],
>-    "salmon": [250, 128, 114],
>-    "sandybrown": [244, 164, 96],
>-    "seagreen": [46, 139, 87],
>-    "seashell": [255, 245, 238],
>-    "sienna": [160, 82, 45],
>-    "silver": [192, 192, 192],
>-    "skyblue": [135, 206, 235],
>-    "slateblue": [106, 90, 205],
>-    "slategray": [112, 128, 144],
>-    "slategrey": [112, 128, 144],
>-    "snow": [255, 250, 250],
>-    "springgreen": [0, 255, 127],
>-    "steelblue": [70, 130, 180],
>-    "tan": [210, 180, 140],
>-    "teal": [0, 128, 128],
>-    "thistle": [216, 191, 216],
>-    "tomato": [255, 99, 71],
>-    "turquoise": [64, 224, 208],
>-    "violet": [238, 130, 238],
>-    "wheat": [245, 222, 179],
>-    "white": [255, 255, 255],
>-    "whitesmoke": [245, 245, 245],
>-    "yellow": [255, 255, 0],
>-    "yellowgreen": [154, 205, 50]
>+    "aliceblue": [240, 248, 255, 1],
>+    "antiquewhite": [250, 235, 215, 1],
>+    "aquamarine": [127, 255, 212, 1],
>+    "azure": [240, 255, 255, 1],
>+    "beige": [245, 245, 220, 1],
>+    "bisque": [255, 228, 196, 1],
>+    "black": [0, 0, 0, 1],
>+    "blanchedalmond": [255, 235, 205, 1],
>+    "blue": [0, 0, 255, 1],
>+    "blueviolet": [138, 43, 226, 1],
>+    "brown": [165, 42, 42, 1],
>+    "burlywood": [222, 184, 135, 1],
>+    "cadetblue": [95, 158, 160, 1],
>+    "chartreuse": [127, 255, 0, 1],
>+    "chocolate": [210, 105, 30, 1],
>+    "coral": [255, 127, 80, 1],
>+    "cornflowerblue": [100, 149, 237, 1],
>+    "cornsilk": [255, 248, 220, 1],
>+    "crimson": [237, 164, 61, 1],
>+    "cyan": [0, 255, 255, 1],
>+    "darkblue": [0, 0, 139, 1],
>+    "darkcyan": [0, 139, 139, 1],
>+    "darkgoldenrod": [184, 134, 11, 1],
>+    "darkgray": [169, 169, 169, 1],
>+    "darkgreen": [0, 100, 0, 1],
>+    "darkgrey": [169, 169, 169, 1],
>+    "darkkhaki": [189, 183, 107, 1],
>+    "darkmagenta": [139, 0, 139, 1],
>+    "darkolivegreen": [85, 107, 47, 1],
>+    "darkorange": [255, 140, 0, 1],
>+    "darkorchid": [153, 50, 204, 1],
>+    "darkred": [139, 0, 0, 1],
>+    "darksalmon": [233, 150, 122, 1],
>+    "darkseagreen": [143, 188, 143, 1],
>+    "darkslateblue": [72, 61, 139, 1],
>+    "darkslategray": [47, 79, 79, 1],
>+    "darkslategrey": [47, 79, 79, 1],
>+    "darkturquoise": [0, 206, 209, 1],
>+    "darkviolet": [148, 0, 211, 1],
>+    "deeppink": [255, 20, 147, 1],
>+    "deepskyblue": [0, 191, 255, 1],
>+    "dimgray": [105, 105, 105, 1],
>+    "dimgrey": [105, 105, 105, 1],
>+    "dodgerblue": [30, 144, 255, 1],
>+    "firebrick": [178, 34, 34, 1],
>+    "floralwhite": [255, 250, 240, 1],
>+    "forestgreen": [34, 139, 34, 1],
>+    "gainsboro": [220, 220, 220, 1],
>+    "ghostwhite": [248, 248, 255, 1],
>+    "gold": [255, 215, 0, 1],
>+    "goldenrod": [218, 165, 32, 1],
>+    "gray": [128, 128, 128, 1],
>+    "green": [0, 128, 0, 1],
>+    "greenyellow": [173, 255, 47, 1],
>+    "grey": [128, 128, 128, 1],
>+    "honeydew": [240, 255, 240, 1],
>+    "hotpink": [255, 105, 180, 1],
>+    "indianred": [205, 92, 92, 1],
>+    "indigo": [75, 0, 130, 1],
>+    "ivory": [255, 255, 240, 1],
>+    "khaki": [240, 230, 140, 1],
>+    "lavender": [230, 230, 250, 1],
>+    "lavenderblush": [255, 240, 245, 1],
>+    "lawngreen": [124, 252, 0, 1],
>+    "lemonchiffon": [255, 250, 205, 1],
>+    "lightblue": [173, 216, 230, 1],
>+    "lightcoral": [240, 128, 128, 1],
>+    "lightcyan": [224, 255, 255, 1],
>+    "lightgoldenrodyellow": [250, 250, 210, 1],
>+    "lightgray": [211, 211, 211, 1],
>+    "lightgreen": [144, 238, 144, 1],
>+    "lightgrey": [211, 211, 211, 1],
>+    "lightpink": [255, 182, 193, 1],
>+    "lightsalmon": [255, 160, 122, 1],
>+    "lightseagreen": [32, 178, 170, 1],
>+    "lightskyblue": [135, 206, 250, 1],
>+    "lightslategray": [119, 136, 153, 1],
>+    "lightslategrey": [119, 136, 153, 1],
>+    "lightsteelblue": [176, 196, 222, 1],
>+    "lightyellow": [255, 255, 224, 1],
>+    "lime": [0, 255, 0, 1],
>+    "limegreen": [50, 205, 50, 1],
>+    "linen": [250, 240, 230, 1],
>+    "magenta": [255, 0, 255, 1],
>+    "maroon": [128, 0, 0, 1],
>+    "mediumaquamarine": [102, 205, 170, 1],
>+    "mediumblue": [0, 0, 205, 1],
>+    "mediumorchid": [186, 85, 211, 1],
>+    "mediumpurple": [147, 112, 219, 1],
>+    "mediumseagreen": [60, 179, 113, 1],
>+    "mediumslateblue": [123, 104, 238, 1],
>+    "mediumspringgreen": [0, 250, 154, 1],
>+    "mediumturquoise": [72, 209, 204, 1],
>+    "mediumvioletred": [199, 21, 133, 1],
>+    "midnightblue": [25, 25, 112, 1],
>+    "mintcream": [245, 255, 250, 1],
>+    "mistyrose": [255, 228, 225, 1],
>+    "moccasin": [255, 228, 181, 1],
>+    "navajowhite": [255, 222, 173, 1],
>+    "navy": [0, 0, 128, 1],
>+    "oldlace": [253, 245, 230, 1],
>+    "olive": [128, 128, 0, 1],
>+    "olivedrab": [107, 142, 35, 1],
>+    "orange": [255, 165, 0, 1],
>+    "orangered": [255, 69, 0, 1],
>+    "orchid": [218, 112, 214, 1],
>+    "palegoldenrod": [238, 232, 170, 1],
>+    "palegreen": [152, 251, 152, 1],
>+    "paleturquoise": [175, 238, 238, 1],
>+    "palevioletred": [219, 112, 147, 1],
>+    "papayawhip": [255, 239, 213, 1],
>+    "peachpuff": [255, 218, 185, 1],
>+    "peru": [205, 133, 63, 1],
>+    "pink": [255, 192, 203, 1],
>+    "plum": [221, 160, 221, 1],
>+    "powderblue": [176, 224, 230, 1],
>+    "purple": [128, 0, 128, 1],
>+    "rebeccapurple": [102, 51, 153, 1],
>+    "red": [255, 0, 0, 1],
>+    "rosybrown": [188, 143, 143, 1],
>+    "royalblue": [65, 105, 225, 1],
>+    "saddlebrown": [139, 69, 19, 1],
>+    "salmon": [250, 128, 114, 1],
>+    "sandybrown": [244, 164, 96, 1],
>+    "seagreen": [46, 139, 87, 1],
>+    "seashell": [255, 245, 238, 1],
>+    "sienna": [160, 82, 45, 1],
>+    "silver": [192, 192, 192, 1],
>+    "skyblue": [135, 206, 235, 1],
>+    "slateblue": [106, 90, 205, 1],
>+    "slategray": [112, 128, 144, 1],
>+    "slategrey": [112, 128, 144, 1],
>+    "snow": [255, 250, 250, 1],
>+    "springgreen": [0, 255, 127, 1],
>+    "steelblue": [70, 130, 180, 1],
>+    "tan": [210, 180, 140, 1],
>+    "teal": [0, 128, 128, 1],
>+    "thistle": [216, 191, 216, 1],
>+    "tomato": [255, 99, 71, 1],
>+    "transparent": [0, 0, 0, 0],
>+    "turquoise": [64, 224, 208, 1],
>+    "violet": [238, 130, 238, 1],
>+    "wheat": [245, 222, 179, 1],
>+    "white": [255, 255, 255, 1],
>+    "whitesmoke": [245, 245, 245, 1],
>+    "yellow": [255, 255, 0, 1],
>+    "yellowgreen": [154, 205, 50, 1],
> };
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 39ae751f113f099026ffcec864e563c353d4a9f5..e2996664a14d7f60c774e7e56c5389af25f5db55 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,14 @@
>+2019-01-26  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: handle CSS Color 4 color syntaxes
>+        https://bugs.webkit.org/show_bug.cgi?id=193166
>+        <rdar://problem/47062403>
>+
>+        Reviewed by Simon Fraser.
>+
>+        * inspector/model/color.html:
>+        * inspector/model/color-expected.txt:
>+
> 2019-01-26  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: provide a way to edit the user agent of a remote target
>diff --git a/LayoutTests/inspector/model/color-expected.txt b/LayoutTests/inspector/model/color-expected.txt
>index 61437ea89a363daa483d4412eef4c11e76b3dbeb..999b8fbba765ef5e159f945c28d3c844f0508a24 100644
>--- a/LayoutTests/inspector/model/color-expected.txt
>+++ b/LayoutTests/inspector/model/color-expected.txt
>@@ -3,66 +3,334 @@ Tests for the WI.Color model object.
> 
> == Running test suite: WI.Color
> -- Running test case: WI.Color.fromString
>-PASS: '#000' should be detected
>-PASS: '#000' was the expected 'Short HEX' format
>-PASS: '#a0A' should be detected
>-PASS: '#a0A' was the expected 'Short HEX' format
>-PASS: '#000000' should be detected
>-PASS: '#000000' was the expected 'HEX' format
>-PASS: '#a0Aa0A' should be detected
>-PASS: '#a0Aa0A' was the expected 'HEX' format
>-PASS: '#0000' should be detected
>-PASS: '#0000' was the expected 'Short HEX with Alpha' format
>-PASS: '#a0Af' should be detected
>-PASS: '#a0Af' was the expected 'Short HEX with Alpha' format
>-PASS: '#00000000' should be detected
>-PASS: '#00000000' was the expected 'HEX with Alpha' format
>-PASS: '#a0Aa0Aff' should be detected
>-PASS: '#a0Aa0Aff' was the expected 'HEX with Alpha' format
>-PASS: 'rgb(1,2,3)' should be detected
>-PASS: 'rgb(1,2,3)' was the expected 'RGB' format
>-PASS: 'RGB(1,2,3)' should be detected
>-PASS: 'RGB(1,2,3)' was the expected 'RGB' format
>-PASS: 'rgb(999, 999, 999)' should be detected
>-PASS: 'rgb(999, 999, 999)' was the expected 'RGB' format
>-PASS: 'rgb( 1 , 1 , 1 )' should be detected
>-PASS: 'rgb( 1 , 1 , 1 )' was the expected 'RGB' format
>-PASS: 'rgba(1,2,3,0)' should be detected
>-PASS: 'rgba(1,2,3,0)' was the expected 'RGBA' format
>-PASS: 'RGBA(1,2,3,0)' should be detected
>-PASS: 'RGBA(1,2,3,0)' was the expected 'RGBA' format
>-PASS: 'rgba(999, 999, 999, 999)' should be detected
>-PASS: 'rgba(999, 999, 999, 999)' was the expected 'RGBA' format
>-PASS: 'rgba( 1 , 1 , 1 , 0.5 )' should be detected
>-PASS: 'rgba( 1 , 1 , 1 , 0.5 )' was the expected 'RGBA' format
>-PASS: 'hsl(0, 0%, 50%)' should be detected
>-PASS: 'hsl(0, 0%, 50%)' was the expected 'HSL' format
>-PASS: 'HSL(0, 0%, 50%)' should be detected
>-PASS: 'HSL(0, 0%, 50%)' was the expected 'HSL' format
>-PASS: 'hsl(999, 999%, 999%)' should be detected
>-PASS: 'hsl(999, 999%, 999%)' was the expected 'HSL' format
>-PASS: 'hsl( 0 , 0% , 50% )' should be detected
>-PASS: 'hsl( 0 , 0% , 50% )' was the expected 'HSL' format
>-PASS: 'hsla(0, 0%, 50%, 0)' should be detected
>-PASS: 'hsla(0, 0%, 50%, 0)' was the expected 'HSLA' format
>-PASS: 'HSLA(0, 0%, 50%, 0)' should be detected
>-PASS: 'HSLA(0, 0%, 50%, 0)' was the expected 'HSLA' format
>-PASS: 'hsla(999, 999%, 999%, 999)' should be detected
>-PASS: 'hsla(999, 999%, 999%, 999)' was the expected 'HSLA' format
>-PASS: 'hsla( 0 , 0% , 50% , 0.5 )' should be detected
>-PASS: 'hsla( 0 , 0% , 50% , 0.5 )' was the expected 'HSLA' format
>-PASS: 'blue' should be detected
>-PASS: 'blue' was the expected 'Keyword' format
>-PASS: 'BLuE' should be detected
>-PASS: 'BLuE' was the expected 'Keyword' format
>-PASS: 'midnightblue' should be detected
>-PASS: 'midnightblue' was the expected 'Keyword' format
>-PASS: 'royalblue' should be detected
>-PASS: 'royalblue' was the expected 'Keyword' format
>-PASS: 'steelblue' should be detected
>-PASS: 'steelblue' was the expected 'Keyword' format
>-PASS: 'transparent' should be detected
>-PASS: 'transparent' was the expected 'Keyword' format
>+"#000" resolves to "#000"
>+"#a0A" resolves to "#a0a"
>+"#000000" resolves to "#000000"
>+"#a0Aa0A" resolves to "#a0aa0a"
>+"#0000" resolves to "#0000"
>+"#a0Af" resolves to "#a0af"
>+"#00000000" resolves to "#00000000"
>+"#a0Aa0Aff" resolves to "#a0aa0aff"
>+"rgb(10,20,30)" resolves to "rgb(10, 20, 30)"
>+"RGB(10,20,30)" resolves to "rgb(10, 20, 30)"
>+"rgb( 10 , 20 , 30 )" resolves to "rgb(10, 20, 30)"
>+"rgb(999, 999, 999)" resolves to "rgb(255, 255, 255)"
>+"rgb(10 20 30)" resolves to "rgb(10, 20, 30)"
>+"RGB(10 20 30)" resolves to "rgb(10, 20, 30)"
>+"rgb( 10 20 30 )" resolves to "rgb(10, 20, 30)"
>+"rgb(999 999 999)" resolves to "rgb(255, 255, 255)"
>+"rgb(10,20,30,40)" resolves to "rgba(10, 20, 30, 1)"
>+"RGB(10,20,30,40)" resolves to "rgba(10, 20, 30, 1)"
>+"rgb( 10 , 20 , 30 , 40 )" resolves to "rgba(10, 20, 30, 1)"
>+"rgb(999, 999, 999, 999)" resolves to "rgba(255, 255, 255, 1)"
>+"rgb(10,20,30,40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"RGB(10,20,30,40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgb( 10 , 20 , 30 , 40% )" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgb(999, 999, 999, 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgb(10 20 30 / 40)" resolves to "rgba(10, 20, 30, 1)"
>+"RGB(10 20 30 / 40)" resolves to "rgba(10, 20, 30, 1)"
>+"rgb( 10  20  30 / 40 )" resolves to "rgba(10, 20, 30, 1)"
>+"rgb(999 999 999 / 999)" resolves to "rgba(255, 255, 255, 1)"
>+"rgb(10 20 30 / 40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"RGB(10 20 30 / 40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgb( 10  20  30 / 40% )" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgb(999 999 999 / 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10,20,30,40)" resolves to "rgba(10, 20, 30, 1)"
>+"RGBA(10,20,30,40)" resolves to "rgba(10, 20, 30, 1)"
>+"rgba( 10 , 20 , 30 , 40 )" resolves to "rgba(10, 20, 30, 1)"
>+"rgba(999, 999, 999, 999)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10,20,30,40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"RGBA(10,20,30,40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgba( 10 , 20 , 30 , 40% )" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgba(999, 999, 999, 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10 20 30 / 40)" resolves to "rgba(10, 20, 30, 1)"
>+"RGBA(10 20 30 / 40)" resolves to "rgba(10, 20, 30, 1)"
>+"rgba( 10  20  30 / 40 )" resolves to "rgba(10, 20, 30, 1)"
>+"rgba(999 999 999 / 999)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10 20 30 / 40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"RGBA(10 20 30 / 40%)" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgba( 10  20  30 / 40% )" resolves to "rgba(10, 20, 30, 0.4)"
>+"rgba(999 999 999 / 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgb(10%,20%,30%)" resolves to "rgb(26, 51, 77)"
>+"RGB(10%,20%,30%)" resolves to "rgb(26, 51, 77)"
>+"rgb( 10% , 20% , 30% )" resolves to "rgb(26, 51, 77)"
>+"rgb(999%, 999%, 999%)" resolves to "rgb(255, 255, 255)"
>+"rgb(10% 20% 30%)" resolves to "rgb(26, 51, 77)"
>+"RGB(10% 20% 30%)" resolves to "rgb(26, 51, 77)"
>+"rgb( 10%  20%  30% )" resolves to "rgb(26, 51, 77)"
>+"rgb(999% 999% 999%)" resolves to "rgb(255, 255, 255)"
>+"rgb(10%,20%,30%,40)" resolves to "rgba(26, 51, 77, 1)"
>+"RGB(10%,20%,30%,40)" resolves to "rgba(26, 51, 77, 1)"
>+"rgb( 10% , 20% , 30% , 40 )" resolves to "rgba(26, 51, 77, 1)"
>+"rgb(999%, 999%, 999%, 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgb(10%,20%,30%,40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"RGB(10%,20%,30%,40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgb( 10% , 20% , 30% , 40% )" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgb(999%, 999%, 999%, 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgb(10% 20% 30% / 40)" resolves to "rgba(26, 51, 77, 1)"
>+"RGB(10% 20% 30% / 40)" resolves to "rgba(26, 51, 77, 1)"
>+"rgb( 10%  20%  30% / 40 )" resolves to "rgba(26, 51, 77, 1)"
>+"rgb(999% 999% 999% / 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgb(10% 20% 30% / 40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"RGB(10% 20% 30% / 40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgb( 10%  20%  30% / 40% )" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgb(999% 999% 999% / 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10%,20%,30%,40)" resolves to "rgba(26, 51, 77, 1)"
>+"RGBA(10%,20%,30%,40)" resolves to "rgba(26, 51, 77, 1)"
>+"rgba( 10% , 20% , 30% , 40 )" resolves to "rgba(26, 51, 77, 1)"
>+"rgba(999%, 999%, 999%, 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10%,20%,30%,40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"RGBA(10%,20%,30%,40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgba( 10% , 20% , 30% , 40% )" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgba(999%, 999%, 999%, 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10% 20% 30% / 40)" resolves to "rgba(26, 51, 77, 1)"
>+"RGBA(10% 20% 30% / 40)" resolves to "rgba(26, 51, 77, 1)"
>+"rgba( 10%  20%  30% / 40 )" resolves to "rgba(26, 51, 77, 1)"
>+"rgba(999% 999% 999% / 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"rgba(10% 20% 30% / 40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"RGBA(10% 20% 30% / 40%)" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgba( 10%  20%  30% / 40% )" resolves to "rgba(26, 51, 77, 0.4)"
>+"rgba(999% 999% 999% / 999%)" resolves to "rgba(255, 255, 255, 1)"
>+"hsl(10,20%,30%)" resolves to "hsl(10, 20%, 30%)"
>+"HSL(10,20%,30%)" resolves to "hsl(10, 20%, 30%)"
>+"hsl( 10 , 20% , 30% )" resolves to "hsl(10, 20%, 30%)"
>+"hsl(999, 999%, 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10 20% 30%)" resolves to "hsl(10, 20%, 30%)"
>+"HSL(10 20% 30%)" resolves to "hsl(10, 20%, 30%)"
>+"hsl( 10  20%  30% )" resolves to "hsl(10, 20%, 30%)"
>+"hsl(999 999% 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSL(10,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl( 10 , 20% , 30% , 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl(999, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSL(10,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl( 10 , 20% , 30% , 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl(999, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSL(10 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl( 10  20%  30% / 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl(999 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSL(10 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl( 10  20%  30% / 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl(999 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSL(10,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl( 10 , 20% , 30% , 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl(999, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSL(10,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl( 10 , 20% , 30% , 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl(999, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSLA(10,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsla( 10 , 0% , 50% , 40 )" resolves to "hsla(10, 0%, 50%, 1)"
>+"hsla(999, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSLA(10,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla( 10 , 20% , 30% , 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla(999, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSLA(10 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsla( 10  20%  30% / 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsla(999 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSLA(10 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla( 10  20%  30% / 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla(999 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10deg,20%,30%)" resolves to "hsl(10, 20%, 30%)"
>+"HSL(10deg,20%,30%)" resolves to "hsl(10, 20%, 30%)"
>+"hsl( 10deg , 20% , 30% )" resolves to "hsl(10, 20%, 30%)"
>+"hsl(999deg, 999%, 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10deg 20% 30%)" resolves to "hsl(10, 20%, 30%)"
>+"HSL(10deg 20% 30%)" resolves to "hsl(10, 20%, 30%)"
>+"hsl( 10deg  20%  30% )" resolves to "hsl(10, 20%, 30%)"
>+"hsl(999deg 999% 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10deg,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSL(10deg,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl( 10deg , 20% , 30% , 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl(999deg, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10deg,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSL(10deg,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl( 10deg , 20% , 30% , 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl(999deg, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10deg 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSL(10deg 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl( 10deg  20%  30% / 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl(999deg 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10deg 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSL(10deg 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl( 10deg  20%  30% / 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl(999deg 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10deg,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSL(10deg,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl( 10deg , 20% , 30% , 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsl(999deg, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10deg,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSL(10deg,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl( 10deg , 20% , 30% , 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsl(999deg, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10deg,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSLA(10deg,20%,30%,40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsla( 10deg , 0% , 50% , 40 )" resolves to "hsla(10, 0%, 50%, 1)"
>+"hsla(999deg, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10deg,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSLA(10deg,20%,30%,40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla( 10deg , 20% , 30% , 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla(999deg, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10deg 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"HSLA(10deg 20% 30% / 40)" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsla( 10deg  20%  30% / 40 )" resolves to "hsla(10, 20%, 30%, 1)"
>+"hsla(999deg 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10deg 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"HSLA(10deg 20% 30% / 40%)" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla( 10deg  20%  30% / 40% )" resolves to "hsla(10, 20%, 30%, 0.4)"
>+"hsla(999deg 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10rad,20%,30%)" resolves to "hsl(360, 20%, 30%)"
>+"HSL(10rad,20%,30%)" resolves to "hsl(360, 20%, 30%)"
>+"hsl( 10rad , 20% , 30% )" resolves to "hsl(360, 20%, 30%)"
>+"hsl(999rad, 999%, 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10rad 20% 30%)" resolves to "hsl(360, 20%, 30%)"
>+"HSL(10rad 20% 30%)" resolves to "hsl(360, 20%, 30%)"
>+"hsl( 10rad  20%  30% )" resolves to "hsl(360, 20%, 30%)"
>+"hsl(999rad 999% 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10rad,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSL(10rad,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl( 10rad , 20% , 30% , 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl(999rad, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10rad,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSL(10rad,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl( 10rad , 20% , 30% , 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl(999rad, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10rad 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSL(10rad 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl( 10rad  20%  30% / 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl(999rad 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10rad 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSL(10rad 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl( 10rad  20%  30% / 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl(999rad 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10rad,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSL(10rad,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl( 10rad , 20% , 30% , 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl(999rad, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10rad,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSL(10rad,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl( 10rad , 20% , 30% , 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl(999rad, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10rad,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSLA(10rad,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsla( 10rad , 0% , 50% , 40 )" resolves to "hsla(360, 0%, 50%, 1)"
>+"hsla(999rad, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10rad,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSLA(10rad,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla( 10rad , 20% , 30% , 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla(999rad, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10rad 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSLA(10rad 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsla( 10rad  20%  30% / 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsla(999rad 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10rad 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSLA(10rad 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla( 10rad  20%  30% / 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla(999rad 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10grad,20%,30%)" resolves to "hsl(9, 20%, 30%)"
>+"HSL(10grad,20%,30%)" resolves to "hsl(9, 20%, 30%)"
>+"hsl( 10grad , 20% , 30% )" resolves to "hsl(9, 20%, 30%)"
>+"hsl(999grad, 999%, 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10grad 20% 30%)" resolves to "hsl(9, 20%, 30%)"
>+"HSL(10grad 20% 30%)" resolves to "hsl(9, 20%, 30%)"
>+"hsl( 10grad  20%  30% )" resolves to "hsl(9, 20%, 30%)"
>+"hsl(999grad 999% 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10grad,20%,30%,40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"HSL(10grad,20%,30%,40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsl( 10grad , 20% , 30% , 40 )" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsl(999grad, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10grad,20%,30%,40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"HSL(10grad,20%,30%,40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsl( 10grad , 20% , 30% , 40% )" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsl(999grad, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10grad 20% 30% / 40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"HSL(10grad 20% 30% / 40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsl( 10grad  20%  30% / 40 )" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsl(999grad 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10grad 20% 30% / 40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"HSL(10grad 20% 30% / 40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsl( 10grad  20%  30% / 40% )" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsl(999grad 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10grad,20%,30%,40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"HSL(10grad,20%,30%,40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsl( 10grad , 20% , 30% , 40 )" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsl(999grad, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10grad,20%,30%,40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"HSL(10grad,20%,30%,40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsl( 10grad , 20% , 30% , 40% )" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsl(999grad, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10grad,20%,30%,40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"HSLA(10grad,20%,30%,40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsla( 10grad , 0% , 50% , 40 )" resolves to "hsla(9, 0%, 50%, 1)"
>+"hsla(999grad, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10grad,20%,30%,40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"HSLA(10grad,20%,30%,40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsla( 10grad , 20% , 30% , 40% )" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsla(999grad, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10grad 20% 30% / 40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"HSLA(10grad 20% 30% / 40)" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsla( 10grad  20%  30% / 40 )" resolves to "hsla(9, 20%, 30%, 1)"
>+"hsla(999grad 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10grad 20% 30% / 40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"HSLA(10grad 20% 30% / 40%)" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsla( 10grad  20%  30% / 40% )" resolves to "hsla(9, 20%, 30%, 0.4)"
>+"hsla(999grad 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10turn,20%,30%)" resolves to "hsl(360, 20%, 30%)"
>+"HSL(10turn,20%,30%)" resolves to "hsl(360, 20%, 30%)"
>+"hsl( 10turn , 20% , 30% )" resolves to "hsl(360, 20%, 30%)"
>+"hsl(999turn, 999%, 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10turn 20% 30%)" resolves to "hsl(360, 20%, 30%)"
>+"HSL(10turn 20% 30%)" resolves to "hsl(360, 20%, 30%)"
>+"hsl( 10turn  20%  30% )" resolves to "hsl(360, 20%, 30%)"
>+"hsl(999turn 999% 999%)" resolves to "hsl(360, 100%, 100%)"
>+"hsl(10turn,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSL(10turn,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl( 10turn , 20% , 30% , 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl(999turn, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10turn,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSL(10turn,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl( 10turn , 20% , 30% , 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl(999turn, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10turn 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSL(10turn 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl( 10turn  20%  30% / 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl(999turn 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10turn 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSL(10turn 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl( 10turn  20%  30% / 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl(999turn 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10turn,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSL(10turn,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl( 10turn , 20% , 30% , 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsl(999turn, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsl(10turn,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSL(10turn,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl( 10turn , 20% , 30% , 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsl(999turn, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10turn,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSLA(10turn,20%,30%,40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsla( 10turn , 0% , 50% , 40 )" resolves to "hsla(360, 0%, 50%, 1)"
>+"hsla(999turn, 999%, 999%, 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10turn,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSLA(10turn,20%,30%,40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla( 10turn , 20% , 30% , 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla(999turn, 999%, 999%, 999%)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10turn 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"HSLA(10turn 20% 30% / 40)" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsla( 10turn  20%  30% / 40 )" resolves to "hsla(360, 20%, 30%, 1)"
>+"hsla(999turn 999% 999% / 999)" resolves to "hsla(360, 100%, 100%, 1)"
>+"hsla(10turn 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"HSLA(10turn 20% 30% / 40%)" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla( 10turn  20%  30% / 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
>+"hsla(999turn 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
> 
> PASS: ' #000 ' should not be detected
> PASS: '#rgb' should not be detected
>@@ -71,9 +339,9 @@ PASS: '#12' should not be detected
> PASS: '#12345' should not be detected
> PASS: '#1234567' should not be detected
> PASS: '#123456789' should not be detected
>-PASS: 'rgb(255, 255, 255, 0.5)' should not be detected
>+PASS: 'rgb(255, 255, 255, 0.5, 1)' should not be detected
> PASS: 'rgba(255, 255, 255, 0.5, 1)' should not be detected
>-PASS: 'hsl(0, 0%, 50%, 1)' should not be detected
>+PASS: 'hsl(0, 0%, 50%, 1, 2)' should not be detected
> PASS: 'hsla(0, 0%, 50%, 1, 2)' should not be detected
> PASS: 'superblue' should not be detected
> 
>diff --git a/LayoutTests/inspector/model/color.html b/LayoutTests/inspector/model/color.html
>index 3bafefa864bfb271d4be547a3a75a6f331315842..6b29d20ac24ff339257aeaa293a9e760c0c8e60c 100644
>--- a/LayoutTests/inspector/model/color.html
>+++ b/LayoutTests/inspector/model/color.html
>@@ -40,14 +40,16 @@ function test()
>         test() {
>             function testGood(string, expectedFormat) {
>                 let color = WI.Color.fromString(string);
>-                InspectorTest.expectThat(color instanceof WI.Color, `'${string}' should be detected`);
>-                InspectorTest.expectThat(color && color.format === expectedFormat, `'${string}' was the expected '${formatToString(expectedFormat)}' format`);
>+                InspectorTest.assert(color instanceof WI.Color, `'${string}' should be detected`);
>+                InspectorTest.assert(color.format === expectedFormat, `'${string}' was the expected '${formatToString(expectedFormat)}' format`);
>+                InspectorTest.log(`"${string}" resolves to "${color.toString()}"`);
>             }
> 
>             function testBad(string) {
>                 let color = WI.Color.fromString(string);
>-                InspectorTest.expectThat(color === null, `'${string}' should not be detected`);
>-                if (color) InspectorTest.log(`'${string}' detected with format '${formatToString(color.format)}'`);
>+                InspectorTest.expectNull(color, `'${string}' should not be detected`);
>+                if (color)
>+                    InspectorTest.log(`'${string}' detected with format '${formatToString(color.format)}'`);
>             }
> 
>             testGood("#000", WI.Color.Format.ShortHEX);
>@@ -60,32 +62,167 @@ function test()
>             testGood("#00000000", WI.Color.Format.HEXAlpha);
>             testGood("#a0Aa0Aff", WI.Color.Format.HEXAlpha);
> 
>-            testGood("rgb(1,2,3)", WI.Color.Format.RGB);
>-            testGood("RGB(1,2,3)", WI.Color.Format.RGB);
>+            testGood("rgb(10,20,30)", WI.Color.Format.RGB);
>+            testGood("RGB(10,20,30)", WI.Color.Format.RGB);
>+            testGood("rgb( 10 , 20 , 30 )", WI.Color.Format.RGB);
>             testGood("rgb(999, 999, 999)", WI.Color.Format.RGB);
>-            testGood("rgb( 1 , 1 , 1 )", WI.Color.Format.RGB);
> 
>-            testGood("rgba(1,2,3,0)", WI.Color.Format.RGBA);
>-            testGood("RGBA(1,2,3,0)", WI.Color.Format.RGBA);
>+            testGood("rgb(10 20 30)", WI.Color.Format.RGB);
>+            testGood("RGB(10 20 30)", WI.Color.Format.RGB);
>+            testGood("rgb( 10 20 30 )", WI.Color.Format.RGB);
>+            testGood("rgb(999 999 999)", WI.Color.Format.RGB);
>+
>+            testGood("rgb(10,20,30,40)", WI.Color.Format.RGBA);
>+            testGood("RGB(10,20,30,40)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10 , 20 , 30 , 40 )", WI.Color.Format.RGBA);
>+            testGood("rgb(999, 999, 999, 999)", WI.Color.Format.RGBA);
>+
>+            testGood("rgb(10,20,30,40%)", WI.Color.Format.RGBA);
>+            testGood("RGB(10,20,30,40%)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10 , 20 , 30 , 40% )", WI.Color.Format.RGBA);
>+            testGood("rgb(999, 999, 999, 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgb(10 20 30 / 40)", WI.Color.Format.RGBA);
>+            testGood("RGB(10 20 30 / 40)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10  20  30 / 40 )", WI.Color.Format.RGBA);
>+            testGood("rgb(999 999 999 / 999)", WI.Color.Format.RGBA);
>+
>+            testGood("rgb(10 20 30 / 40%)", WI.Color.Format.RGBA);
>+            testGood("RGB(10 20 30 / 40%)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10  20  30 / 40% )", WI.Color.Format.RGBA);
>+            testGood("rgb(999 999 999 / 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgba(10,20,30,40)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10,20,30,40)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10 , 20 , 30 , 40 )", WI.Color.Format.RGBA);
>             testGood("rgba(999, 999, 999, 999)", WI.Color.Format.RGBA);
>-            testGood("rgba( 1 , 1 , 1 , 0.5 )", WI.Color.Format.RGBA);
> 
>-            testGood("hsl(0, 0%, 50%)", WI.Color.Format.HSL);
>-            testGood("HSL(0, 0%, 50%)", WI.Color.Format.HSL);
>-            testGood("hsl(999, 999%, 999%)", WI.Color.Format.HSL);
>-            testGood("hsl( 0 , 0% , 50% )", WI.Color.Format.HSL);
>-            
>-            testGood("hsla(0, 0%, 50%, 0)", WI.Color.Format.HSLA);
>-            testGood("HSLA(0, 0%, 50%, 0)", WI.Color.Format.HSLA);
>-            testGood("hsla(999, 999%, 999%, 999)", WI.Color.Format.HSLA);
>-            testGood("hsla( 0 , 0% , 50% , 0.5 )", WI.Color.Format.HSLA);
>+            testGood("rgba(10,20,30,40%)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10,20,30,40%)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10 , 20 , 30 , 40% )", WI.Color.Format.RGBA);
>+            testGood("rgba(999, 999, 999, 999%)", WI.Color.Format.RGBA);
> 
>-            testGood("blue", WI.Color.Format.Keyword);
>-            testGood("BLuE", WI.Color.Format.Keyword);
>-            testGood("midnightblue", WI.Color.Format.Keyword);
>-            testGood("royalblue", WI.Color.Format.Keyword);
>-            testGood("steelblue", WI.Color.Format.Keyword);
>-            testGood("transparent", WI.Color.Format.Keyword);
>+            testGood("rgba(10 20 30 / 40)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10 20 30 / 40)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10  20  30 / 40 )", WI.Color.Format.RGBA);
>+            testGood("rgba(999 999 999 / 999)", WI.Color.Format.RGBA);
>+
>+            testGood("rgba(10 20 30 / 40%)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10 20 30 / 40%)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10  20  30 / 40% )", WI.Color.Format.RGBA);
>+            testGood("rgba(999 999 999 / 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgb(10%,20%,30%)", WI.Color.Format.RGB);
>+            testGood("RGB(10%,20%,30%)", WI.Color.Format.RGB);
>+            testGood("rgb( 10% , 20% , 30% )", WI.Color.Format.RGB);
>+            testGood("rgb(999%, 999%, 999%)", WI.Color.Format.RGB);
>+
>+            testGood("rgb(10% 20% 30%)", WI.Color.Format.RGB);
>+            testGood("RGB(10% 20% 30%)", WI.Color.Format.RGB);
>+            testGood("rgb( 10%  20%  30% )", WI.Color.Format.RGB);
>+            testGood("rgb(999% 999% 999%)", WI.Color.Format.RGB);
>+
>+            testGood("rgb(10%,20%,30%,40)", WI.Color.Format.RGBA);
>+            testGood("RGB(10%,20%,30%,40)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10% , 20% , 30% , 40 )", WI.Color.Format.RGBA);
>+            testGood("rgb(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgb(10%,20%,30%,40%)", WI.Color.Format.RGBA);
>+            testGood("RGB(10%,20%,30%,40%)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10% , 20% , 30% , 40% )", WI.Color.Format.RGBA);
>+            testGood("rgb(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgb(10% 20% 30% / 40)", WI.Color.Format.RGBA);
>+            testGood("RGB(10% 20% 30% / 40)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10%  20%  30% / 40 )", WI.Color.Format.RGBA);
>+            testGood("rgb(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgb(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
>+            testGood("RGB(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
>+            testGood("rgb( 10%  20%  30% / 40% )", WI.Color.Format.RGBA);
>+            testGood("rgb(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgba(10%,20%,30%,40)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10%,20%,30%,40)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10% , 20% , 30% , 40 )", WI.Color.Format.RGBA);
>+            testGood("rgba(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgba(10%,20%,30%,40%)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10%,20%,30%,40%)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10% , 20% , 30% , 40% )", WI.Color.Format.RGBA);
>+            testGood("rgba(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgba(10% 20% 30% / 40)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10% 20% 30% / 40)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10%  20%  30% / 40 )", WI.Color.Format.RGBA);
>+            testGood("rgba(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
>+
>+            testGood("rgba(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
>+            testGood("RGBA(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
>+            testGood("rgba( 10%  20%  30% / 40% )", WI.Color.Format.RGBA);
>+            testGood("rgba(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
>+
>+            for (let unit of ["", "deg", "rad", "grad", "turn"]) {
>+                testGood(`hsl(10${unit},20%,30%)`, WI.Color.Format.HSL);
>+                testGood(`HSL(10${unit},20%,30%)`, WI.Color.Format.HSL);
>+                testGood(`hsl( 10${unit} , 20% , 30% )`, WI.Color.Format.HSL);
>+                testGood(`hsl(999${unit}, 999%, 999%)`, WI.Color.Format.HSL);
>+
>+                testGood(`hsl(10${unit} 20% 30%)`, WI.Color.Format.HSL);
>+                testGood(`HSL(10${unit} 20% 30%)`, WI.Color.Format.HSL);
>+                testGood(`hsl( 10${unit}  20%  30% )`, WI.Color.Format.HSL);
>+                testGood(`hsl(999${unit} 999% 999%)`, WI.Color.Format.HSL);
>+
>+                testGood(`hsl(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
>+                testGood(`HSL(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
>+                testGood(`hsl( 10${unit} , 20% , 30% , 40 )`, WI.Color.Format.HSLA);
>+                testGood(`hsl(999${unit}, 999%, 999%, 999)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsl(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
>+                testGood(`HSL(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
>+                testGood(`hsl( 10${unit} , 20% , 30% , 40% )`, WI.Color.Format.HSLA);
>+                testGood(`hsl(999${unit}, 999%, 999%, 999%)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsl(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
>+                testGood(`HSL(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
>+                testGood(`hsl( 10${unit}  20%  30% / 40 )`, WI.Color.Format.HSLA);
>+                testGood(`hsl(999${unit} 999% 999% / 999)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsl(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
>+                testGood(`HSL(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
>+                testGood(`hsl( 10${unit}  20%  30% / 40% )`, WI.Color.Format.HSLA);
>+                testGood(`hsl(999${unit} 999% 999% / 999%)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsl(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
>+                testGood(`HSL(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
>+                testGood(`hsl( 10${unit} , 20% , 30% , 40 )`, WI.Color.Format.HSLA);
>+                testGood(`hsl(999${unit}, 999%, 999%, 999)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsl(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
>+                testGood(`HSL(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
>+                testGood(`hsl( 10${unit} , 20% , 30% , 40% )`, WI.Color.Format.HSLA);
>+                testGood(`hsl(999${unit}, 999%, 999%, 999%)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsla(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
>+                testGood(`HSLA(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
>+                testGood(`hsla( 10${unit} , 0% , 50% , 40 )`, WI.Color.Format.HSLA);
>+                testGood(`hsla(999${unit}, 999%, 999%, 999)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsla(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
>+                testGood(`HSLA(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
>+                testGood(`hsla( 10${unit} , 20% , 30% , 40% )`, WI.Color.Format.HSLA);
>+                testGood(`hsla(999${unit}, 999%, 999%, 999%)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsla(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
>+                testGood(`HSLA(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
>+                testGood(`hsla( 10${unit}  20%  30% / 40 )`, WI.Color.Format.HSLA);
>+                testGood(`hsla(999${unit} 999% 999% / 999)`, WI.Color.Format.HSLA);
>+
>+                testGood(`hsla(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
>+                testGood(`HSLA(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
>+                testGood(`hsla( 10${unit}  20%  30% / 40% )`, WI.Color.Format.HSLA);
>+                testGood(`hsla(999${unit} 999% 999% / 999%)`, WI.Color.Format.HSLA);
>+            }
> 
>             InspectorTest.log("");
> 
>@@ -96,9 +233,9 @@ function test()
>             testBad("#12345"); // 5
>             testBad("#1234567"); // 7
>             testBad("#123456789"); // 9
>-            testBad("rgb(255, 255, 255, 0.5)"); // extra values
>+            testBad("rgb(255, 255, 255, 0.5, 1)"); // extra values
>             testBad("rgba(255, 255, 255, 0.5, 1)"); // extra values
>-            testBad("hsl(0, 0%, 50%, 1)"); // extra value
>+            testBad("hsl(0, 0%, 50%, 1, 2)"); // extra value
>             testBad("hsla(0, 0%, 50%, 1, 2)"); // extra values
>             testBad("superblue"); // not a keyword
>

Actions: View | Formatted Diff | Diff

Attachments on bug 193166: 358761 | 358767 | 360252