Changeset 96543 in webkit
- Timestamp:
- Oct 3, 2011 2:50:04 PM (13 years ago)
- Location:
- trunk
- Files:
-
- 2 added
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r96542 r96543 1 2011-10-03 Joseph Pecoraro <joepeck@webkit.org> 2 3 Web Inspector: rgb() with percentages shows wrong hex/hsl values 4 https://bugs.webkit.org/show_bug.cgi?id=69152 5 6 Reviewed by Pavel Feldman. 7 8 This test outputs all of the supported color format representations 9 for supplied CSS color values. We expect some of the CSS values 10 to be clamped, e.g. rgb(300,0,0) to rgb(255,0,0). This also tests 11 that rgb percentages, such as rgb(100%,0,0), work correctly. 12 13 * inspector/styles/styles-invalid-color-values-expected.txt: Added. 14 * inspector/styles/styles-invalid-color-values.html: Added. 15 1 16 2011-10-03 Adam Barth <abarth@webkit.org> 2 17 -
trunk/Source/WebCore/ChangeLog
r96530 r96543 1 2011-10-03 Joseph Pecoraro <joepeck@webkit.org> 2 3 Web Inspector: rgb() with percentages shows wrong hex/hsl values 4 https://bugs.webkit.org/show_bug.cgi?id=69152 5 6 Reviewed by Pavel Feldman. 7 8 Previously we assumed rgb values were always in byte form, 9 but they could include percentage values. Ex. rgb(100%,0,0). 10 This patch fixes this, and in the process includes clamping 11 for invalid percentages, byte values, and alpha values. 12 13 Test: inspector/styles/styles-invalid-color-values.html 14 15 * inspector/front-end/Color.js: 16 (WebInspector.Color.prototype._clamp): 17 (WebInspector.Color.prototype._individualRGBValueToFloatValue): 18 (WebInspector.Color.prototype._individualRGBValueToHexValue): 19 (WebInspector.Color.prototype._rgbToHex): 20 (WebInspector.Color.prototype._rgbToHSL): 21 An individual rgb value can be either a decimal/float or a 22 percentage. Rewrite the conversion functions to handle either 23 input. Regardless of the type of input, always return a clamped 24 decimal/float value between 0 and 255. 25 26 (WebInspector.Color.prototype._rgbaToHSLA): 27 (WebInspector.Color.prototype._hslaToRGBA): 28 (WebInspector.Color.prototype._parse): 29 Clamp the alpha value between 0 and 1. 30 1 31 2011-10-03 Dirk Schulze <krit@webkit.org> 2 32 -
trunk/Source/WebCore/inspector/front-end/Color.js
r95621 r96543 187 187 }, 188 188 189 _clamp: function(value, min, max) 190 { 191 if (value < min) 192 return min; 193 if (value > max) 194 return max; 195 return value; 196 }, 197 198 _individualRGBValueToFloatValue: function(rgbValue) 199 { 200 if (typeof rgbValue === "number") 201 return this._clamp(rgbValue, 0, 255); 202 203 if (rgbValue.indexOf("%") === -1) { 204 var intValue = parseInt(rgbValue); 205 return this._clamp(rgbValue, 0, 255); 206 } 207 208 var percentValue = parseFloat(rgbValue); 209 return this._clamp(percentValue, 0, 100) * 2.55; 210 }, 211 212 _individualRGBValueToHexValue: function(rgbValue) 213 { 214 var floatValue = this._individualRGBValueToFloatValue(rgbValue); 215 var hex = Math.round(floatValue).toString(16); 216 if (hex.length === 1) 217 hex = "0" + hex; 218 return hex; 219 }, 220 189 221 _rgbToHex: function(rgb) 190 222 { 191 var r = parseInt(rgb[0]).toString(16); 192 var g = parseInt(rgb[1]).toString(16); 193 var b = parseInt(rgb[2]).toString(16); 194 if (r.length === 1) 195 r = "0" + r; 196 if (g.length === 1) 197 g = "0" + g; 198 if (b.length === 1) 199 b = "0" + b; 200 223 var r = this._individualRGBValueToHexValue(rgb[0]); 224 var g = this._individualRGBValueToHexValue(rgb[1]); 225 var b = this._individualRGBValueToHexValue(rgb[2]); 201 226 return (r + g + b).toUpperCase(); 202 227 }, … … 213 238 _rgbToHSL: function(rgb) 214 239 { 215 var r = parseInt(rgb[0]) / 255;216 var g = parseInt(rgb[1]) / 255;217 var b = parseInt(rgb[2]) / 255;240 var r = this._individualRGBValueToFloatValue(rgb[0]) / 255; 241 var g = this._individualRGBValueToFloatValue(rgb[1]) / 255; 242 var b = this._individualRGBValueToFloatValue(rgb[2]) / 255; 218 243 var max = Math.max(r, g, b); 219 244 var min = Math.min(r, g, b); … … 253 278 var s = parseFloat(hsl[1]) / 100; 254 279 var l = parseFloat(hsl[2]) / 100; 280 281 if (s < 0) 282 s = 0; 255 283 256 284 if (l <= 0.5) … … 287 315 }, 288 316 289 _rgbaToHSLA: function(rgba) 290 { 291 var alpha = rgba[3]; 317 _rgbaToHSLA: function(rgba, alpha) 318 { 292 319 var hsl = this._rgbToHSL(rgba) 293 320 hsl.push(alpha); … … 295 322 }, 296 323 297 _hslaToRGBA: function(hsla) 298 { 299 var alpha = hsla[3]; 324 _hslaToRGBA: function(hsla, alpha) 325 { 300 326 var rgb = this._hslToRGB(hsla); 301 327 rgb.push(alpha); … … 373 399 this.format = "rgba"; 374 400 this.rgba = match[1].split(/\s*,\s*/); 375 this. hsla = this._rgbaToHSLA(this.rgba);376 this. alpha = this.rgba[3];401 this.rgba[3] = this.alpha = this._clamp(this.rgba[3], 0, 1); 402 this.hsla = this._rgbaToHSLA(this.rgba, this.alpha); 377 403 } else if (match[2]) { // hsla 378 404 this.format = "hsla"; 379 405 this.hsla = match[2].replace(/%/g, "").split(/\s*,\s*/); 380 this. rgba = this._hslaToRGBA(this.hsla);381 this. alpha = this.hsla[3];406 this.hsla[3] = this.alpha = this._clamp(this.hsla[3], 0, 1); 407 this.rgba = this._hslaToRGBA(this.hsla, this.alpha); 382 408 } 383 409
Note: See TracChangeset
for help on using the changeset viewer.