- Revision
- 96543
- Author
- [email protected]
- Date
- 2011-10-03 14:50:04 -0700 (Mon, 03 Oct 2011)
Log 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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (96542 => 96543)
--- trunk/LayoutTests/ChangeLog 2011-10-03 21:45:40 UTC (rev 96542)
+++ trunk/LayoutTests/ChangeLog 2011-10-03 21:50:04 UTC (rev 96543)
@@ -1,3 +1,18 @@
+2011-10-03 Joseph Pecoraro <[email protected]>
+
+ 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 <[email protected]>
Update chromium-cg-mac results after http://trac.webkit.org/changeset/96530.
Added: trunk/LayoutTests/inspector/styles/styles-invalid-color-values-expected.txt (0 => 96543)
--- trunk/LayoutTests/inspector/styles/styles-invalid-color-values-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/styles/styles-invalid-color-values-expected.txt 2011-10-03 21:50:04 UTC (rev 96543)
@@ -0,0 +1,75 @@
+Tests that the displayed string for colors correctly handles clipped CSS values and RGB percentages.
+
+
+Running: testColors
+
+color: red
+ simple: true
+ original: red
+ nickname: red
+ hex: #FF0000
+ shorthex: #F00
+ rgb: rgb(255, 0, 0)
+ hsl: hsl(0, 100%, 50%)
+
+color: #F00
+ simple: true
+ original: #F00
+ nickname: red
+ hex: #FF0000
+ shorthex: #F00
+ rgb: rgb(255, 0, 0)
+ hsl: hsl(0, 100%, 50%)
+
+color: rgb(255,0,0)
+ simple: true
+ original: rgb(255,0,0)
+ nickname: red
+ hex: #FF0000
+ shorthex: #F00
+ rgb: rgb(255, 0, 0)
+ hsl: hsl(0, 100%, 50%)
+
+color: rgb(300,0,0)
+ simple: true
+ original: rgb(300,0,0)
+ nickname: red
+ hex: #FF0000
+ shorthex: #F00
+ rgb: rgb(255, 0, 0)
+ hsl: hsl(0, 100%, 50%)
+
+color: rgb(255,-10,0)
+ simple: true
+ original: rgb(255,-10,0)
+ nickname: red
+ hex: #FF0000
+ shorthex: #F00
+ rgb: rgb(255, 0, 0)
+ hsl: hsl(0, 100%, 50%)
+
+color: rgb(110%, 0%, 0%)
+ simple: true
+ original: rgb(110%, 0%, 0%)
+ nickname: red
+ hex: #FF0000
+ shorthex: #F00
+ rgb: rgb(255, 0, 0)
+ hsl: hsl(0, 100%, 50%)
+
+color: rgba(255, 0, 0, -5)
+ simple: false
+ original: rgba(255, 0, 0, -5)
+ rgb: rgb(255, 0, 0)
+ rgba: rgba(255, 0, 0, 0)
+ hsl: hsl(0, 100%, 50%)
+ hsla: hsla(0, 100%, 50%, 0)
+
+color: rgba(255, 0, 0, 5)
+ simple: false
+ original: rgba(255, 0, 0, 5)
+ rgb: rgb(255, 0, 0)
+ rgba: rgba(255, 0, 0, 1)
+ hsl: hsl(0, 100%, 50%)
+ hsla: hsla(0, 100%, 50%, 1)
+
Added: trunk/LayoutTests/inspector/styles/styles-invalid-color-values.html (0 => 96543)
--- trunk/LayoutTests/inspector/styles/styles-invalid-color-values.html (rev 0)
+++ trunk/LayoutTests/inspector/styles/styles-invalid-color-values.html 2011-10-03 21:50:04 UTC (rev 96543)
@@ -0,0 +1,71 @@
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+function test()
+{
+ var colors = [
+ // Each of these is red. Some may need to be clipped to [0, 255].
+ 'red',
+ '#F00',
+ 'rgb(255,0,0)',
+ 'rgb(300,0,0)', // clipped to rgb(255,0,0)
+ 'rgb(255,-10,0)', // clipped to rgb(255,0,0)
+ 'rgb(110%, 0%, 0%)', // clipped to rgb(100%,0%,0%)
+
+ // Each of these has their alpha clipped [0.0, 1.0].
+ 'rgba(255, 0, 0, -5)', // clipped to rgba(255,0,0,0)
+ 'rgba(255, 0, 0, 5)', // clipped to rgba(255,0,0,1)
+ ];
+
+ InspectorTest.runTestSuite([
+ function testColors(next)
+ {
+ for (var i = 0; i < colors.length; ++i)
+ dumpColorRepresentationsForColor(colors[i]);
+ next();
+ },
+ ]);
+
+ function dumpColorRepresentationsForColor(colorString)
+ {
+ try {
+ var color = new WebInspector.Color(colorString);
+ } catch (e) {
+ InspectorTest.addResult("FAIL: Error parsing color '" + colorString + "'.");
+ return;
+ }
+
+ InspectorTest.addResult("");
+ InspectorTest.addResult("color: " + colorString);
+ InspectorTest.addResult(" simple: " + color.simple);
+ var cf = WebInspector.StylesSidebarPane.ColorFormat;
+ for (var colorFormatKey in cf) {
+ var colorFormat = cf[colorFormatKey];
+ // Simple colors do not have RGBA and HSLA representations.
+ if (color.simple && (colorFormat === cf.RGBA || colorFormat === cf.HSLA))
+ continue;
+ // Advanced colors do not have HEX representations.
+ if (!color.simple && (colorFormat === cf.ShortHEX || colorFormat === cf.HEX))
+ continue;
+ // If there is no ShortHEX then skip it.
+ if (colorFormat === cf.ShortHEX && !color.hasShortHex())
+ continue;
+ // If there is no nickname, then skip it.
+ if (colorFormat === cf.Nickname && !color.nickname)
+ continue;
+ InspectorTest.addResult(' ' + colorFormat + ": " + color.toString(colorFormat));
+ }
+ }
+}
+</script>
+</head>
+
+<body _onload_="runTest()">
+<p>
+Tests that the displayed string for colors correctly handles clipped CSS values and RGB percentages.
+</p>
+
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (96542 => 96543)
--- trunk/Source/WebCore/ChangeLog 2011-10-03 21:45:40 UTC (rev 96542)
+++ trunk/Source/WebCore/ChangeLog 2011-10-03 21:50:04 UTC (rev 96543)
@@ -1,3 +1,33 @@
+2011-10-03 Joseph Pecoraro <[email protected]>
+
+ 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 <[email protected]>
SVG Pattern tile pixelated on patternTransform
Modified: trunk/Source/WebCore/inspector/front-end/Color.js (96542 => 96543)
--- trunk/Source/WebCore/inspector/front-end/Color.js 2011-10-03 21:45:40 UTC (rev 96542)
+++ trunk/Source/WebCore/inspector/front-end/Color.js 2011-10-03 21:50:04 UTC (rev 96543)
@@ -186,18 +186,43 @@
return this._protocolRGBA;
},
+ _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();
},
@@ -212,9 +237,9 @@
_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);
var diff = max - min;
@@ -253,6 +278,9 @@
var s = parseFloat(hsl[1]) / 100;
var l = parseFloat(hsl[2]) / 100;
+ if (s < 0)
+ s = 0;
+
if (l <= 0.5)
var q = l * (1 + s);
else
@@ -286,17 +314,15 @@
}
},
- _rgbaToHSLA: function(rgba)
+ _rgbaToHSLA: function(rgba, alpha)
{
- var alpha = rgba[3];
var hsl = this._rgbToHSL(rgba)
hsl.push(alpha);
return hsl;
},
- _hslaToRGBA: function(hsla)
+ _hslaToRGBA: function(hsla, alpha)
{
- var alpha = hsla[3];
var rgb = this._hslToRGB(hsla);
rgb.push(alpha);
return rgb;
@@ -372,13 +398,13 @@
if (match[1]) { // rgba
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);
}
return;
