inkcite 1.11.0 → 1.12.0

data/test/parser_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Parser do
 
   it 'can resolve name=value parameters' do

data/test/project/helpers.tsv

@@ -36,9 +36,12 @@ small-font-size	11
 big	<div style="font-size: 18px; font-weight: bold; color: $color=#444444$">	</div>
 
 // Bullet-proof buttons
+button-bgcolor	#0099cc
 button-border-radius	5
+button-color  #99ffff
 button-float	center
 button-padding	8
+button-text-shadow	#003d52
 button-width	175
 
 // Dimensions

data/test/renderer/button_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Button do
 
   before do
@@ -10,36 +6,42 @@ describe Inkcite::Renderer::Button do
 
   it 'inherits default settings from the context' do
     Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com"}Learn More{/button}', @view).
-        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#99ffff;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
   end
 
   it 'can have a custom background color' do
     Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" bgcolor=#090}Learn More{/button}', @view).
-        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#009900 border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"padding:8px;text-shadow:0 -1px 0 #003d00\"><a href=\"http://inkceptional.com\" style=\"color:#99ff99;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#009900 border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
   end
 
-  it 'can have a custom bevel that is dynamically colored based on the background color' do
-    Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" bevel=3}Learn More{/button}', @view).
-        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-bottom:3px solid #003d52;border-collapse:separate;border-radius:5px\" width=175><tr>\n<td align=center style=\"padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#99ffff;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+  it 'can have a custom bevel' do
+    Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" bevel=3 bevel-color=#ff0000}Learn More{/button}', @view).
+        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-bottom:3px solid #ff0000;border-collapse:separate;border-radius:5px\" width=175><tr>\n<td align=center style=\"padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
   end
 
   it 'can have a custom font size' do
     Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" font-size=27}Learn More{/button}', @view).
-        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#99ffff;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
   end
 
   it 'has px line-height by default, if specified' do
     Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" font-size=27 line-height=56}Learn More{/button}', @view).
-        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;line-height:56px;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#99ffff;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;line-height:56px;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
   end
 
   it 'accepts line-height specified in em units' do
     Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" font-size=27 line-height=2em}Learn More{/button}', @view).
-        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;line-height:2em;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#99ffff;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;line-height:2em;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
   end
 
   it 'accepts normal line-height' do
     Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" font-size=27 line-height=normal}Learn More{/button}', @view).
-        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;line-height:normal;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#99ffff;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+        must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"font-size:27px;line-height:normal;padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
+  end
+
+  it 'supports letter spacing' do
+    Inkcite::Renderer.render('{button id="learn-more" href="http://inkceptional.com" letter-spacing=2px}Learn More{/button}', @view).
+            must_equal("<a href=\"http://inkceptional.com\" style=\"text-decoration:none\" target=_blank><table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class=\"fill\" style=\"border-radius:5px\" width=175><tr>\n<td align=center style=\"padding:8px;text-shadow:0 -1px 0 #003d52\"><a href=\"http://inkceptional.com\" style=\"color:#0099cc;letter-spacing:2px;text-decoration:none\" target=_blank>Learn More</a></td>\n</tr></table></a>")
   end
+
 end

data/test/renderer/div_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Div do
 
   before do
@@ -89,6 +85,11 @@ describe Inkcite::Renderer::Div do
     @view.media_query.find_by_klass('m1').to_css.must_equal('div[class~="m1"] { line-height:20px !important }')
   end
 
+  it 'can have a custom font color on mobile' do
+    Inkcite::Renderer.render('{div color=#049 mobile-color=#f90}{/div}', @view).must_equal('<div class="m1" style="color:#004499"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('color:#ff9900 !important')
+  end
+
   it 'can inherit a custom font size on mobile from the context' do
     Inkcite::Renderer.render('{div font=responsive}{/div}', @view).must_equal('<div class="m1" style="font-size:20px"></div>')
     @view.media_query.find_by_klass('m1').declarations.must_match('font-size:40px')
@@ -98,4 +99,12 @@ describe Inkcite::Renderer::Div do
     Inkcite::Renderer.render('{div align=right}{/div}', @view).must_equal('<div style="text-align:right"></div>')
   end
 
+  it 'supports automatic background gradient' do
+    Inkcite::Renderer.render('{div bgcolor=#f00 bggradient=#00f}{/div}', @view).must_equal('<div style="background-color:#ff0000;background-image:radial-gradient(circle at center, #ff0000, #0000ff)"></div>')
+  end
+
+  it 'supports custom background gradient' do
+    Inkcite::Renderer.render('{div bggradient="radial-gradient(circle at center, #5b5f66, #1d1f21)"}{/div}', @view).must_equal('<div style="background-image:radial-gradient(circle at center, #5b5f66, #1d1f21)"></div>')
+  end
+
 end

data/test/renderer/element_spec.rb

@@ -1,11 +1,7 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Element do
 
   it 'has configurable attributes' do
-    e = Inkcite::Renderer::Element.new('a', :href => '"http://inkceptional.com"', :target => '"_blank"').to_s.must_equal('<a href="http://inkceptional.com" target="_blank">')
+    Inkcite::Renderer::Element.new('a', :href => '"http://inkceptional.com"', :target => '"_blank"').to_s.must_equal('<a href="http://inkceptional.com" target="_blank">')
   end
 
   it 'has configurable styles which are rendered alphabetically' do

data/test/renderer/footnote_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Footnote do
 
   before do

data/test/renderer/image_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Image do
 
   before do
@@ -20,12 +16,12 @@ describe Inkcite::Renderer::Image do
 
   it 'substitutes a placeholder for a missing image of sufficient size' do
     @view.config[Inkcite::Email::IMAGE_PLACEHOLDERS] = true
-    Inkcite::Renderer.render('{img src=missing.jpg height=50 width=100}', @view).must_equal('<img border=0 height=50 src="//placeholdit.imgix.net/~text?fm=jpg&h=50&txt=missing.jpg%0A%28100%C3%9750%29&txtsize=18&txttrack=0&w=100" style="display:block" width=100>')
+    Inkcite::Renderer.render('{img src=missing.jpg height=50 width=100}', @view).must_equal('<img border=0 height=50 src="http://placeholdit.imgix.net/~text?fm=jpg&h=50&txt=missing.jpg%0A%28100%C3%9750%29&txtsize=18&txttrack=0&w=100" style="display:block" width=100>')
   end
 
   it 'has configurable placeholder text' do
     @view.config[Inkcite::Email::IMAGE_PLACEHOLDERS] = true
-    Inkcite::Renderer.render('{img src=missing.jpg height=50 width=100 fpo="F P O"}', @view).must_equal('<img border=0 height=50 src="//placeholdit.imgix.net/~text?fm=jpg&h=50&txt=F+P+O%0A%28100%C3%9750%29&txtsize=18&txttrack=0&w=100" style="display:block" width=100>')
+    Inkcite::Renderer.render('{img src=missing.jpg height=50 width=100 fpo="F P O"}', @view).must_equal('<img border=0 height=50 src="http://placeholdit.imgix.net/~text?fm=jpg&h=50&txt=F+P+O%0A%28100%C3%9750%29&txtsize=18&txttrack=0&w=100" style="display:block" width=100>')
   end
 
   it 'does not substitute placeholders for small images' do
@@ -49,17 +45,24 @@ describe Inkcite::Renderer::Image do
     Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 display=inline}', @view).must_equal('<img align=absmiddle border=0 height=73 src="images/inkcite.jpg" style="display:inline;vertical-align:middle" width=73>')
   end
 
-  it 'defaults to "small" font styling when alt text is present' do
-    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 alt="Inkcite Avatar"}', @view).must_equal('<img alt="Inkcite Avatar" border=0 height=73 src="images/inkcite.jpg" style="color:#cccccc;display:block;font-size:11px" width=73>')
+  it 'has no font styling unless specified' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 alt="Inkcite Avatar"}', @view).must_equal('<img alt="Inkcite Avatar" border=0 height=73 src="images/inkcite.jpg" style="display:block" width=73>')
   end
 
   it 'supports blank alt text' do
     Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 alt=""}', @view).must_equal('<img alt="" border=0 height=73 src="images/inkcite.jpg" style="display:block" width=73>')
+  end
 
+  it 'supports configurable font attributes' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 font="small" alt="Inkcite Avatar"}', @view).must_equal('<img alt="Inkcite Avatar" border=0 height=73 src="images/inkcite.jpg" style="color:#cccccc;display:block;font-size:11px" width=73>')
   end
 
   it 'has configurable font size' do
-    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 font-size=18 alt="Inkcite Avatar"}', @view).must_equal('<img alt="Inkcite Avatar" border=0 height=73 src="images/inkcite.jpg" style="color:#cccccc;display:block;font-size:18px" width=73>')
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 font-size=18 alt="Inkcite Avatar"}', @view).must_equal('<img alt="Inkcite Avatar" border=0 height=73 src="images/inkcite.jpg" style="display:block;font-size:18px" width=73>')
+  end
+
+  it 'supports font-size override' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 font="small" font-size=18 alt="Inkcite Avatar"}', @view).must_equal('<img alt="Inkcite Avatar" border=0 height=73 src="images/inkcite.jpg" style="color:#cccccc;display:block;font-size:18px" width=73>')
   end
 
   it 'ignores font attributes when alt text is not present' do
@@ -88,11 +91,24 @@ describe Inkcite::Renderer::Image do
   end
 
   it 'supports multi-line alt text' do
-    Inkcite::Renderer.render(%Q({img src=inkcite.jpg height=150 width=100 font=none alt="Multiple\nLine\nAlt\nText"}), @view).must_equal(%Q(<img alt="Multiple\nLine\nAlt\nText" border=0 height=150 src="images/inkcite.jpg" style="display:block;white-space:pre" width=100>))
+    Inkcite::Renderer.render(%Q({img src=inkcite.jpg height=150 width=100 font=none alt="Multiple\nLine\nAlt\nText"}), @view).must_equal(%Q(<img alt="Multiple \nLine \nAlt \nText" border=0 height=150 src="images/inkcite.jpg" style="display:block;white-space:pre" width=100>))
+  end
+
+  it 'supports virtual (\n) multi-line alt text' do
+    Inkcite::Renderer.render(%q({img src=inkcite.jpg height=150 width=100 font=none alt="Multiple\nLine\nAlt\nText"}), @view).must_equal(%Q(<img alt="Multiple \nLine \nAlt \nText" border=0 height=150 src="images/inkcite.jpg" style="display:block;white-space:pre" width=100>))
   end
 
   it 'supports multi-line alt text in production, too' do
-    Inkcite::Renderer.render(%Q({img src=inkcite.jpg height=150 width=100 font=none alt="Multiple\nLine\nAlt\nText"}), Inkcite::Email.new('test/project/').view(:production, :email)).must_equal(%Q(<img alt="Multiple\nLine\nAlt\nText" border=0 height=150 src="http://production.imagehost.com/emails/myemail/inkcite.jpg" style="display:block;white-space:pre" width=100>))
+    Inkcite::Renderer.render(%Q({img src=inkcite.jpg height=150 width=100 font=none alt="Multiple\nLine\nAlt\nText"}), Inkcite::Email.new('test/project/').view(:production, :email)).must_equal(%Q(<img alt="Multiple \nLine \nAlt \nText" border=0 height=150 src="http://production.imagehost.com/emails/myemail/inkcite.jpg" style="display:block;white-space:pre" width=100>))
+    Inkcite::Renderer.render(%q({img src=inkcite.jpg height=150 width=100 font=none alt="Multiple\nLine\nAlt\nText"}), Inkcite::Email.new('test/project/').view(:production, :email)).must_equal(%Q(<img alt="Multiple \nLine \nAlt \nText" border=0 height=150 src="http://production.imagehost.com/emails/myemail/inkcite.jpg" style="display:block;white-space:pre" width=100>))
+  end
+
+  it 'removes HTML from alt text' do
+    Inkcite::Renderer.render(%q({img src=inkcite.jpg height=150 width=100 alt="HTML <i>is not</i> allowed in alt text"}), @view).must_equal(%q(<img alt="HTML is not allowed in alt text" border=0 height=150 src="images/inkcite.jpg" style="display:block" width=100>))
+  end
+
+  it 'can show a different image in Outlook' do
+    Inkcite::Renderer.render(%q({img src=animated.gif outlook-src=static.jpg height=150 width=100 alt="Don't repeat yourself"}), @view).must_equal(%q(<!--[if mso]><img alt="Don't repeat yourself" border=0 height=150 src="images/static.jpg" style="display:block" width=100><![endif]--><!--[if !mso]><!-- --><img alt="Don't repeat yourself" border=0 height=150 src="images/animated.gif" style="display:block" width=100><!--<![endif]-->))
   end
 
 end

data/test/renderer/link_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Link do
 
   before do
@@ -89,4 +85,18 @@ describe Inkcite::Renderer::Link do
     Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" mobile="button"}Order Now{/a}', @view).must_equal('<div><a class="button" href="http://inkceptional.com" style="color:#0099cc;text-decoration:none" target=_blank>Order Now</a></div>')
   end
 
+  it 'detects invalid URLs' do
+    Inkcite::Renderer.render(%Q({a id="oops" href="http://ink\nceptional.com"}), @view)
+    @view.errors.must_include(%Q(Link href appears to be invalid (line 0) [id=oops, href=http://ink\nceptional.com]))
+  end
+
+  it 'accepts invalid URLs if forced' do
+    Inkcite::Renderer.render(%Q({a id="oops" href="http://ink\nceptional.com" force}), @view)
+    @view.errors.must_be_nil
+  end
+
+  it 'supports the block attribute' do
+    Inkcite::Renderer.render(%Q({a id="order-now" href="http://inkceptional.com" block}), @view).must_equal(%Q(<a href="http://inkceptional.com" style="color:#0099cc;display:block;text-decoration:none" target=_blank>))
+  end
+
 end

data/test/renderer/lorem_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Lorem do
 
   before do

data/test/renderer/mobile_image_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::MobileImage do
 
   before do
@@ -9,19 +5,15 @@ describe Inkcite::Renderer::MobileImage do
   end
 
   it 'styles a span to show an image only on mobile' do
-    Inkcite::Renderer.render('{mobile-img src=inkcite-mobile.jpg height=100 width=300}{/mobile-img}', @view).must_equal('<span class="i01 img"></span>')
+    Inkcite::Renderer.render('{mobile-img src=inkcite-mobile.jpg height=100 width=300}', @view).must_equal('<span class="i01 img"></span>')
     @view.media_query.find_by_klass('i01').to_css.must_equal('span[class~="i01"] { background-image:url("images/inkcite-mobile.jpg");height:100px;width:300px }')
     @view.media_query.find_by_klass('img').to_css.must_equal('span[class~="img"] { display: block; background-position: center; background-size: cover; }')
   end
 
   it 'substitutes a placeholder for a missing image of sufficient size' do
     @view.config[Inkcite::Email::IMAGE_PLACEHOLDERS] = true
-    Inkcite::Renderer.render('{mobile-img src=inkcite-mobile.jpg height=100 width=300}{/mobile-img}', @view).must_equal('<span class="i01 img"></span>')
-    @view.media_query.find_by_klass('i01').to_css.must_equal('span[class~="i01"] { background-image:url("//placeholdit.imgix.net/~text?fm=jpg&h=100&txt=inkcite-mobile.jpg%0A%28300%C3%97100%29&txtsize=18&txttrack=0&w=300");height:100px;width:300px }')
-  end
-
-  it 'hides any images it wraps' do
-    Inkcite::Renderer.render('{mobile-img src=inkcite-mobile.jpg height=100 width=300}{img src=inkcite.jpg height=50 width=100}{/mobile-img}', @view).must_equal('<span class="i01 img"><img border=0 class="hide" height=50 src="images/inkcite.jpg" style="display:block" width=100></span>')
+    Inkcite::Renderer.render('{mobile-img src=inkcite-mobile.jpg height=100 width=300}', @view).must_equal('<span class="i01 img"></span>')
+    @view.media_query.find_by_klass('i01').to_css.must_equal('span[class~="i01"] { background-image:url("http://placeholdit.imgix.net/~text?fm=jpg&h=100&txt=inkcite-mobile.jpg%0A%28300%C3%97100%29&txtsize=18&txttrack=0&w=300");height:100px;width:300px }')
   end
 
 end

data/test/renderer/mobile_only_spec.rb

@@ -0,0 +1,21 @@
+describe Inkcite::Renderer::MobileOnly do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'styles a div to show content only on mobile' do
+    Inkcite::Renderer.render('{mobile-only}I will only appear on mobile{/mobile-only}', @view).must_equal('<!--[if !mso 9]><!--><div class="show" style="display:none;max-height:0;overflow:hidden">I will only appear on mobile</div><!--<![endif]-->')
+    @view.media_query.find_by_klass('show').declarations.must_match('display: block !important; max-height: none !important;')
+  end
+
+  it 'supports inline as a boolean attribute' do
+    Inkcite::Renderer.render('800-555-1212{mobile-only inline}&nbsp;&raquo;{/mobile-only}', @view).must_equal('800-555-1212<!--[if !mso 9]><!--><div class="show-inline" style="display:none;max-height:0;overflow:hidden">&nbsp;&raquo;</div><!--<![endif]-->')
+    @view.media_query.find_by_klass('show-inline').declarations.must_match('display: inline !important; max-height: none !important;')
+  end
+
+  it 'does not support fonts or other container attributes' do
+    Inkcite::Renderer.render('{mobile-only font=large}Fonts not supported{/mobile-only}', @view).must_equal('<!--[if !mso 9]><!--><div class="show" style="display:none;max-height:0;overflow:hidden">Fonts not supported</div><!--<![endif]-->')
+  end
+
+end

data/test/renderer/mobile_style_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::MobileStyle do
 
   before do
@@ -26,7 +22,7 @@ describe Inkcite::Renderer::MobileStyle do
 
   it 'adds an inactive responsive style to the context' do
     Inkcite::Renderer.render('{mobile-style name="outlined" style="border: 1px solid #f00"}', @view).must_equal('')
-    rule = @view.media_query.find_by_klass('outlined').to_css.must_equal('[class~="outlined"] { border: 1px solid #f00 }')
+    @view.media_query.find_by_klass('outlined').to_css.must_equal('[class~="outlined"] { border: 1px solid #f00 }')
   end
 
   it 'can be applied to a responsive element' do

data/test/renderer/outlook_background_spec.rb

@@ -0,0 +1,61 @@
+describe Inkcite::Renderer::OutlookBackground do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'warns when an image is missing' do
+    Inkcite::Renderer.render('{outlook-bg src=missing.jpg}', @view)
+    @view.errors.must_include('Missing image (line 0) [src=missing.jpg]')
+  end
+
+  it 'defaults to filling the available horizontal space' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="mso-width-percent:1000" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+  it 'supports 100% width' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png width=100%}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="mso-width-percent:1000" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+  it 'supports fill width' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png width=fill}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="mso-width-percent:1000" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+  it 'supports an optional width in pixels' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png width=120}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="width:120px" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+  it 'supports an optional height in pixels' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png bgcolor=#7bceeb height=92 width=120}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="height:92px;width:120px" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill color="#7bceeb" src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+
+  it 'supports an optional background color' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png bgcolor=#7bceeb width=120}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="width:120px" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill color="#7bceeb" src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+  it 'is automatically injected by the td helper' do
+    Inkcite::Renderer.render('{td background=https://i.imgur.com/YJOX1PC.png bgcolor=#7bceeb width=120 outlook-bg}{/td}', @view).must_equal(%Q(<td bgcolor=#7bceeb style="background:#7bceeb url(https://i.imgur.com/YJOX1PC.png)" width=120>\n<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="width:120px" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill color="#7bceeb" src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->\n</td>))
+  end
+
+  it 'defaults to fill when injected by a td helper sans dimensions' do
+    Inkcite::Renderer.render('{td background=https://i.imgur.com/YJOX1PC.png bgcolor=#7bceeb outlook-bg}{/td}', @view).must_equal(%Q(<td bgcolor=#7bceeb style="background:#7bceeb url(https://i.imgur.com/YJOX1PC.png)">\n<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="mso-width-percent:1000" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill color="#7bceeb" src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->\n</td>))
+  end
+
+  it 'inherits height from the parent td if present' do
+    Inkcite::Renderer.render('{td background=https://i.imgur.com/YJOX1PC.png bgcolor=#7bceeb height=92 width=120 outlook-bg}{/td}', @view).must_equal(%Q(<td bgcolor=#7bceeb height=92 style="background:#7bceeb url(https://i.imgur.com/YJOX1PC.png)" width=120>\n<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="height:92px;width:120px" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill color="#7bceeb" src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0"><div><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->\n</td>))
+  end
+
+  it 'is ignored by the td helper if background is missing' do
+    Inkcite::Renderer.render('{td bgcolor=#7bceeb outlook-bg}{/td}', @view).must_equal(%Q(<td bgcolor=#7bceeb></td>))
+  end
+
+  it 'supports the font attribute' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png font=large}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="mso-width-percent:1000" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div style="color:#ff0000;font-family:serif;font-size:24px;font-weight:bold;line-height:24px"><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+  it 'supports font-related attributes' do
+    Inkcite::Renderer.render('{outlook-bg src=https://i.imgur.com/YJOX1PC.png font-size=18 line-height=27}{/outlook-bg}', @view).must_equal('<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="mso-width-percent:1000" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill src="https://i.imgur.com/YJOX1PC.png" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true"><div style="font-size:18px;line-height:27px"><![endif]--><!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->')
+  end
+
+end

data/test/renderer/redacted_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Redacted do
 
   before do

data/test/renderer/social_spec.rb

@@ -0,0 +1,53 @@
+describe Inkcite::Renderer::Social do
+
+  before do
+    @email = Inkcite::Email.new('test/project/')
+    @view = @email.view(:development, :email)
+  end
+
+  it 'supports the noicon attribute' do
+
+    # Need to delete the image if it exists because tests can run
+    # in non-linear order
+    twitter_icon = @email.image_path('twitter.png')
+    File.delete(twitter_icon) if File.exist?(twitter_icon)
+    Inkcite::Renderer.render('{twitter noicon href="http://inkcite.readme.io" text="Inkcite #MakeEmailBetter"}', @view).must_equal('<a href="https://twitter.com/share?url=http://inkcite.readme.io&text=Inkcite%20%23MakeEmailBetter" style="color:#0099cc;text-decoration:none" target=_blank>Tweet</a>')
+    File.exist?(@view.email.image_path('twitter.png')).must_equal(false)
+  end
+
+  it 'supports sharing on Twitter' do
+    Inkcite::Renderer.render('{twitter href="http://inkcite.readme.io" text="Inkcite #MakeEmailBetter"}', @view).must_equal('<a href="https://twitter.com/share?url=http://inkcite.readme.io&text=Inkcite%20%23MakeEmailBetter" style="color:#0099cc;font-size:15px;line-height:15px;text-decoration:none" target=_blank><img align=absmiddle alt="Twitter" border=0 height=15 src="images/twitter.png" style="display:inline;vertical-align:middle" width=19> Tweet</a>')
+  end
+
+  it 'copies the social sharing icons into the project' do
+    Inkcite::Renderer.render('{facebook href="http://inkcite.readme.io" text="Inkcite #MakeEmailBetter"}', @view)
+    File.exist?(@view.email.image_path('facebook.png')).must_equal(true)
+  end
+
+  it 'supports a configurable icon size' do
+    Inkcite::Renderer.render('{twitter size=11 href="http://inkcite.readme.io" text="Inkcite #MakeEmailBetter"}', @view).must_equal('<a href="https://twitter.com/share?url=http://inkcite.readme.io&text=Inkcite%20%23MakeEmailBetter" style="color:#0099cc;font-size:11px;line-height:11px;text-decoration:none" target=_blank><img align=absmiddle alt="Twitter" border=0 height=11 src="images/twitter.png" style="display:inline;vertical-align:middle" width=14> Tweet</a>')
+  end
+
+  it 'supports sharing on Facebook' do
+    Inkcite::Renderer.render('{facebook href="http://inkcite.readme.io" text="Inkcite #MakeEmailBetter"}', @view).must_equal('<a href="https://www.facebook.com/sharer/sharer.php?u=http://inkcite.readme.io&t=Inkcite%20%23MakeEmailBetter" style="color:#0099cc;font-size:15px;line-height:15px;text-decoration:none" target=_blank><img align=absmiddle alt="Facebook" border=0 height=15 src="images/facebook.png" style="display:inline;vertical-align:middle" width=15> Share</a>')
+  end
+
+  it 'supports sharing on Pintrest' do
+    Inkcite::Renderer.render('{pintrest href="http://inkcite.readme.io" text="Inkcite #MakeEmailBetter" media="http://c1.staticflickr.com/9/8683/16620137238_71e78abd1d_n.jpg"}', @view).must_equal('<a href="https://www.pinterest.com/pin/create/button/?url=http://inkcite.readme.io&media=http://c1.staticflickr.com/9/8683/16620137238_71e78abd1d_n.jpg&description=Inkcite%20%23MakeEmailBetter" style="color:#CB2027;font-size:15px;line-height:15px;text-decoration:none" target=_blank><img align=absmiddle alt="Pintrest" border=0 height=15 src="images/pintrest.png" style="display:inline;vertical-align:middle" width=15> Pin it</a>')
+  end
+
+  it 'supports the nowrap attribute' do
+    Inkcite::Renderer.render('{twitter href="http://inkcite.readme.io" text="Inkcite #MakeEmailBetter" nowrap}', @view).must_equal('<a href="https://twitter.com/share?url=http://inkcite.readme.io&text=Inkcite%20%23MakeEmailBetter" style="color:#0099cc;font-size:15px;line-height:15px;text-decoration:none;white-space:nowrap" target=_blank><img align=absmiddle alt="Twitter" border=0 height=15 src="images/twitter.png" style="display:inline;vertical-align:middle" width=19> Tweet</a>')
+  end
+
+  Minitest.after_run do
+    email = Inkcite::Email.new('test/project/')
+
+    %w( facebook.png pintrest.png twitter.png ).each do |img|
+      image_path = email.image_path(img)
+      File.delete(image_path) if File.exist?(image_path)
+    end
+
+  end
+
+end

data/test/renderer/span_spec.rb

@@ -1,7 +1,3 @@
-require 'minitest/spec'
-require 'minitest/autorun'
-require 'inkcite'
-
 describe Inkcite::Renderer::Span do
 
   before do