inkcite 1.0.0

data/test/project/source.txt

@@ -0,0 +1,6 @@
+This is the plain-text version of your email.
+
+<% if production? %>
+This email was sent to [email].  {a id="unsubscribe" href=#}Click here to unsubscribe{/a}.
+Using ERB, this unsubscribe notice will only appear in the 'email' format of this project.
+<% end %>

data/test/renderer/button_spec.rb

@@ -0,0 +1,45 @@
+require 'minitest/spec'
+require 'minitest/autorun'
+require 'inkcite'
+
+describe Inkcite::Renderer::Button do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  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>")
+  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>")
+  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>")
+  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>")
+  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>")
+  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>")
+  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>")
+  end
+end

data/test/renderer/div_spec.rb

@@ -0,0 +1,101 @@
+require 'minitest/spec'
+require 'minitest/autorun'
+require 'inkcite'
+
+describe Inkcite::Renderer::Div do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'can have empty parameters' do
+    Inkcite::Renderer.render('{div}{/div}', @view).must_equal('<div></div>')
+  end
+
+  it 'can have a custom font color' do
+    Inkcite::Renderer.render('{div color=#f90}{/div}', @view).must_equal('<div style="color:#ff9900"></div>')
+  end
+
+  it 'can have a custom font family' do
+    Inkcite::Renderer.render('{div font-family="Comic Sans"}{/div}', @view).must_equal('<div style="font-family:Comic Sans"></div>')
+  end
+
+  it 'can have a custom font size' do
+    Inkcite::Renderer.render('{div font-size=18}{/div}', @view).must_equal('<div style="font-size:18px"></div>')
+  end
+
+  it 'can have a custom font weight' do
+    Inkcite::Renderer.render('{div font-weight=bold}{/div}', @view).must_equal('<div style="font-weight:bold"></div>')
+  end
+
+  it 'can have a custom line height' do
+    Inkcite::Renderer.render('{div line-height=15}{/div}', @view).must_equal('<div style="line-height:15px"></div>')
+  end
+
+  it 'can inherit a font from the context' do
+    Inkcite::Renderer.render('{div font=large}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-size:24px;font-weight:bold;line-height:24px"></div>')
+  end
+
+  it 'can override the font size of an inherited font' do
+    Inkcite::Renderer.render('{div font=large font-size=8}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-size:8px;font-weight:bold;line-height:24px"></div>')
+    Inkcite::Renderer.render('{div font=large font-size=none}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-weight:bold;line-height:24px"></div>')
+  end
+
+  it 'can override the color of an inherited font' do
+    Inkcite::Renderer.render('{div font=large color=#00f}{/div}', @view).must_equal('<div style="color:#0000ff;font-family:serif;font-size:24px;font-weight:bold;line-height:24px"></div>')
+    Inkcite::Renderer.render('{div font=large color=none}{/div}', @view).must_equal('<div style="font-family:serif;font-size:24px;font-weight:bold;line-height:24px"></div>')
+  end
+
+  it 'can override the font weight of an inherited font' do
+    Inkcite::Renderer.render('{div font=large font-weight=normal}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-size:24px;font-weight:normal;line-height:24px"></div>')
+    Inkcite::Renderer.render('{div font=large font-weight=none}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-size:24px;line-height:24px"></div>')
+  end
+
+  it 'can override the line height of an inherited font' do
+    Inkcite::Renderer.render('{div font=large line-height=12}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-size:24px;font-weight:bold;line-height:12px"></div>')
+    Inkcite::Renderer.render('{div font=large line-height=normal}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-size:24px;font-weight:bold;line-height:normal"></div>')
+    Inkcite::Renderer.render('{div font=large line-height=none}{/div}', @view).must_equal('<div style="color:#ff0000;font-family:serif;font-size:24px;font-weight:bold"></div>')
+  end
+
+  it 'can have a text shadow' do
+    Inkcite::Renderer.render('{div shadow=#99c}{/div}', @view).must_equal('<div style="text-shadow:0 1px 0 #9999cc"></div>')
+    Inkcite::Renderer.render('{div shadow=#9c9 shadow-blur=2}{/div}', @view).must_equal('<div style="text-shadow:0 1px 2px #99cc99"></div>')
+    Inkcite::Renderer.render('{div shadow=#c99 shadow-offset=-1}{/div}', @view).must_equal('<div style="text-shadow:0 -1px 0 #cc9999"></div>')
+  end
+
+  it 'can have a background color' do
+    Inkcite::Renderer.render('{div bgcolor=#06c}{/div}', @view).must_equal('<div style="background-color:#0066cc"></div>')
+  end
+
+  it 'can be responsive' do
+    Inkcite::Renderer.render('{div mobile=hide}{/div}', @view).must_equal('<div class="hide"></div>')
+  end
+
+  it 'can have height in pixels' do
+    Inkcite::Renderer.render('{div height=15}{/div}', @view).must_equal('<div style="height:15px"></div>')
+  end
+
+  it 'can have custom letter spacing' do
+    Inkcite::Renderer.render('{div letter-spacing=3}{/div}', @view).must_equal('<div style="letter-spacing:3px"></div>')
+  end
+
+  it 'can have a custom font size on mobile' do
+    Inkcite::Renderer.render('{div font-size=15 mobile-font-size=20}{/div}', @view).must_equal('<div class="m1" style="font-size:15px"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('font-size:20px !important')
+  end
+
+  it 'can have a custom line height on mobile' do
+    Inkcite::Renderer.render('{div line-height=15 mobile-line-height=20}{/div}', @view).must_equal('<div class="m1" style="line-height:15px"></div>')
+    @view.media_query.find_by_klass('m1').to_css.must_equal('div[class~="m1"] { line-height:20px !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')
+  end
+
+  it 'supports text alignment' do
+    Inkcite::Renderer.render('{div align=right}{/div}', @view).must_equal('<div style="text-align:right"></div>')
+  end
+
+end

data/test/renderer/element_spec.rb

@@ -0,0 +1,31 @@
+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">')
+  end
+
+  it 'has configurable styles which are rendered alphabetically' do
+    e = Inkcite::Renderer::Element.new('div')
+    e.style[:padding] = '5px'
+    e.style[:border] = '1px solid #f00'
+    e.to_s.must_equal('<div style="border:1px solid #f00;padding:5px">')
+  end
+
+  it 'has a unique, alphabetized list of classes' do
+    e = Inkcite::Renderer::Element.new('div')
+    e.classes << 'm1'
+    e.classes << 'hide'
+    e.to_s.must_equal('<div class="hide m1">')
+    e.classes << 'm1' # Duplicate
+    e.to_s.must_equal('<div class="hide m1">')
+  end
+
+  it 'can self-close' do
+    Inkcite::Renderer::Element.new('br', :self_close => true).to_s.must_equal('<br />')
+  end
+
+end

data/test/renderer/footnote_spec.rb

@@ -0,0 +1,57 @@
+require 'minitest/spec'
+require 'minitest/autorun'
+require 'inkcite'
+
+describe Inkcite::Renderer::Footnote do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'requires text' do
+    Inkcite::Renderer.render('({footnote symbol="†"})', @view)
+    @view.errors.must_include('Footnote requires text attribute (line 0) [id=, symbol=†]')
+  end
+
+  it 'can have a custom symbol' do
+    Inkcite::Renderer.render('({footnote symbol="†" text="See Blackmur, especially chapters 3 and 4, for an insightful analysis of this trend."})', @view).must_equal("(†)")
+  end
+
+  it 'assigns a numeric symbol if unspecified' do
+    Inkcite::Renderer.render('({footnote text="EPA-estimated fuel economy."})', @view).must_equal("(1)")
+  end
+
+  it 'assigns an auto-incrementing symbol if multiple footnotes are provided' do
+    Inkcite::Renderer.render('({footnote text="EPA-estimated fuel economy."})({footnote text="Actual mileage may vary."})', @view).must_equal("(1)(2)")
+  end
+
+  it 'can auto-increment with mixed symbols' do
+    Inkcite::Renderer.render('({footnote text="EPA-estimated fuel economy."})({footnote symbol="†" text="See Blackmur, especially chapters 3 and 4, for an insightful analysis of this trend."})({footnote text="Actual mileage may vary."})', @view).must_equal("(1)(†)(2)")
+  end
+
+  it 'renders using the {footnotes} tag' do
+    Inkcite::Renderer.render('yadda yadda({footnote text="EPA-estimated fuel economy."})<br><br>{footnotes}', @view).must_equal("yadda yadda(1)<br><br><sup>1</sup> EPA-estimated fuel economy.<br><br>")
+  end
+
+  it 'sorts symbols before numeric footnotes' do
+    Inkcite::Renderer.render('({footnote text="EPA-estimated fuel economy."})({footnote symbol="†" text="See Blackmur, especially chapters 3 and 4, for an insightful analysis of this trend."})({footnote text="Actual mileage may vary."})<br><br>{footnotes}', @view).must_equal("(1)(†)(2)<br><br><sup>†</sup> See Blackmur, especially chapters 3 and 4, for an insightful analysis of this trend.<br><br><sup>1</sup> EPA-estimated fuel economy.<br><br><sup>2</sup> Actual mileage may vary.<br><br>")
+  end
+
+  it 'can have a reusable, readable ID assigned to it' do
+    Inkcite::Renderer.render('({footnote id="epa" text="EPA-estimated fuel economy."})({footnote id="epa"})', @view).must_equal("(1)(1)")
+  end
+
+  it 'can have a custom template' do
+    Inkcite::Renderer.render('({footnote text="EPA-estimated fuel economy."}) {footnotes tmpl="<p><sup>$symbol$</sup> $text$</p>"}', @view).must_equal("(1) <p><sup>1</sup> EPA-estimated fuel economy.</p>")
+  end
+
+  it 'can be defined silently' do
+    Inkcite::Renderer.render('{footnote hidden=1 text="EPA-estimated fuel economy."}{footnotes}', @view).must_equal("<sup>1</sup> EPA-estimated fuel economy.<br><br>")
+  end
+
+  it 'converts "\n" within footnotes template to new-lines' do
+    text_view = Inkcite::Email.new('test/project/').view(:development, :text)
+    Inkcite::Renderer.render('({footnote text="EPA-estimated fuel economy."}) {footnotes tmpl="[$symbol$] $text$\n\n"}', text_view).must_equal("(1) [1] EPA-estimated fuel economy.\n\n")
+  end
+
+end

data/test/renderer/image_spec.rb

@@ -0,0 +1,82 @@
+require 'minitest/spec'
+require 'minitest/autorun'
+require 'inkcite'
+
+describe Inkcite::Renderer::Image do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'warns when an image is missing' do
+    Inkcite::Renderer.render('{img src=missing.jpg}', @view)
+    @view.errors.must_include('Missing image (line 0) [src=missing.jpg]')
+  end
+
+  it 'warns when image dimesions are missing' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg}', @view)
+    @view.errors.must_include('Missing image dimensions (line 0) [src=inkcite.jpg]')
+  end
+
+  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="http://placehold.it/100x50.jpg" 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="http://placehold.it/100x50.jpg&text=F%20P%20O" style="display:block" width=100>')
+  end
+
+  it 'does not substitute placeholders for small images' do
+    @view.config[Inkcite::Email::IMAGE_PLACEHOLDERS] = true
+    Inkcite::Renderer.render('{img src=missing.jpg height=5 width=15}', @view).must_equal('<img border=0 height=5 src="missing.jpg" style="display:block" width=15>')
+  end
+
+  it 'has configurable dimensions' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73}', @view).must_equal('<img border=0 height=73 src="images/inkcite.jpg" style="display:block" width=73>')
+  end
+
+  it 'has configurable background color' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 bgcolor=#f00}', @view).must_equal('<img border=0 height=73 src="images/inkcite.jpg" style="background-color:#ff0000;display:block" width=73>')
+  end
+
+  it 'has an inline display helper' 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>')
+  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 '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>')
+  end
+
+  it 'ignores font attributes when alt text is not present' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 font=large}', @view).must_equal('<img border=0 height=73 src="images/inkcite.jpg" style="display:block" width=73>')
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 font-size=24}', @view).must_equal('<img border=0 height=73 src="images/inkcite.jpg" style="display:block" width=73>')
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=73 width=73 text-shadow=#f00}', @view).must_equal('<img border=0 height=73 src="images/inkcite.jpg" style="display:block" width=73>')
+  end
+
+  it 'includes a timestamp when cache-busting is enabled' do
+    @view.config[:'cache-bust'] = true
+
+    html = Inkcite::Renderer.render('{img src=inkcite.jpg}', @view)
+
+    html[0,47].must_equal('<img border=0 height=0 src="images/inkcite.jpg?')
+    html[47,10].must_match(/[0-9]{10,}/)
+    html[57..-1].must_equal('" style="display:block" width=0>')
+  end
+
+  it 'can substitute a different image on mobile' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg mobile-src=inkcite-mobile.jpg height=75 width=125}', @view).must_equal('<img border=0 class="i01" height=75 src="images/inkcite.jpg" style="display:block" width=125>')
+    @view.media_query.find_by_klass('i01').to_css.must_equal('img[class~="i01"] { content: url("images/inkcite-mobile.jpg") !important; }')
+  end
+
+end

data/test/renderer/link_spec.rb

@@ -0,0 +1,84 @@
+require 'minitest/spec'
+require 'minitest/autorun'
+require 'inkcite'
+
+describe Inkcite::Renderer::Link do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'renders an HTML anchor tag with default styling and _blank targeting' do
+    Inkcite::Renderer.render('{a id="blog" href="http://blog.inkceptional.com"}Our blog{/a}', @view).must_equal('<a href="http://blog.inkceptional.com" style="color:#0099cc;text-decoration:none" target=_blank>Our blog</a>')
+  end
+
+  it 'can be configured to tag all links' do
+    @view.config[:'tag-links'] = "tag=inkcite|{id}"
+    Inkcite::Renderer.render('{a id="litmus" href="http://litmus.com"}Test Emails Here{/a}', @view).must_equal('<a href="http://litmus.com?tag=inkcite|litmus" style="color:#0099cc;text-decoration:none" target=_blank>Test Emails Here</a>')
+  end
+
+  it 'can be configured to tag links to specific domains' do
+    @view.config[:'tag-links'] = "tag=inkcite|{id}"
+    @view.config[:'tag-links-domain'] = 'inkceptional.com'
+    Inkcite::Renderer.render('{a id="blog" href="http://blog.inkceptional.com"}Our blog{/a}', @view).must_equal('<a href="http://blog.inkceptional.com?tag=inkcite|blog" style="color:#0099cc;text-decoration:none" target=_blank>Our blog</a>')
+    Inkcite::Renderer.render('{a id="litmus" href="http://litmus.com"}Test Emails Here{/a}', @view).must_equal('<a href="http://litmus.com" style="color:#0099cc;text-decoration:none" target=_blank>Test Emails Here</a>')
+  end
+
+  it 'will not tag mailto: links' do
+    @view.config[:'tag-links'] = "tag=inkcite|{id}"
+    Inkcite::Renderer.render('{a id="contact-us" href="mailto:some.email@some.where"}Contact Us{/a}', @view).must_equal('<a href="mailto:some.email@some.where" style="color:#0099cc;text-decoration:none">Contact Us</a>')
+  end
+
+  it 'will not tag links that lead to an element in the email' do
+    @view.config[:'tag-links'] = "tag=inkcite|{id}"
+    Inkcite::Renderer.render('{a href="#news"}Latest News{/a}', @view).must_equal('<a href="#news" style="color:#0099cc;text-decoration:none">Latest News</a>')
+  end
+
+  it 'raises a warning and generates an ID if one is not present' do
+    Inkcite::Renderer.render('{a href="http://inkceptional.com"}Click Here{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;text-decoration:none" target=_blank>Click Here</a>')
+    @view.errors.must_include('Link missing ID (line 0) [href=http://inkceptional.com]')
+  end
+
+  it 'increments its automatically generated link ID' do
+    Inkcite::Renderer.render('{a href="http://blog.inkceptional.com"}Our Blog{/a}', @view).must_equal('<a href="http://blog.inkceptional.com" style="color:#0099cc;text-decoration:none" target=_blank>Our Blog</a>')
+    Inkcite::Renderer.render('{a href="http://inkceptional.com"}Inkceptional.com{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;text-decoration:none" target=_blank>Inkceptional.com</a>')
+  end
+
+  it 'can have a custom font color' do
+    Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" color=#fc9}Order Now{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#ffcc99;text-decoration:none" target=_blank>Order Now</a>')
+  end
+
+  it 'can inherit link color from a parent td' do
+    Inkcite::Renderer.render('{td link=#0c3}{a id="order-now" href="http://inkceptional.com"}Order Now{/a}{/td}', @view).must_equal('<td><a href="http://inkceptional.com" style="color:#00cc33;text-decoration:none" target=_blank>Order Now</a></td>')
+  end
+
+  it 'can inherit link color from a parent table' do
+    Inkcite::Renderer.render('{table link=#396}{td}{a id="order-now" href="http://inkceptional.com"}Order Now{/a}{/td}{/table}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0><tr><td><a href="http://inkceptional.com" style="color:#339966;text-decoration:none" target=_blank>Order Now</a></td></tr></table>')
+  end
+
+  it 'can have a custom font family' do
+    Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" font-family="Comic Sans"}Order Now{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;font-family:Comic Sans;text-decoration:none" target=_blank>Order Now</a>')
+  end
+
+  it 'can have a custom font size' do
+    Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" font-size=72}Order Now{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;font-size:72px;text-decoration:none" target=_blank>Order Now</a>')
+  end
+
+  it 'can have a custom font weight' do
+    Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" font-weight=700}Order Now{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;font-weight:700;text-decoration:none" target=_blank>Order Now</a>')
+  end
+
+  it 'can have a custom line height' do
+    Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" line-height=64}Order Now{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;line-height:64px;text-decoration:none" target=_blank>Order Now</a>')
+    Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" line-height=normal}Order Now{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;line-height:normal;text-decoration:none" target=_blank>Order Now</a>')
+  end
+
+  it 'can inherit a font from the context' do
+    Inkcite::Renderer.render('{a id="order-now" href="http://inkceptional.com" font=large}Order Now{/a}', @view).must_equal('<a href="http://inkceptional.com" style="color:#0099cc;font-family:serif;font-size:24px;font-weight:bold;line-height:24px;text-decoration:none" target=_blank>Order Now</a>')
+  end
+
+  it 'will wrap button-style responsive links in a div' 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
+
+end

data/test/renderer/mobile_image_spec.rb

@@ -0,0 +1,27 @@
+require 'minitest/spec'
+require 'minitest/autorun'
+require 'inkcite'
+
+describe Inkcite::Renderer::MobileImage do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  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>')
+    @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("http://placehold.it/300x100.jpg");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>')
+  end
+
+end

data/test/renderer/mobile_style_spec.rb

@@ -0,0 +1,37 @@
+require 'minitest/spec'
+require 'minitest/autorun'
+require 'inkcite'
+
+describe Inkcite::Renderer::MobileStyle do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'requires a class name' do
+    Inkcite::Renderer.render('{mobile-style}', @view).must_equal('')
+    @view.errors.must_include('Declaring a mobile style requires a name attribute (line 0)')
+  end
+
+  it 'requires a style declaration' do
+    Inkcite::Renderer.render('{mobile-style name="slider"}', @view).must_equal('')
+    @view.errors.must_include('Declaring a mobile style requires a style attribute (line 0) [name=slider]')
+  end
+
+  it 'raises a warning if the class name is not unique' do
+    Inkcite::Renderer.render('{mobile-style name="outlined" style="border: 1px solid #f00"}', @view).must_equal('')
+    Inkcite::Renderer.render('{mobile-style name="outlined" style="border: 1px solid #0f0"}', @view).must_equal('')
+    @view.errors.must_include('A mobile style was already defined with that class name (line 0) [name=outlined, style=border: 1px solid #0f0]')
+  end
+
+  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 }')
+  end
+
+  it 'can be applied to a responsive element' do
+    Inkcite::Renderer.render('{mobile-style name="outlined" style="border: 1px solid #f00"}', @view).must_equal('')
+    Inkcite::Renderer.render('{div mobile=outlined}{/div}', @view).must_equal('<div class="outlined"></div>')
+  end
+
+end