From 04f5b84ef33152506876d853eb76f7c58676f866 Mon Sep 17 00:00:00 2001 From: Michael Hellein Date: Tue, 23 Sep 2014 13:31:44 -0400 Subject: [PATCH] Added -compass-space-list, first-value-of, color-stops. Added border-radius test. --- lib/compass/_functions.scss | 1 + lib/compass/css3/_border-radius.scss | 4 +-- .../functions/_cross_browser_support.scss | 4 ++- lib/compass/functions/_gradient_support.scss | 15 +++++++++++ lib/compass/functions/_lists.scss | 17 ++++++++++++- test/css3/borderRadiusSpec.js | 13 ++++++++++ test/css3/imagesSpec.js | 7 ++++++ test/functionsSpec.js | 25 +++++++++++++++++++ 8 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 lib/compass/functions/_gradient_support.scss create mode 100644 test/css3/borderRadiusSpec.js diff --git a/lib/compass/_functions.scss b/lib/compass/_functions.scss index b95c9f0..6441dab 100644 --- a/lib/compass/_functions.scss +++ b/lib/compass/_functions.scss @@ -1,2 +1,3 @@ @import "functions/lists"; @import "functions/cross_browser_support"; +@import "functions/gradient_support"; diff --git a/lib/compass/css3/_border-radius.scss b/lib/compass/css3/_border-radius.scss index 3bfd041..8e09c8a 100644 --- a/lib/compass/css3/_border-radius.scss +++ b/lib/compass/css3/_border-radius.scss @@ -47,7 +47,7 @@ $default-border-radius: 5px !default; not(-o), not(-ms), not(-khtml), - not official + not(official) ); @include experimental("border-radius", $radius unquote("/") $vertical-radius, -moz, @@ -76,7 +76,7 @@ $default-border-radius: 5px !default; not(-o), not(-ms), not(-khtml), - not official + not(official) ); @include experimental("border-#{$vert}-#{$horz}-radius", $radius, not(-moz), diff --git a/lib/compass/functions/_cross_browser_support.scss b/lib/compass/functions/_cross_browser_support.scss index a092309..a6c7494 100644 --- a/lib/compass/functions/_cross_browser_support.scss +++ b/lib/compass/functions/_cross_browser_support.scss @@ -31,7 +31,9 @@ @each $item in $properties { @if $item == null {} @else { - $item: #{$prefix}-#{$item}; + @if prefixed($prefix, $item) { + $item: #{$prefix}-#{$item}; + } @if $props { $props: $props, $item; } diff --git a/lib/compass/functions/_gradient_support.scss b/lib/compass/functions/_gradient_support.scss new file mode 100644 index 0000000..8d93079 --- /dev/null +++ b/lib/compass/functions/_gradient_support.scss @@ -0,0 +1,15 @@ +/* + * A partial implementation of the Ruby gradient support functions from Compass: + * https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb + */ + +@function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) { + $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9; + $full: $item1; + @each $item in $items { + @if $item != null { + $full: $full, $item; + } + } + @return $full; +} \ No newline at end of file diff --git a/lib/compass/functions/_lists.scss b/lib/compass/functions/_lists.scss index a118e6a..fcdadd8 100644 --- a/lib/compass/functions/_lists.scss +++ b/lib/compass/functions/_lists.scss @@ -17,7 +17,18 @@ @return nth($list, $place); } -// compass_list and compass_space_list can't be implemented in sass script +// compass_list can't be implemented in sass script + +@function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) { + $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9; + $full: $item1; + @each $item in $items { + @if $item != null { + $full: $full $item; + } + } + @return $full; +} @function -compass-list-size($list) { @return length($list); @@ -51,3 +62,7 @@ } @return $full; } + +@function first-value-of($list) { + @return nth($list, 1); +} \ No newline at end of file diff --git a/test/css3/borderRadiusSpec.js b/test/css3/borderRadiusSpec.js new file mode 100644 index 0000000..897413a --- /dev/null +++ b/test/css3/borderRadiusSpec.js @@ -0,0 +1,13 @@ +var render = require('../helper/render'); +var ruleset = require('../helper/ruleset'); + +describe("CSS3 Border Radius", function () { + + it("should generate a border radius", function (done) { + render(ruleset('$experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include border-radius(0, 0);'), function(output, err) { + expect(output).toBe(ruleset('-webkit-border-radius:0 0;border-radius:0 / 0;')); + done(); + }, ['compass/css3/border-radius']); + }); + +}); diff --git a/test/css3/imagesSpec.js b/test/css3/imagesSpec.js index 587042f..3caf745 100644 --- a/test/css3/imagesSpec.js +++ b/test/css3/imagesSpec.js @@ -17,4 +17,11 @@ describe("CSS3 Images", function () { }, ['compass/css3/images']); }); + it("should generate multiple backgrounds of different types", function (done) { + render(ruleset('$support-for-original-webkit-gradients: false; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; @include background(#fff, url(1.gif), linear-gradient(white, black));'), function(output, err) { + expect(output).toBe(ruleset('background:#fff,url(1.gif),-webkit-linear-gradient(#ffffff, #000000);background:#fff,url(1.gif),linear-gradient(#ffffff, #000000);')); + done(); + }, ['compass/css3/images']); + }); + }); diff --git a/test/functionsSpec.js b/test/functionsSpec.js index 9eb7224..9e12c92 100644 --- a/test/functionsSpec.js +++ b/test/functionsSpec.js @@ -46,6 +46,20 @@ describe("List Functions", function () { }); }); + it("should get the first value of a list", function(done) { + render('$list: one, two, three, four;' + property('first-value-of($list)'), function(output, err) { + expect(output).toBe(property('one')); + done(); + }); + }); + + it("should create a space-delimited list", function(done) { + render(property('-compass-space-list(a, b, c)'), function(output, err) { + expect(output).toBe(property('a b c')); + done(); + }); + }); + }); describe("Cross Browser Functions", function () { @@ -107,3 +121,14 @@ describe("Cross Browser Functions", function () { }); }); + +describe("Gradient Functions", function () { + + it("should prefix a list with color stops", function(done) { + render(property('prefix(-webkit, linear-gradient(-45deg, color-stops(rgb(0,0,0) 25%, transparent 75%, transparent)), linear-gradient(-45deg, color-stops(#000 25%, transparent 75%, transparent)))'), function(output, err) { + expect(output).toBe(property('-webkit-linear-gradient(-45deg, #000000 25%, transparent 75%, transparent),-webkit-linear-gradient(-45deg, #000 25%, transparent 75%, transparent)')); + done(); + }); + }); + +}); \ No newline at end of file