sprite tests moved over

Gemfile.lock

@@ -7,7 +7,7 @@ GIT
 PATH
   remote: .
   specs:
-    compass (0.11.1.f1061c4)
+    compass (0.11.1.f4f9d7b)
       chunky_png (~> 1.1)
       fssm (>= 0.2.7)
       sass (~> 3.1)
@@ -71,6 +71,7 @@ GEM
     gherkin (2.2.9)
       json (~> 1.4.6)
       term-ansicolor (~> 1.0.5)
+    haml (3.1.1)
     i18n (0.5.0)
     json (1.4.6)
     livereload (1.6)
@@ -119,11 +120,7 @@ GEM
     ruby-json (1.1.2)
     ruby-prof (0.10.5)
     rubyzip (0.9.4)
-<<<<<<< HEAD
-    sass (3.1.1)
-=======
     sass (3.1.0)
->>>>>>> f3ea546150ded6fb0ee1ca91cde4c0349f088ddd
     sys-uname (0.8.5)
     term-ansicolor (1.0.5)
     thor (0.14.6)
@@ -144,10 +141,7 @@ DEPENDENCIES
   cucumber (~> 0.9.2)
   diff-lcs (~> 1.1.2)
   fakefs!
-<<<<<<< HEAD
-=======
   haml (~> 3.1)
->>>>>>> f3ea546150ded6fb0ee1ca91cde4c0349f088ddd
   livereload
   mocha
   rails (~> 3.0.0.rc)
@@ -156,8 +150,5 @@ DEPENDENCIES
   rspec (~> 2.0.0)
   ruby-prof
   rubyzip
-<<<<<<< HEAD
-=======
   sass (= 3.1)
->>>>>>> f3ea546150ded6fb0ee1ca91cde4c0349f088ddd
   timecop

test/configuration_test.rb

@@ -281,13 +281,4 @@ EXPECTED
     end.compact
   end
   
-  def assert_correct(before, after)
-    if before == after
-      assert(true)
-    else
-      assert false, diff_as_string(before.inspect, after.inspect)
-    end
-  end
-
-
 end

test/helpers/test_case.rb

@@ -9,6 +9,15 @@ module Compass
         File.join(File.expand_path('../../', __FILE__), path)
       end
     end
+    
+    def assert_correct(before, after)
+      if before == after
+        assert(true)
+      else
+        assert false, diff_as_string(before.inspect, after.inspect)
+      end
+    end
+    
     module ClassMethods
 
       def it(name, &block)

test/sprites_test.rb

@@ -0,0 +1,550 @@
+require 'test_helper'
+require 'fileutils'
+require 'compass'
+require 'compass/logger'
+require 'sass/plugin'
+
+
+class SpritesTest < Test::Unit::TestCase
+  
+  def setup
+    Compass.reset_configuration!
+    @images_src_path = File.join(File.dirname(__FILE__), 'fixtures', 'sprites', 'public', 'images')
+    @images_tmp_path = File.join(File.dirname(__FILE__), 'fixtures', 'sprites', 'public', 'images-tmp')
+    ::FileUtils.cp_r @images_src_path, @images_tmp_path
+    file = StringIO.new("images_path = #{@images_tmp_path.inspect}\n")
+    Compass.add_configuration(file, "sprite_config")
+    Compass.configure_sass_plugin!
+  end
+
+  def teardown
+    Compass.reset_configuration!
+    ::FileUtils.rm_r @images_tmp_path
+  end
+
+
+  def map_location(file)
+    Dir.glob(File.join(@images_tmp_path, file)).first
+  end
+
+  def image_size(file)
+    IO.read(map_location(file))[0x10..0x18].unpack('NN')
+  end
+
+  def image_md5(file)
+    md5 = Digest::MD5.new
+    md5.update IO.read(map_location(file))
+    md5.hexdigest
+  end
+
+  def render(scss)
+    scss = %Q(@import "compass"; #{scss})
+    options = Compass.sass_engine_options
+    options[:line_comments] = false
+    options[:style] = :expanded
+    options[:syntax] = :scss
+    css = Sass::Engine.new(scss, options).render
+    # reformat to fit result of heredoc:
+    "      #{css.gsub('@charset "UTF-8";', '').gsub(/\n/, "\n      ").strip}\n"
+  end
+  
+  it "should generate sprite classes" do
+    css = render <<-SCSS
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-161c60ad78.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -10px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 30]
+    assert_equal image_md5('squares-*.png'), 'fcc93d7b279c2ad6898fbca49cbd01e1'
+  end
+
+  it "should generate sprite classes with dimensions" do
+    css = render <<-SCSS
+      $squares-sprite-dimensions: true;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-161c60ad78.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+        height: 10px;
+        width: 10px;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -10px;
+        height: 20px;
+        width: 20px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 30]
+  end
+
+  it "should provide sprite mixin" do
+    css = render <<-SCSS
+      @import "squares/*.png";
+
+      .cubicle {
+        @include squares-sprite("ten-by-ten");
+      }
+
+      .large-cube {
+        @include squares-sprite("twenty-by-twenty", true);
+      }
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .cubicle, .large-cube {
+        background: url('/squares-161c60ad78.png') no-repeat;
+      }
+      
+      .cubicle {
+        background-position: 0 0;
+      }
+      
+      .large-cube {
+        background-position: 0 -10px;
+        height: 20px;
+        width: 20px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 30]
+  end
+
+  # CUSTOMIZATIONS:
+
+  it "should be possible to change the base class" do
+    css = render <<-SCSS
+      $squares-sprite-base-class: ".circles";
+      @import "squares/*.png";
+    SCSS
+    assert_correct css, <<-CSS
+      .circles {
+        background: url('/squares-161c60ad78.png') no-repeat;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 30]
+  end
+
+  it "should calculate the spacing between images but not before first image" do
+    css = render <<-SCSS
+      $squares-ten-by-ten-spacing: 33px;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-89450808af.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -43px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 63]
+  end
+
+  it "should calculate the spacing between images" do
+    css = render <<-SCSS
+      $squares-twenty-by-twenty-spacing: 33px;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-673837183a.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -43px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 63]
+  end
+
+  it "should calculate the maximum spacing between images" do
+    css = render <<-SCSS
+      $squares-ten-by-ten-spacing: 44px;
+      $squares-twenty-by-twenty-spacing: 33px;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-1cd84c9068.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -54px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 74]
+  end
+
+  it "should calculate the maximum spacing between images in reversed order" do
+    css = render <<-SCSS
+      $squares-ten-by-ten-spacing: 33px;
+      $squares-twenty-by-twenty-spacing: 44px;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-f25b7090ca.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -54px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 74]
+  end
+
+  it "should calculate the default spacing between images" do
+    css = render <<-SCSS
+      $squares-spacing: 22px;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-d66bf24bab.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -32px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 52]
+  end
+
+  it "should use position adjustments in functions" do
+    css = render <<-SCSS
+      $squares: sprite-map("squares/*.png", $position: 100%);
+      .squares-sprite {
+        background: $squares no-repeat;
+      }
+
+      .adjusted-percentage {
+        background-position: sprite-position($squares, ten-by-ten, 100%);
+      }
+
+      .adjusted-px-1 {
+        background-position: sprite-position($squares, ten-by-ten, 4px);
+      }
+
+      .adjusted-px-2 {
+        background-position: sprite-position($squares, twenty-by-twenty, -3px, 2px);
+      }
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite {
+        background: url('/squares-8e490168dd.png') no-repeat;
+      }
+      
+      .adjusted-percentage {
+        background-position: 100% 0;
+      }
+      
+      .adjusted-px-1 {
+        background-position: -6px 0;
+      }
+      
+      .adjusted-px-2 {
+        background-position: -3px -8px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 30]
+    assert_equal image_md5('squares-*.png'), '652b67f5e9092520d6f26caae7e18012'
+  end
+
+  it "should use position adjustments in mixins" do
+    css = render <<-SCSS
+      $squares-position: 100%;
+      @import "squares/*.png";
+
+      .adjusted-percentage {
+        @include squares-sprite("ten-by-ten", $offset-x: 100%);
+      }
+
+      .adjusted-px-1 {
+        @include squares-sprite("ten-by-ten", $offset-x: 4px);
+      }
+
+      .adjusted-px-2 {
+        @include squares-sprite("twenty-by-twenty", $offset-x: -3px, $offset-y: 2px);
+      }
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .adjusted-percentage, .adjusted-px-1, .adjusted-px-2 {
+        background: url('/squares-8e490168dd.png') no-repeat;
+      }
+      
+      .adjusted-percentage {
+        background-position: 100% 0;
+      }
+      
+      .adjusted-px-1 {
+        background-position: -6px 0;
+      }
+      
+      .adjusted-px-2 {
+        background-position: -3px -8px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 30]
+    assert_equal image_md5('squares-*.png'), '652b67f5e9092520d6f26caae7e18012'
+  end
+
+  it "should repeat the image" do
+    css = render <<-SCSS
+      $squares-repeat: repeat;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-a5550fd132.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: 0 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: 0 -10px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [20, 30]
+    assert_equal image_md5('squares-*.png'), '94abae8440f1b58617f52920b70aaed2'
+  end
+
+  it "should allow the position of a sprite to be specified in absolute pixels" do
+    css = render <<-SCSS
+      $squares-ten-by-ten-position: 10px;
+      $squares-twenty-by-twenty-position: 10px;
+      @import "squares/*.png";
+      @include all-squares-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .squares-sprite, .squares-ten-by-ten, .squares-twenty-by-twenty {
+        background: url('/squares-89a274044e.png') no-repeat;
+      }
+      
+      .squares-ten-by-ten {
+        background-position: -10px 0;
+      }
+      
+      .squares-twenty-by-twenty {
+        background-position: -10px -10px;
+      }
+    CSS
+    assert_equal image_size('squares-*.png'), [30, 30]
+    assert_equal image_md5('squares-*.png'), '2fb19ef9c83018c93c6f147af3a56cb2'
+  end
+
+  it "should provide a nice errors for lemonade's old users" do
+    assert_raise(Sass::SyntaxError) do
+      render <<-SCSS
+        .squares {
+          background: sprite-url("squares/*.png") no-repeat;
+        }
+      SCSS
+    end
+    assert_raise(Sass::SyntaxError) do
+      css = render <<-SCSS
+        .squares {
+          background: sprite-image("squares/twenty-by-twenty.png") no-repeat;
+        }
+      SCSS
+    end
+    assert_raise(Sass::SyntaxError) do
+      css = render <<-SCSS
+        @import "squares/*.png";
+
+        .squares {
+          background: sprite-position("squares/twenty-by-twenty.png") no-repeat;
+        }
+      SCSS
+    end
+  end
+
+  it "should work even if @import is missing" do
+    css = render <<-SCSS
+      .squares {
+        background: sprite(sprite-map("squares/*.png"), twenty-by-twenty) no-repeat;
+      }
+    SCSS
+    assert_correct css, <<-CSS
+      .squares {
+        background: url('/squares-145869726f.png') 0 -10px no-repeat;
+      }
+    CSS
+  end
+  
+  it "should calculate corret sprite demsions when givin spacing via issue#253" do
+    css = render <<-SCSS
+      $squares-spacing: 10px;
+      @import "squares/*.png";
+      .foo {
+        @include sprite-background-position($squares-sprites, "twenty-by-twenty");
+      }
+      .bar {
+        @include sprite-background-position($squares-sprites, "ten-by-ten");
+      }
+    SCSS
+    assert_equal image_size('squares-*.png'), [20, 40]
+    assert_correct css, <<-CSS
+      .squares-sprite {
+        background: url('/squares-e3c68372d9.png') no-repeat;
+      }
+      
+      .foo {
+        background-position: 0 -20px;
+      }
+      
+      .bar {
+        background-position: 0 0;
+      }
+    CSS
+  end
+
+  it "should render corret sprite with css selectors via issue#248" do
+    css = render <<-SCSS
+      @import "selectors/*.png";
+      @include all-selectors-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .selectors-sprite, .selectors-ten-by-ten {
+        background: url('/selectors-edfef809e2.png') no-repeat;
+      }
+      
+      .selectors-ten-by-ten {
+        background-position: 0 0;
+      }
+      .selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
+        background-position: 0 -20px;
+      }
+      .selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
+        background-position: 0 -30px;
+      }
+      .selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
+        background-position: 0 -10px;
+      }
+    CSS
+  end
+
+  it "should render corret sprite with css selectors via magic mixin" do
+    css = render <<-SCSS
+      @import "selectors/*.png";
+      a {
+        @include selectors-sprite(ten-by-ten)
+      }
+    SCSS
+    assert_correct css, <<-CSS
+      .selectors-sprite, a {
+        background: url('/selectors-edfef809e2.png') no-repeat;
+      }
+      
+      a {
+        background-position: 0 0;
+      }
+      a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
+        background-position: 0 -20px;
+      }
+      a:target, a.ten-by-ten_target, a.ten-by-ten-target {
+        background-position: 0 -30px;
+      }
+      a:active, a.ten-by-ten_active, a.ten-by-ten-active {
+        background-position: 0 -10px;
+      }
+    CSS
+  end
+  
+  it "should not render corret sprite with css selectors via magic mixin" do
+    css = render <<-SCSS
+      @import "selectors/*.png";
+      a {
+        $disable-magic-sprite-selectors:true;
+        @include selectors-sprite(ten-by-ten)
+      }
+    SCSS
+    assert_correct css, <<-CSS
+      .selectors-sprite, a {
+        background: url('/selectors-edfef809e2.png') no-repeat;
+      }
+      
+      a {
+        background-position: 0 0;
+      }
+    CSS
+  end
+  
+  it "should raise error on filenames that are not valid sass syntax" do
+    assert_raise(Compass::Error) do
+      css = render <<-SCSS
+        @import "prefix/*.png";
+        a {
+          @include squares-sprite(20-by-20);
+        }
+      SCSS
+    end
+  end
+
+  it "should generate sprite with bad repeat-x dimensions" do
+    css = render <<-SCSS
+      $ko-starbg26x27-repeat: repeat-x;
+      @import "ko/*.png";
+      @include all-ko-sprites;
+    SCSS
+    assert_correct css, <<-CSS
+      .ko-sprite, .ko-default_background, .ko-starbg26x27 {
+        background: url('/ko-cc3f80660d.png') no-repeat;
+      }
+      
+      .ko-default_background {
+        background-position: 0 0;
+      }
+      
+      .ko-starbg26x27 {
+        background-position: 0 -128px;
+      }
+    CSS
+  end
+
+end