Changeset 96543 in webkit

Timestamp:

Oct 3, 2011 2:50:04 PM (13 years ago)

Author:

Joseph Pecoraro

Message:

<​http://webkit.org/b/69152> Web Inspector: rgb() with percentages shows wrong hex/hsl values

Reviewed by Pavel Feldman.

Source/WebCore:

Previously we assumed rgb values were always in byte form,
but they could include percentage values. Ex. rgb(100%,0,0).
This patch fixes this, and in the process includes clamping
for invalid percentages, byte values, and alpha values.

Test: inspector/styles/styles-invalid-color-values.html

• inspector/front-end/Color.js:

(WebInspector.Color.prototype._clamp):
(WebInspector.Color.prototype._individualRGBValueToFloatValue):
(WebInspector.Color.prototype._individualRGBValueToHexValue):
(WebInspector.Color.prototype._rgbToHex):
(WebInspector.Color.prototype._rgbToHSL):
An individual rgb value can be either a decimal/float or a
percentage. Rewrite the conversion functions to handle either
input. Regardless of the type of input, always return a clamped
decimal/float value between 0 and 255.

(WebInspector.Color.prototype._rgbaToHSLA):
(WebInspector.Color.prototype._hslaToRGBA):
(WebInspector.Color.prototype._parse):
Clamp the alpha value between 0 and 1.

LayoutTests:

This test outputs all of the supported color format representations
for supplied CSS color values. We expect some of the CSS values
to be clamped, e.g. rgb(300,0,0) to rgb(255,0,0). This also tests
that rgb percentages, such as rgb(100%,0,0), work correctly.

• inspector/styles/styles-invalid-color-values-expected.txt: Added.
• inspector/styles/styles-invalid-color-values.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/styles/styles-invalid-color-values-expected.txt (added)
• LayoutTests/inspector/styles/styles-invalid-color-values.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/inspector/front-end/Color.js (modified) (6 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2011-10-03  Joseph Pecoraro  <joepeck@webkit.org>
+
+        Web Inspector: rgb() with percentages shows wrong hex/hsl values
+        https://bugs.webkit.org/show_bug.cgi?id=69152
+
+        Reviewed by Pavel Feldman.
+
+        This test outputs all of the supported color format representations
+        for supplied CSS color values. We expect some of the CSS values
+        to be clamped, e.g. rgb(300,0,0) to rgb(255,0,0). This also tests
+        that rgb percentages, such as rgb(100%,0,0), work correctly.
+
+        * inspector/styles/styles-invalid-color-values-expected.txt: Added.
+        * inspector/styles/styles-invalid-color-values.html: Added.
+
 2011-10-03  Adam Barth  <abarth@webkit.org>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2011-10-03  Joseph Pecoraro  <joepeck@webkit.org>
+
+        Web Inspector: rgb() with percentages shows wrong hex/hsl values
+        https://bugs.webkit.org/show_bug.cgi?id=69152
+
+        Reviewed by Pavel Feldman.
+
+        Previously we assumed rgb values were always in byte form,
+        but they could include percentage values. Ex. rgb(100%,0,0).
+        This patch fixes this, and in the process includes clamping
+        for invalid percentages, byte values, and alpha values.
+
+        Test: inspector/styles/styles-invalid-color-values.html
+
+        * inspector/front-end/Color.js:
+        (WebInspector.Color.prototype._clamp):
+        (WebInspector.Color.prototype._individualRGBValueToFloatValue):
+        (WebInspector.Color.prototype._individualRGBValueToHexValue):
+        (WebInspector.Color.prototype._rgbToHex):
+        (WebInspector.Color.prototype._rgbToHSL):
+        An individual rgb value can be either a decimal/float or a
+        percentage. Rewrite the conversion functions to handle either
+        input. Regardless of the type of input, always return a clamped
+        decimal/float value between 0 and 255.
+
+        (WebInspector.Color.prototype._rgbaToHSLA):
+        (WebInspector.Color.prototype._hslaToRGBA):
+        (WebInspector.Color.prototype._parse):
+        Clamp the alpha value between 0 and 1.
+
 2011-10-03  Dirk Schulze  <krit@webkit.org>
 

trunk/Source/WebCore/inspector/front-end/Color.js

@@ -187 +187 @@
     },
 
+    _clamp: function(value, min, max)
+    {
+        if (value < min)
+            return min;
+        if (value > max)
+            return max;
+        return value;
+    },
+
+    _individualRGBValueToFloatValue: function(rgbValue)
+    {
+        if (typeof rgbValue === "number")
+            return this._clamp(rgbValue, 0, 255);
+
+        if (rgbValue.indexOf("%") === -1) {
+            var intValue = parseInt(rgbValue);
+            return this._clamp(rgbValue, 0, 255);
+        }
+
+        var percentValue = parseFloat(rgbValue);
+        return this._clamp(percentValue, 0, 100) * 2.55;
+    },
+
+    _individualRGBValueToHexValue: function(rgbValue)
+    {
+        var floatValue = this._individualRGBValueToFloatValue(rgbValue);
+        var hex = Math.round(floatValue).toString(16);
+        if (hex.length === 1)
+            hex = "0" + hex;
+        return hex;
+    },
+
     _rgbToHex: function(rgb)
     {
-        var r = parseInt(rgb[0]).toString(16);
-        var g = parseInt(rgb[1]).toString(16);
-        var b = parseInt(rgb[2]).toString(16);
-        if (r.length === 1)
-            r = "0" + r;
-        if (g.length === 1)
-            g = "0" + g;
-        if (b.length === 1)
-            b = "0" + b;
-
+        var r = this._individualRGBValueToHexValue(rgb[0]);
+        var g = this._individualRGBValueToHexValue(rgb[1]);
+        var b = this._individualRGBValueToHexValue(rgb[2]);
         return (r + g + b).toUpperCase();
     },
@@ -213 +238 @@
     _rgbToHSL: function(rgb)
     {
-        var r = parseInt(rgb[0]) / 255;
-        var g = parseInt(rgb[1]) / 255;
-        var b = parseInt(rgb[2]) / 255;
+        var r = this._individualRGBValueToFloatValue(rgb[0]) / 255;
+        var g = this._individualRGBValueToFloatValue(rgb[1]) / 255;
+        var b = this._individualRGBValueToFloatValue(rgb[2]) / 255;
         var max = Math.max(r, g, b);
         var min = Math.min(r, g, b);
@@ -253 +278 @@
         var s = parseFloat(hsl[1]) / 100;
         var l = parseFloat(hsl[2]) / 100;
+
+        if (s < 0)
+            s = 0;
 
         if (l <= 0.5)
@@ -287 +315 @@
     },
 
-    _rgbaToHSLA: function(rgba)
-    {
-        var alpha = rgba[3];
+    _rgbaToHSLA: function(rgba, alpha)
+    {
         var hsl = this._rgbToHSL(rgba)
         hsl.push(alpha);
@@ -295 +322 @@
     },
 
-    _hslaToRGBA: function(hsla)
-    {
-        var alpha = hsla[3];
+    _hslaToRGBA: function(hsla, alpha)
+    {
         var rgb = this._hslToRGB(hsla);
         rgb.push(alpha);
@@ -373 +399 @@
                 this.format = "rgba";
                 this.rgba = match[1].split(/\s*,\s*/);
-                this.hsla = this._rgbaToHSLA(this.rgba);
-                this.alpha = this.rgba[3];
+                this.rgba[3] = this.alpha = this._clamp(this.rgba[3], 0, 1);
+                this.hsla = this._rgbaToHSLA(this.rgba, this.alpha);
             } else if (match[2]) { // hsla
                 this.format = "hsla";
                 this.hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
-                this.rgba = this._hslaToRGBA(this.hsla);
-                this.alpha = this.hsla[3];
+                this.hsla[3] = this.alpha = this._clamp(this.hsla[3], 0, 1);
+                this.rgba = this._hslaToRGBA(this.hsla, this.alpha);
             }