From ea1822385a01711b650894cdd923f5871e497d3a Mon Sep 17 00:00:00 2001 From: Roel van Duijnhoven Date: Thu, 20 Feb 2014 16:19:19 +0100 Subject: [PATCH 1/5] Let `luma` follow spec The `luma` function found in LESS is not implemented as defined in the specification (http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). --- lib/less/tree/color.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/less/tree/color.js b/lib/less/tree/color.js index 8ea3fe020..eac71f7e0 100644 --- a/lib/less/tree/color.js +++ b/lib/less/tree/color.js @@ -28,7 +28,17 @@ var transparentKeyword = "transparent"; tree.Color.prototype = { type: "Color", eval: function () { return this; }, - luma: function () { return (0.2126 * this.rgb[0] / 255) + (0.7152 * this.rgb[1] / 255) + (0.0722 * this.rgb[2] / 255); }, + luma: function () { + var r = this.rgb[0] / 255, + g = this.rgb[1] / 255, + b = this.rgb[2] / 255; + + r = (r <= 0.03928) ? r / 12.92 : Math.pow(((r + 0.055) / 1.055), 2.4); + g = (g <= 0.03928) ? g / 12.92 : Math.pow(((g + 0.055) / 1.055), 2.4); + b = (b <= 0.03928) ? b / 12.92 : Math.pow(((b + 0.055) / 1.055), 2.4); + + return 0.2126 * r + 0.7152 * g + 0.0722 * b; + }, genCSS: function (env, output) { output.add(this.toCSS(env)); From 4952b66b3c169b2924d71c8b39df1a43a28fbc98 Mon Sep 17 00:00:00 2001 From: Roel van Duijnhoven Date: Fri, 21 Feb 2014 08:49:34 +0100 Subject: [PATCH 2/5] Let tests reflect output of new luma function. --- test/css/functions.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/css/functions.css b/test/css/functions.css index 17509c18d..923b8f250 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -40,11 +40,11 @@ contrast-light-thresh: #111111; contrast-dark-thresh: #eeeeee; contrast-high-thresh: #eeeeee; - contrast-low-thresh: #111111; + contrast-low-thresh: #eeeeee; contrast-light-thresh-per: #111111; contrast-dark-thresh-per: #eeeeee; contrast-high-thresh-per: #eeeeee; - contrast-low-thresh-per: #111111; + contrast-low-thresh-per: #eeeeee; replace: "Hello, World!"; replace-captured: "This is a new string."; replace-with-flags: "2 + 2 = 4"; From 86fee0d1855572bf0706dba22e3c6e7b9712de58 Mon Sep 17 00:00:00 2001 From: Roel van Duijnhoven Date: Fri, 21 Feb 2014 08:51:19 +0100 Subject: [PATCH 3/5] Add test case were luminance is not equal to luma. --- test/css/functions.css | 1 + test/less/functions.less | 1 + 2 files changed, 2 insertions(+) diff --git a/test/css/functions.css b/test/css/functions.css index 923b8f250..66ed066e3 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -24,6 +24,7 @@ luma-blue: 7%; luma-yellow: 93%; luma-cyan: 79%; + luma-differs-from-luminance: 24%; luma-white-alpha: 50%; contrast-filter: contrast(30%); saturate-filter: saturate(5%); diff --git a/test/less/functions.less b/test/less/functions.less index 87686beee..088f9e362 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -28,6 +28,7 @@ luma-blue: luma(#0000ff); luma-yellow: luma(#ffff00); luma-cyan: luma(#00ffff); + luma-differs-from-luminance: luma(#ff3600); luma-white-alpha: luma(rgba(255,255,255,0.5)); contrast-filter: contrast(30%); saturate-filter: saturate(5%); From 193ce01be9213895adb8239fa3a322a39516f749 Mon Sep 17 00:00:00 2001 From: Roel van Duijnhoven Date: Thu, 27 Feb 2014 08:35:19 +0100 Subject: [PATCH 4/5] Sync semantics of test variables and their output. --- test/css/functions.css | 4 ++-- test/less/functions.less | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/css/functions.css b/test/css/functions.css index 66ed066e3..6541f1b27 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -41,11 +41,11 @@ contrast-light-thresh: #111111; contrast-dark-thresh: #eeeeee; contrast-high-thresh: #eeeeee; - contrast-low-thresh: #eeeeee; + contrast-low-thresh: #111111; contrast-light-thresh-per: #111111; contrast-dark-thresh-per: #eeeeee; contrast-high-thresh-per: #eeeeee; - contrast-low-thresh-per: #eeeeee; + contrast-low-thresh-per: #111111; replace: "Hello, World!"; replace-captured: "This is a new string."; replace-with-flags: "2 + 2 = 4"; diff --git a/test/less/functions.less b/test/less/functions.less index 088f9e362..de74ba86f 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -45,11 +45,11 @@ contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5); contrast-dark-thresh: contrast(#000, #111111, #eeeeee, 0.5); contrast-high-thresh: contrast(#555, #111111, #eeeeee, 0.6); - contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.1); + contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.09); contrast-light-thresh-per: contrast(#fff, #111111, #eeeeee, 50%); contrast-dark-thresh-per: contrast(#000, #111111, #eeeeee, 50%); contrast-high-thresh-per: contrast(#555, #111111, #eeeeee, 60%); - contrast-low-thresh-per: contrast(#555, #111111, #eeeeee, 10%); + contrast-low-thresh-per: contrast(#555, #111111, #eeeeee, 9%); replace: replace("Hello, Mars.", "Mars\.", "World!"); replace-captured: replace("This is a string.", "(string)\.$", "new $1."); replace-with-flags: replace("One + one = 4", "one", "2", "gi"); From e7389a0e7a0a47c3af1905256fe2f2e2cdee34ae Mon Sep 17 00:00:00 2001 From: Roel van Duijnhoven Date: Thu, 27 Feb 2014 08:45:24 +0100 Subject: [PATCH 5/5] Introduce luminance function. The behaviour of this function is identical to luma prior to LESS 1.7. --- lib/less/functions.js | 8 ++++++++ test/css/functions.css | 6 +++++- test/less/functions.less | 6 +++++- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/lib/less/functions.js b/lib/less/functions.js index 2c269a98e..eb7309c2f 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -95,6 +95,14 @@ tree.functions = { luma: function (color) { return new(tree.Dimension)(Math.round(color.luma() * color.alpha * 100), '%'); }, + luminance: function (color) { + var luminance = + (0.2126 * color.rgb[0] / 255) + + (0.7152 * color.rgb[1] / 255) + + (0.0722 * color.rgb[2] / 255); + + return new(tree.Dimension)(Math.round(luminance * color.alpha * 100), '%'); + }, saturate: function (color, amount) { // filter: saturate(3.2); // should be kept as is, so check for color diff --git a/test/css/functions.css b/test/css/functions.css index 6541f1b27..1220bd02b 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -25,7 +25,11 @@ luma-yellow: 93%; luma-cyan: 79%; luma-differs-from-luminance: 24%; - luma-white-alpha: 50%; + luminance-white: 100%; + luminance-black: 0%; + luminance-black-alpha: 0%; + luminance-red: 21%; + luminance-differs-from-luma: 36%; contrast-filter: contrast(30%); saturate-filter: saturate(5%); contrast-white: #000000; diff --git a/test/less/functions.less b/test/less/functions.less index de74ba86f..8a45ef9f2 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -29,7 +29,11 @@ luma-yellow: luma(#ffff00); luma-cyan: luma(#00ffff); luma-differs-from-luminance: luma(#ff3600); - luma-white-alpha: luma(rgba(255,255,255,0.5)); + luminance-white: luma(#fff); + luminance-black: luma(#000); + luminance-black-alpha: luma(rgba(0,0,0,0.5)); + luminance-red: luma(#ff0000); + luminance-differs-from-luma: luminance(#ff3600); contrast-filter: contrast(30%); saturate-filter: saturate(5%); contrast-white: contrast(#fff);