Skip to content
This repository
Browse code

hsl and hsla support plus initial tests

  • Loading branch information...
commit f6dbf624c94e9736efa802cbb15bb1a6a1c33a3f 1 parent 0ce4a8f
Tom Carden authored November 17, 2010 visionmedia committed November 18, 2010
42  lib/context2d.js
@@ -126,6 +126,8 @@ var parseFont = exports.parseFont = function(str){
126 126
  *  - rgb(255,255,5)
127 127
  *  - rgba(255,255,5,.8)
128 128
  *  - rgba(255,255,5,0.8)
  129
+ *  - hsl(300,100%,50%)
  130
+ *  - hsla(300,100%,50%,0.5)
129 131
  *  - white
130 132
  *  - red
131 133
  *
@@ -177,9 +179,47 @@ var parseColor = exports.parseColor = function(str){
177 179
       , parseInt(captures[3] + captures[3], 16)
178 180
       , 1
179 181
     ];
180  
-  }
  182
+  // HSLA
  183
+  } else if (0 == str.indexOf('hsla')) {
  184
+    var captures = /hsla\((\d+\.\d+|\.\d+|\d+) *, *(\d+\.\d+|\.\d+|\d+)%? *, *(\d+\.\d+|\.\d+|\d+)%? *, *(\d+\.\d+|\.\d+|\d+) *\)/.exec(str);
  185
+    if (!captures) return;
  186
+    return cache[str] = hsl2rgb(
  187
+        (((parseFloat(captures[1], 10) % 360) + 360) % 360) / 360
  188
+      , parseFloat(captures[2], 10) / 100.0
  189
+      , parseFloat(captures[3], 10) / 100.0
  190
+      , parseFloat(captures[4], 10)
  191
+    );
  192
+  // HSL
  193
+  } else if (0 == str.indexOf('hsl')) {
  194
+    var captures = /hsl\((\d+\.\d+|\.\d+|\d+) *, *(\d+\.\d+|\.\d+|\d+)%? *, *(\d+\.\d+|\.\d+|\d+)%? *\)/.exec(str);
  195
+    if (!captures) return;
  196
+    return cache[str] = hsl2rgb(
  197
+        (((parseFloat(captures[1], 10) % 360) + 360) % 360) / 360
  198
+      , parseFloat(captures[2], 10) / 100.0
  199
+      , parseFloat(captures[3], 10) / 100.0
  200
+      , 1
  201
+    );
  202
+  }  
181 203
 };
182 204
 
  205
+// adapted from ABC code at http://www.w3.org/TR/css3-color/#hsl-color
  206
+function hsl2rgb(h,s,l,a) {
  207
+  var m2 = l <= 0.5 ? l*(s+1) : l+s-l*s
  208
+    , m1 = l*2-m2;
  209
+  return [ Math.round(hue2rgb(m1, m2, h+1/3) * 255),
  210
+           Math.round(hue2rgb(m1, m2, h) * 255),
  211
+           Math.round(hue2rgb(m1, m2, h-1/3) * 255),
  212
+           a ]
  213
+}
  214
+function hue2rgb(m1,m2,h) {
  215
+  if (h<0) h = h+1;
  216
+  if (h>1) h = h-1;
  217
+  if (h*6<1) return m1+(m2-m1)*h*6;
  218
+  if (h*2<1) return m2;
  219
+  if (h*3<2) return m1+(m2-m1)*(2/3-h)*6;
  220
+  return m1;
  221
+}
  222
+
183 223
 /**
184 224
  * Add `color` stop at the given `offset`.
185 225
  *
67  test/canvas.test.js
@@ -38,6 +38,73 @@ module.exports = {
38 38
     assert.equal(null, parseColor('rgba(2554,165 , 0 ,.6)'));
39 39
     assert.equal(null, parseColor('rgba()'));
40 40
 
  41
+    // hsl()
  42
+    assert.eql([255,0,0,1], parseColor('hsl(0,100.0,50.0)'));
  43
+    assert.eql([255,0,0,1], parseColor('hsl(360,100.0,50.0)'));
  44
+    assert.eql([0,255,0,1], parseColor('hsl(120,100.0,50.0)'));
  45
+    assert.eql([0,0,255,1], parseColor('hsl(240,100.0,50.0)'));
  46
+    assert.equal(null, parseColor('hsl()'));
  47
+
  48
+    // adapted from tables at http://www.w3.org/TR/css3-color/#hsl-examples
  49
+    // NB:- corrected rounded percents to precise percents
  50
+    //      e.g. 13% --> 12.5%, etc.
  51
+    //   ...presumably the precise values were used to generate the tables?
  52
+    assert.eql(parseColor('#FFFFFF'), parseColor('hsl(0,100%,100%)'))
  53
+    assert.eql(parseColor('#FFFFFF'), parseColor('hsl(0,75%,100%)'))
  54
+    assert.eql(parseColor('#FFFFFF'), parseColor('hsl(0,50%,100%)'))
  55
+    assert.eql(parseColor('#FFFFFF'), parseColor('hsl(0,25%,100%)'))
  56
+    assert.eql(parseColor('#FFFFFF'), parseColor('hsl(0,0%,100%)'))
  57
+    assert.eql(parseColor('#FFBFBF'), parseColor('hsl(0,100%,87.5%)'))
  58
+    assert.eql(parseColor('#F7C7C7'), parseColor('hsl(0,75%,87.5%)'))
  59
+    assert.eql(parseColor('#EFCFCF'), parseColor('hsl(0,50%,87.5%)'))
  60
+    assert.eql(parseColor('#E7D7D7'), parseColor('hsl(0,25%,87.5%)'))
  61
+    assert.eql(parseColor('#DFDFDF'), parseColor('hsl(0,0%,87.5%)'))
  62
+    assert.eql(parseColor('#FF8080'), parseColor('hsl(0,100%,75%)'))
  63
+    assert.eql(parseColor('#EF8F8F'), parseColor('hsl(0,75%,75%)'))
  64
+    assert.eql(parseColor('#DF9F9F'), parseColor('hsl(0,50%,75%)'))
  65
+    assert.eql(parseColor('#CFAFAF'), parseColor('hsl(0,25%,75%)'))
  66
+    assert.eql(parseColor('#BFBFBF'), parseColor('hsl(0,0%,75%)'))
  67
+    assert.eql(parseColor('#FF4040'), parseColor('hsl(0,100%,62.5%)'))
  68
+    assert.eql(parseColor('#E75858'), parseColor('hsl(0,75%,62.5%)'))
  69
+    assert.eql(parseColor('#CF7070'), parseColor('hsl(0,50%,62.5%)'))
  70
+    assert.eql(parseColor('#B78787'), parseColor('hsl(0,25%,62.5%)'))
  71
+    assert.eql(parseColor('#9F9F9F'), parseColor('hsl(0,0%,62.5%)'))
  72
+    assert.eql(parseColor('#FF0000'), parseColor('hsl(0,100%,50%)'))
  73
+    assert.eql(parseColor('#DF2020'), parseColor('hsl(0,75%,50%)'))
  74
+    assert.eql(parseColor('#BF4040'), parseColor('hsl(0,50%,50%)'))
  75
+    assert.eql(parseColor('#9F6060'), parseColor('hsl(0,25%,50%)'))
  76
+    assert.eql(parseColor('#808080'), parseColor('hsl(0,0%,50%)'))
  77
+    assert.eql(parseColor('#BF0000'), parseColor('hsl(0,100%,37.5%)'))
  78
+    assert.eql(parseColor('#A71818'), parseColor('hsl(0,75%,37.5%)'))
  79
+    assert.eql(parseColor('#8F3030'), parseColor('hsl(0,50%,37.5%)'))
  80
+    assert.eql(parseColor('#784848'), parseColor('hsl(0,25%,37.5%)'))
  81
+    assert.eql(parseColor('#606060'), parseColor('hsl(0,0%,37.5%)'))
  82
+    assert.eql(parseColor('#800000'), parseColor('hsl(0,100%,25%)')) 
  83
+    assert.eql(parseColor('#701010'), parseColor('hsl(0,75%,25%)'))
  84
+    assert.eql(parseColor('#602020'), parseColor('hsl(0,50%,25%)'))
  85
+    assert.eql(parseColor('#503030'), parseColor('hsl(0,25%,25%)'))
  86
+    assert.eql(parseColor('#404040'), parseColor('hsl(0,0%,25%)'))
  87
+    assert.eql(parseColor('#400000'), parseColor('hsl(0,100%,12.5%)'))
  88
+    assert.eql(parseColor('#380808'), parseColor('hsl(0,75%,12.5%)'))
  89
+    assert.eql(parseColor('#301010'), parseColor('hsl(0,50%,12.5%)'))
  90
+    assert.eql(parseColor('#281818'), parseColor('hsl(0,25%,12.5%)'))
  91
+    assert.eql(parseColor('#202020'), parseColor('hsl(0,0%,12.5%)'))
  92
+    assert.eql(parseColor('#000000'), parseColor('hsl(0,100%,0%)'))
  93
+    assert.eql(parseColor('#000000'), parseColor('hsl(0,75%,0%)'))
  94
+    assert.eql(parseColor('#000000'), parseColor('hsl(0,50%,0%)'))
  95
+    assert.eql(parseColor('#000000'), parseColor('hsl(0,25%,0%)'))
  96
+    assert.eql(parseColor('#000000'), parseColor('hsl(0,0%,0%)'))
  97
+    
  98
+    // TODO: there are 11 more tables to adapt from
  99
+    // http://www.w3.org/TR/css3-color/#hsl-examples :)
  100
+    
  101
+    // hsla()
  102
+    assert.eql([255,0,0,1], parseColor('hsla(0,100.0,50.0,1.0)'));
  103
+    assert.eql([255,0,0,1], parseColor('hsla(360,100.0,50.0,1.0)'));
  104
+    assert.eql([0,255,0,1], parseColor('hsla(120,100.0,50.0,1.0)'));
  105
+    assert.eql([0,0,255,1], parseColor('hsla(240,100.0,50.0,1.0)'));
  106
+    assert.equal(null, parseColor('hsl()'));
  107
+
41 108
     // hex
42 109
     assert.eql([165,89,89,1], parseColor('#A55959'));
43 110
     assert.eql([255,255,255,1], parseColor('#FFFFFF'));

0 notes on commit f6dbf62

Please sign in to comment.
Something went wrong with that request. Please try again.