added test for sprite command and removed specs
This commit is contained in:
Scott Davis
parent
0f8cd61436
commit
b9234e50d0
@ -39,7 +39,7 @@ module Compass
|
|||||||
|
|
||||||
def perform
|
def perform
|
||||||
relative_uri = options[:uri].gsub(/^#{Compass.configuration.images_dir}\//, '')
|
relative_uri = options[:uri].gsub(/^#{Compass.configuration.images_dir}\//, '')
|
||||||
sprites = Compass::SpriteImporter.new(relative_uri, Compass.sass_engine_options)
|
sprites = Compass::SpriteImporter.new(:uri => relative_uri, :options => Compass.sass_engine_options)
|
||||||
options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{sprites.name}.#{Compass.configuration.preferred_syntax}")
|
options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{sprites.name}.#{Compass.configuration.preferred_syntax}")
|
||||||
options[:skip_overrides] ||= false
|
options[:skip_overrides] ||= false
|
||||||
contents = sprites.content_for_images(options[:skip_overrides])
|
contents = sprites.content_for_images(options[:skip_overrides])
|
||||||
|
|||||||
@ -1,55 +0,0 @@
|
|||||||
require 'spec_helper'
|
|
||||||
require 'compass/commands'
|
|
||||||
require 'compass/exec'
|
|
||||||
require 'compass/commands/sprite'
|
|
||||||
describe Compass::Commands::Sprite do
|
|
||||||
def config_data
|
|
||||||
return <<-CONFIG
|
|
||||||
images_path = #{@images_tmp_path.inspect}
|
|
||||||
CONFIG
|
|
||||||
end
|
|
||||||
|
|
||||||
def create_temp_cli_dir
|
|
||||||
directory = File.join(File.expand_path('../', __FILE__), 'test')
|
|
||||||
::FileUtils.mkdir_p directory
|
|
||||||
@test_dir = directory
|
|
||||||
end
|
|
||||||
|
|
||||||
def run_compass_with_options(options)
|
|
||||||
output = 'foo'
|
|
||||||
::Dir.chdir @test_dir
|
|
||||||
%x{compass #{options.join(' ')}}
|
|
||||||
end
|
|
||||||
|
|
||||||
def options_to_cli(options)
|
|
||||||
options.map.flatten!
|
|
||||||
end
|
|
||||||
|
|
||||||
let(:test_dir) { @test_dir }
|
|
||||||
before :each do
|
|
||||||
@before_dir = ::Dir.pwd
|
|
||||||
create_temp_cli_dir
|
|
||||||
create_sprite_temp
|
|
||||||
File.open(File.join(@test_dir, 'config.rb'), 'w') do |f|
|
|
||||||
f << config_data
|
|
||||||
end
|
|
||||||
end
|
|
||||||
after :each do
|
|
||||||
::Dir.chdir @before_dir
|
|
||||||
clean_up_sprites
|
|
||||||
if File.exists?(@test_dir)
|
|
||||||
::FileUtils.rm_r @test_dir
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should create sprite file" do
|
|
||||||
run_compass_with_options(['sprite', "-f", "stylesheet.scss", "'#{@images_tmp_path}/*.png'"]).to_i.should == 0
|
|
||||||
File.exists?(File.join(test_dir, 'stylesheet.scss')).should be_true
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should fail gracfuly when giving bad arguments" do
|
|
||||||
pending
|
|
||||||
end
|
|
||||||
|
|
||||||
|
|
||||||
end
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
require 'spec_helper'
|
|
||||||
describe Compass::SassExtensions::Sprites::Base do
|
|
||||||
|
|
||||||
before :each do
|
|
||||||
@images_src_path = File.join(File.dirname(__FILE__), '..', '..', '..', 'test_project', 'public', 'images')
|
|
||||||
@images_tmp_path = File.join(File.dirname(__FILE__), '..', '..', '..', 'test_project', 'public', 'images-tmp')
|
|
||||||
FileUtils.cp_r @images_src_path, @images_tmp_path
|
|
||||||
config = Compass::Configuration::Data.new('config')
|
|
||||||
config.images_path = @images_tmp_path
|
|
||||||
Compass.add_configuration(config)
|
|
||||||
Compass.configure_sass_plugin!
|
|
||||||
#fix this eww
|
|
||||||
options = Compass.sass_engine_options.extend Compass::SassExtensions::Functions::Sprites::VariableReader
|
|
||||||
@map = Compass::SpriteImporter.new("selectors/*.png", options)
|
|
||||||
@base = Compass::SassExtensions::Sprites::Base.new(@map.sprite_names.map{|n| "selectors/#{n}.png"}, @map.path, 'selectors', @map.sass_engine, @map.options)
|
|
||||||
end
|
|
||||||
|
|
||||||
after :each do
|
|
||||||
FileUtils.rm_r @images_tmp_path
|
|
||||||
end
|
|
||||||
|
|
||||||
subject { @base }
|
|
||||||
|
|
||||||
its(:size) { should == [10,40] }
|
|
||||||
its(:sprite_names) { should == @map.sprite_names }
|
|
||||||
its(:image_filenames) { should == Dir["#{@images_tmp_path}/selectors/*.png"].sort }
|
|
||||||
its(:generation_required?) { should be_true }
|
|
||||||
its(:uniqueness_hash) { should == 'ef52c5c63a'}
|
|
||||||
its(:outdated?) { should be_true }
|
|
||||||
its(:filename) { should == File.join(@images_tmp_path, "#{@base.path}-s#{@base.uniqueness_hash}.png")}
|
|
||||||
|
|
||||||
it "should return the 'ten-by-ten' image" do
|
|
||||||
subject.image_for('ten-by-ten').name.should == 'ten-by-ten'
|
|
||||||
subject.image_for('ten-by-ten').should be_a Compass::SassExtensions::Sprites::Image
|
|
||||||
end
|
|
||||||
|
|
||||||
%w(target hover active).each do |selector|
|
|
||||||
it "should have a #{selector}" do
|
|
||||||
subject.send(:"has_#{selector}?", 'ten-by-ten').should be_true
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should return #{selector} image class" do
|
|
||||||
subject.image_for('ten-by-ten').send(:"#{selector}").name.should == "ten-by-ten_#{selector}"
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
||||||
context "#generate" do
|
|
||||||
before { @base.generate }
|
|
||||||
it "should generate sprite" do
|
|
||||||
File.exists?(@base.filename).should be_true
|
|
||||||
end
|
|
||||||
|
|
||||||
its(:generation_required?) { should be_false }
|
|
||||||
its(:outdated?) { should be_false }
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
||||||
@ -1,161 +0,0 @@
|
|||||||
require 'spec_helper'
|
|
||||||
require 'compass/sass_extensions/sprites/image'
|
|
||||||
|
|
||||||
describe Compass::SassExtensions::Sprites::Image do
|
|
||||||
let(:sprite_filename) { 'squares/ten-by-ten.png' }
|
|
||||||
let(:sprite_path) { File.join(images_src_path, sprite_filename) }
|
|
||||||
let(:sprite_name) { File.basename(sprite_filename, '.png') }
|
|
||||||
let(:parent) do
|
|
||||||
mock
|
|
||||||
end
|
|
||||||
before do
|
|
||||||
parent.stubs(:image_for).with('ten-by-ten').returns(image)
|
|
||||||
parent.stubs(:image_for).with('ten-by-ten_hover').returns(hover_image)
|
|
||||||
end
|
|
||||||
let(:image) { self.class.describes.new(parent, File.join(sprite_filename), options)}
|
|
||||||
let(:hover_image) { self.class.describes.new(parent, File.join('selectors/ten-by-ten_hover.png'), options)}
|
|
||||||
let(:digest) { Digest::MD5.file(sprite_path).hexdigest }
|
|
||||||
subject { image }
|
|
||||||
|
|
||||||
before {
|
|
||||||
file = StringIO.new("images_path = #{images_src_path.inspect}\n")
|
|
||||||
Compass.add_configuration(file, "sprite_config")
|
|
||||||
}
|
|
||||||
|
|
||||||
describe '#initialize' do
|
|
||||||
its(:name) { should == sprite_name }
|
|
||||||
its(:file) { should == sprite_path }
|
|
||||||
its(:relative_file) { should == sprite_filename }
|
|
||||||
its(:width) { should == 10 }
|
|
||||||
its(:height) { should == 10 }
|
|
||||||
its(:digest) { should == digest }
|
|
||||||
its(:top) { should == 0 }
|
|
||||||
its(:left) { should == 0 }
|
|
||||||
end
|
|
||||||
|
|
||||||
let(:get_var_expects) { nil }
|
|
||||||
let(:get_var_return) { nil }
|
|
||||||
|
|
||||||
let(:options) {
|
|
||||||
options = mock
|
|
||||||
options.stubs(:get_var).with(anything).returns(nil)
|
|
||||||
options.stubs(:get_var).with(get_var_expects).returns(get_var_return)
|
|
||||||
options
|
|
||||||
}
|
|
||||||
|
|
||||||
describe '#parent' do
|
|
||||||
context '_hover' do
|
|
||||||
subject { hover_image }
|
|
||||||
its(:parent) { should == image }
|
|
||||||
end
|
|
||||||
context 'no parent' do
|
|
||||||
subject { image }
|
|
||||||
its(:parent) { should be_nil }
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
describe '#repeat' do
|
|
||||||
let(:type) { nil }
|
|
||||||
let(:get_var_return) { OpenStruct.new(:value => type) }
|
|
||||||
|
|
||||||
context 'specific image' do
|
|
||||||
let(:type) { 'specific' }
|
|
||||||
let(:get_var_expects) { "#{sprite_name}-repeat" }
|
|
||||||
|
|
||||||
its(:repeat) { should == type }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'global' do
|
|
||||||
let(:type) { 'global' }
|
|
||||||
let(:get_var_expects) { 'repeat' }
|
|
||||||
|
|
||||||
its(:repeat) { should == type }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'default' do
|
|
||||||
let(:get_var_expects) { nil }
|
|
||||||
|
|
||||||
its(:repeat) { should == "no-repeat" }
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
describe '#position' do
|
|
||||||
let(:type) { nil }
|
|
||||||
let(:get_var_return) { type }
|
|
||||||
|
|
||||||
context 'specific image' do
|
|
||||||
let(:type) { 'specific' }
|
|
||||||
let(:get_var_expects) { "#{sprite_name}-position" }
|
|
||||||
|
|
||||||
its(:position) { should == type }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'global' do
|
|
||||||
let(:type) { 'global' }
|
|
||||||
let(:get_var_expects) { 'position' }
|
|
||||||
|
|
||||||
its(:position) { should == type }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'default' do
|
|
||||||
let(:get_var_expects) { nil }
|
|
||||||
|
|
||||||
its(:position) { should == Sass::Script::Number.new(0, ["px"]) }
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
describe '#spacing' do
|
|
||||||
let(:type) { nil }
|
|
||||||
let(:get_var_return) { OpenStruct.new(:value => type) }
|
|
||||||
|
|
||||||
context 'specific image' do
|
|
||||||
let(:type) { 'specific' }
|
|
||||||
let(:get_var_expects) { "#{sprite_name}-spacing" }
|
|
||||||
|
|
||||||
its(:spacing) { should == type }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'global' do
|
|
||||||
let(:type) { 'global' }
|
|
||||||
let(:get_var_expects) { 'spacing' }
|
|
||||||
|
|
||||||
its(:spacing) { should == type }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'default' do
|
|
||||||
let(:get_var_expects) { nil }
|
|
||||||
|
|
||||||
its(:spacing) { should == Sass::Script::Number.new(0).value }
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
describe '#offset' do
|
|
||||||
before { image.stubs(:position).returns(stub_position) }
|
|
||||||
|
|
||||||
let(:offset) { 100 }
|
|
||||||
let(:stub_position) {
|
|
||||||
stub(:value => offset)
|
|
||||||
}
|
|
||||||
|
|
||||||
context 'unitless' do
|
|
||||||
before { stub_position.stubs(:unitless?).returns(true) }
|
|
||||||
before { stub_position.stubs(:unit_str).returns('em') }
|
|
||||||
|
|
||||||
its(:offset) { should == offset }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'pixels' do
|
|
||||||
before { stub_position.stubs(:unitless?).returns(false) }
|
|
||||||
before { stub_position.stubs(:unit_str).returns('px') }
|
|
||||||
|
|
||||||
its(:offset) { should == offset }
|
|
||||||
end
|
|
||||||
|
|
||||||
context 'neither, use 0' do
|
|
||||||
before { stub_position.stubs(:unitless?).returns(false) }
|
|
||||||
before { stub_position.stubs(:unit_str).returns('em') }
|
|
||||||
|
|
||||||
its(:offset) { should == 0 }
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
require 'spec_helper'
|
|
||||||
require 'fakefs/spec_helpers'
|
|
||||||
require 'timecop'
|
|
||||||
|
|
||||||
describe Compass::SpriteImporter do
|
|
||||||
include FakeFS::SpecHelpers
|
|
||||||
|
|
||||||
let(:sprite_map) { self.class.describes.new(uri, options) }
|
|
||||||
let(:options) { { :test => :test2 } }
|
|
||||||
|
|
||||||
subject { sprite_map }
|
|
||||||
|
|
||||||
let(:path) { 'path' }
|
|
||||||
let(:dir) { "dir/#{name}" }
|
|
||||||
let(:name) { 'subdir' }
|
|
||||||
|
|
||||||
let(:sprite_path) { File.join(path, dir) }
|
|
||||||
let(:files) { (1..3).collect { |i| File.join(sprite_path, "#{i}.png") } }
|
|
||||||
let(:expanded_files) { files.collect { |file| File.expand_path(file) } }
|
|
||||||
|
|
||||||
let(:configuration) { stub(:images_path => path) }
|
|
||||||
let(:mtime) { Time.now - 30 }
|
|
||||||
|
|
||||||
before {
|
|
||||||
Compass.stubs(:configuration).returns(configuration)
|
|
||||||
|
|
||||||
FileUtils.mkdir_p(sprite_path)
|
|
||||||
Timecop.freeze(mtime) do
|
|
||||||
files.each { |file| File.open(file, 'w') }
|
|
||||||
end
|
|
||||||
Timecop.return
|
|
||||||
}
|
|
||||||
|
|
||||||
describe '#initialize' do
|
|
||||||
let(:uri) { 'dir/subdir/*.png' }
|
|
||||||
|
|
||||||
its(:uri) { should == uri }
|
|
||||||
its(:path) { should == dir }
|
|
||||||
its(:name) { should == name }
|
|
||||||
|
|
||||||
its(:files) { should == expanded_files }
|
|
||||||
|
|
||||||
its(:sass_options) { should == options.merge(:filename => name, :syntax => :scss, :importer => sprite_map) }
|
|
||||||
|
|
||||||
|
|
||||||
it "should have a correct mtime" do
|
|
||||||
sprite_map.mtime(uri, subject.sass_options).should == mtime
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should have a test for the sass engine" do
|
|
||||||
pending 'sass'
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
require 'spec_helper'
|
|
||||||
require 'fakefs/spec_helpers'
|
|
||||||
|
|
||||||
describe Compass::Sprites do
|
|
||||||
end
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
$LOAD_PATH.unshift(File.dirname(__FILE__))
|
|
||||||
$LOAD_PATH.unshift(File.join(File.dirname(__FILE__), '..', 'lib'))
|
|
||||||
require 'rubygems'
|
|
||||||
require 'compass'
|
|
||||||
require 'rspec'
|
|
||||||
require 'rspec/autorun'
|
|
||||||
require 'mocha'
|
|
||||||
|
|
||||||
module CompassGlobalInclude
|
|
||||||
class << self
|
|
||||||
def included(klass)
|
|
||||||
klass.instance_eval do
|
|
||||||
let(:images_src_path) { File.join(File.dirname(__FILE__), 'test_project', 'public', 'images') }
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
module CompassSpriteHelpers
|
|
||||||
def create_sprite_temp
|
|
||||||
::FileUtils.cp_r @images_src_path, @images_tmp_path
|
|
||||||
end
|
|
||||||
|
|
||||||
def clean_up_sprites
|
|
||||||
::FileUtils.rm_r @images_tmp_path
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
RSpec.configure do |config|
|
|
||||||
config.include(CompassGlobalInclude)
|
|
||||||
config.include(CompassSpriteHelpers)
|
|
||||||
config.before :each do
|
|
||||||
@images_src_path = File.join(File.dirname(__FILE__), 'test_project', 'public', 'images')
|
|
||||||
@images_tmp_path = File.join(File.dirname(__FILE__), 'test_project', 'public', 'images-tmp')
|
|
||||||
end
|
|
||||||
config.mock_with :mocha
|
|
||||||
end
|
|
||||||
@ -1,571 +0,0 @@
|
|||||||
require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
|
|
||||||
require 'digest/md5'
|
|
||||||
|
|
||||||
describe Compass::Sprites do
|
|
||||||
|
|
||||||
before :each do
|
|
||||||
create_sprite_temp
|
|
||||||
file = StringIO.new("images_path = #{@images_tmp_path.inspect}\n")
|
|
||||||
Compass.add_configuration(file, "sprite_config")
|
|
||||||
Compass.configure_sass_plugin!
|
|
||||||
end
|
|
||||||
|
|
||||||
after :each do
|
|
||||||
clean_up_sprites
|
|
||||||
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
|
|
||||||
|
|
||||||
#Callbacks
|
|
||||||
describe 'callbacks' do
|
|
||||||
it "should fire on_sprite_saved" do
|
|
||||||
saved = false
|
|
||||||
path = nil
|
|
||||||
Compass.configuration.on_sprite_saved {|filepath| path = filepath; saved = true }
|
|
||||||
render <<-SCSS
|
|
||||||
@import "squares/*.png";
|
|
||||||
@include all-squares-sprites;
|
|
||||||
SCSS
|
|
||||||
saved.should eq true
|
|
||||||
path.should be_kind_of String
|
|
||||||
end
|
|
||||||
it "should fire on_sprite_generated" do
|
|
||||||
saved = false
|
|
||||||
sprite_data = nil
|
|
||||||
Compass.configuration.on_sprite_generated {|data| sprite_data = data; saved = true }
|
|
||||||
render <<-SCSS
|
|
||||||
@import "squares/*.png";
|
|
||||||
@include all-squares-sprites;
|
|
||||||
SCSS
|
|
||||||
sprite_data.should be_kind_of ChunkyPNG::Image
|
|
||||||
saved.should eq true
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
# DEFAULT USAGE:
|
|
||||||
it "should generate sprite classes" do
|
|
||||||
css = render <<-SCSS
|
|
||||||
@import "squares/*.png";
|
|
||||||
@include all-squares-sprites;
|
|
||||||
SCSS
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [20, 30]
|
|
||||||
image_md5('squares-*.png').should == '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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-CSS
|
|
||||||
.circles {
|
|
||||||
background: url('/squares-161c60ad78.png') no-repeat;
|
|
||||||
}
|
|
||||||
CSS
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [20, 30]
|
|
||||||
image_md5('squares-*.png').should == '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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [20, 30]
|
|
||||||
image_md5('squares-*.png').should == '652b67f5e9092520d6f26caae7e18012'
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should repeat the image" do
|
|
||||||
css = render <<-SCSS
|
|
||||||
$squares-repeat: repeat;
|
|
||||||
@import "squares/*.png";
|
|
||||||
@include all-squares-sprites;
|
|
||||||
SCSS
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [20, 30]
|
|
||||||
image_md5('squares-*.png').should == '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
|
|
||||||
css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [30, 30]
|
|
||||||
image_md5('squares-*.png').should == '2fb19ef9c83018c93c6f147af3a56cb2'
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should provide a nice errors for lemonade's old users" do
|
|
||||||
proc do
|
|
||||||
render <<-SCSS
|
|
||||||
.squares {
|
|
||||||
background: sprite-url("squares/*.png") no-repeat;
|
|
||||||
}
|
|
||||||
SCSS
|
|
||||||
end.should raise_error Sass::SyntaxError,
|
|
||||||
%q(The first argument to sprite-url() must be a sprite map. See http://beta.compass-style.org/help/tutorials/spriting/ for more information.)
|
|
||||||
proc do
|
|
||||||
render <<-SCSS
|
|
||||||
.squares {
|
|
||||||
background: sprite-image("squares/twenty-by-twenty.png") no-repeat;
|
|
||||||
}
|
|
||||||
SCSS
|
|
||||||
end.should raise_error Sass::SyntaxError,
|
|
||||||
%q(The sprite-image() function has been replaced by sprite(). See http://beta.compass-style.org/help/tutorials/spriting/ for more information.)
|
|
||||||
proc do
|
|
||||||
render <<-SCSS
|
|
||||||
@import "squares/*.png";
|
|
||||||
|
|
||||||
.squares {
|
|
||||||
background: sprite-position("squares/twenty-by-twenty.png") no-repeat;
|
|
||||||
}
|
|
||||||
SCSS
|
|
||||||
end.should raise_error Sass::SyntaxError,
|
|
||||||
%q(The first argument to sprite-position() must be a sprite map. See http://beta.compass-style.org/help/tutorials/spriting/ for more information.)
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should work even if @import is missing" do
|
|
||||||
actual_css = render <<-SCSS
|
|
||||||
.squares {
|
|
||||||
background: sprite(sprite-map("squares/*.png"), twenty-by-twenty) no-repeat;
|
|
||||||
}
|
|
||||||
SCSS
|
|
||||||
actual_css.should == <<-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
|
|
||||||
image_size('squares-*.png').should == [20, 40]
|
|
||||||
css.should == <<-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
|
|
||||||
css.should == <<-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
|
|
||||||
css.should == <<-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
|
|
||||||
css.should == <<-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
|
|
||||||
lambda do
|
|
||||||
render <<-SCSS
|
|
||||||
@import "prefix/*.png";
|
|
||||||
a {
|
|
||||||
@include squares-sprite(20-by-20);
|
|
||||||
}
|
|
||||||
SCSS
|
|
||||||
end.should raise_error Compass::Error
|
|
||||||
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
|
|
||||||
css.should == <<-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
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue
Block a user