inkcite 1.12.1 → 1.13.0

data/lib/inkcite/renderer/style.rb

@@ -0,0 +1,81 @@
+module Inkcite
+  module Renderer
+    class Style
+
+      def initialize name, ctx, styles={}
+
+        @name = name
+        @ctx = ctx
+        @styles = styles
+
+      end
+
+      def [] key
+        @styles[key]
+      end
+
+      def []= key, val
+        @styles[key] = val
+      end
+
+      def to_css allowed_prefixes=nil
+        "#{@name} { #{to_inline_css(allowed_prefixes)} }"
+      end
+
+      def to_inline_css allowed_prefixes=nil
+
+        # Inherit the list of allowed prefixes from the context if
+        # none were provided.  Otherwise, make sure we're working
+        # with an array.
+        if allowed_prefixes.nil?
+          allowed_prefixes = @ctx.prefixes
+        else
+          allowed_prefixes = [*allowed_prefixes]
+        end
+
+        # This will hold a copy of the key and values including
+        # all keys with prefixes.
+        _styles = {}
+
+        # A reusable array indicating no prefixing is necessary.
+        no_prefixes = ['']
+
+        @styles.each_pair do |key, val|
+
+          # Determine which list of prefixes are needed based on the
+          # original key (e.g. :transform) - or use the list of
+          # non-modifying prefixes.
+          prefixes = if Inkcite::Renderer::Style.needs_prefixing?(key)
+            allowed_prefixes
+          else
+            no_prefixes
+          end
+
+          # Iterate through each prefix and create a hybrid key.  Then
+          # add the styles to the temporary list.
+          prefixes.each do |prefix|
+            prefixed_key = "#{prefix}#{key}".to_sym
+            _styles[prefixed_key] = val
+          end
+
+        end
+
+        Renderer.render_styles(_styles)
+      end
+
+      def to_s
+        @name.blank? ? to_inline_css : to_css
+      end
+
+      def self.needs_prefixing? key
+        PREFIXABLE_KEYS.include?(key.to_sym)
+      end
+
+      private
+
+      # Array of CSS attributes that must be prefixed (e.g. transform and animation)
+      PREFIXABLE_KEYS = [:animation, :transform]
+
+    end
+  end
+end

data/lib/inkcite/renderer/table_base.rb

@@ -16,6 +16,7 @@ module Inkcite
         mix_background element, opt, ctx
         mix_border element, opt, ctx
         mix_dimensions element, opt, ctx
+        mix_margins element, opt, ctx
 
       end
 
@@ -51,24 +52,15 @@ module Inkcite
         # mobile version inherits from the desktop version.
         mobile_background = mix_background_shorthand(
             detect(opt[MOBILE_BACKGROUND_COLOR], opt[MOBILE_BGCOLOR], bgcolor),
-            detect(opt[MOBILE_BACKGROUND_IMAGE], opt[MOBILE_BACKGROUND], bgimage),
+            detect(opt[MOBILE_BACKGROUND_IMAGE], opt[MOBILE_BACKGROUND], opt[MOBILE_SRC], bgimage),
             detect(opt[MOBILE_BACKGROUND_POSITION], bgposition),
             detect(opt[MOBILE_BACKGROUND_REPEAT], bgrepeat),
             detect(opt[MOBILE_BACKGROUND_SIZE], bgsize),
             ctx
         )
 
-        unless mobile_background.blank? || mobile_background == desktop_background
-
-          mobile_background << ' !important' unless desktop_background.blank?
-
-          # Add the responsive rule that applies to this element.
-          rule = Rule.new(element.tag, unique_klass(ctx), { :background => mobile_background })
-
-          # Add the rule to the view and the element
-          ctx.media_query << rule
-          element.add_rule rule
-
+        if !mobile_background.blank? && mobile_background != desktop_background
+          element.mobile_style[:background] = mobile_background
         end
 
       end

data/lib/inkcite/renderer/td.rb

@@ -27,10 +27,6 @@ module Inkcite
           # Retrieve the opts that were used to open this TD.
           open_opt = tag_stack.pop
 
-          # If the opening tag initiated an automatic outlook background
-          # then we need to inject the close tag here.
-          html << "{/outlook-bg}\n" if outlook_bg?(open_opt)
-
           # Normal HTML produced by the Helper to close the cell.
           html << '</td>'
 
@@ -76,6 +72,12 @@ module Inkcite
 
           mobile = opt[:mobile]
 
+          # If the table defines mobile-padding, then apply the correct mobile
+          # style to this td - and its !important if there is padding on
+          # the td already.
+          mobile_padding = table_opt[MOBILE_PADDING] || opt[MOBILE_PADDING]
+          td.mobile_style[:padding] = px(mobile_padding) unless mobile_padding.blank? || mobile == HIDE
+
           # Need to handle Fluid-Drop HTML injection here before the rest of the
           # TD is formalized.  Fluid-Drop removes the width attribute of the cell
           # as it is wrapped in a 100%-width table.
@@ -170,21 +172,6 @@ module Inkcite
 
           html << td.to_s
 
-          # For convenience and to keep code DRY, support the outlook-bg boolean
-          # attribute which causes an {outlook-bg} Helper to be injected automatically
-          # inside of the {td}.
-          if outlook_bg?(opt)
-
-            html << "\n"
-            html << Element.new('outlook-bg', {
-                    :bgcolor => detect_bgcolor(opt),
-                    :width => opt[:width],
-                    :height => opt[:height],
-                    :src => opt[:background]
-                }).to_helper
-
-          end
-
         end
 
         html
@@ -192,11 +179,6 @@ module Inkcite
 
       private
 
-      # Returns true if the conditions are met that enable the
-      # automatic {outlook-bg} helper integration.
-      def outlook_bg? opt
-        opt && opt[OUTLOOK_BG] && !opt[:background].blank?
-      end
 
       CLOSE_TD = '/td'
       LEFT = 'left'

data/lib/inkcite/renderer/video_preview.rb

@@ -94,7 +94,19 @@ module Inkcite
                 :width => '100%', :background => first_frame, BACKGROUND_SIZE => 'cover',
                 Table::TR_TRANSITION => %q("all .5s cubic-bezier(0.075, 0.82, 0.165, 1)")
             })
-        table[:animation] = %Q("#{animation_name} #{duration}s ease infinite") if has_animation
+
+        # Will hold the Animation if animation is enabled for this
+        # video-preview.
+        animation = nil
+
+        if has_animation
+          animation = Animation.new(animation_name, ctx)
+          animation.timing_function = Animation::EASE
+          animation.duration = duration
+
+          table[:animation] = quote(animation)
+        end
+
         html << table.to_helper
 
         # Transparent spacer for preserving aspect ratio.
@@ -218,26 +230,24 @@ module Inkcite
           # end of the animation.
           percent = 0.0
 
-          keyframes = Animation::Keyframes.new(animation_name, ctx)
-
           # Iterate through each frame and add two keyframes, the first
           # being the time at which the frame appears plus another frame
           # after the duration it should be on screen.
           frames.each do |f|
             this_frame_url = "url(#{f})"
 
-            keyframes.add_keyframe(percent, { BACKGROUND_IMAGE => this_frame_url })
+            animation.add_keyframe(percent, { BACKGROUND_IMAGE => this_frame_url })
             percent += percent_per_frame
-            keyframes.add_keyframe(percent, { BACKGROUND_IMAGE => this_frame_url })
+            animation.add_keyframe(percent, { BACKGROUND_IMAGE => this_frame_url })
             percent += percent_per_transition
 
           end
 
           # Transition back to the first frame.
-          keyframes.add_keyframe(100, { BACKGROUND_IMAGE => "url(#{first_frame})" })
+          animation.add_keyframe(100, { BACKGROUND_IMAGE => "url(#{first_frame})" })
 
           # Add the keyframes to the styles array.
-          styles << keyframes.to_s
+          styles << animation.to_keyframe_css
 
         end
 

data/lib/inkcite/version.rb

@@ -1,3 +1,3 @@
 module Inkcite
-  VERSION = "1.12.1"
+  VERSION = "1.13.0"
 end

data/lib/inkcite/view.rb

@@ -335,6 +335,12 @@ module Inkcite
       tag_stack(tag).opts
     end
 
+    # Returns the array of browser prefixes that need to be included in
+    # CSS styles based on which version of the email this is.
+    def prefixes
+      [ '', '-webkit-' ]
+    end
+
     def preview?
       @environment == :preview
     end
@@ -432,9 +438,7 @@ module Inkcite
         # Add external styles
         html += external_styles
 
-        html << '<style type="text/css">'
         html << inline_styles
-        html << '</style>'
         html << '</head>'
 
         # Intentionally not setting the link colors because those should be entirely
@@ -710,7 +714,7 @@ module Inkcite
 
     def inline_google_fonts
 
-      reset = ''
+      css = ''
 
       # Google Web Fonts support courtesy of
       # http://www.emaildesignreview.com/html-email-coding/web-fonts-in-email-1482/
@@ -729,7 +733,7 @@ module Inkcite
         # If you use @font-face in HTML email, Outlook 07/10/13 will default all
         # text back to Times New Roman.
         # http://www.emaildesignreview.com/html-email-coding/web-fonts-in-email-1482/
-        reset << '@media screen {'
+        css << '@media screen {'
 
         # Iterate through the configured fonts. Check to see if we've already cached
         # Google's response.  If not, retrieve it and add it to the
@@ -744,16 +748,16 @@ module Inkcite
             end
           end
 
-          reset << font_cache[url]
+          css << font_cache[url]
         end
-        reset << '}'
+        css << '}'
 
         # If the fontcache was updated, update it in our sekret file.
         File.write(font_cache_path, font_cache.to_yaml) if updated
 
       end
 
-      reset
+      css
     end
 
 
@@ -779,7 +783,7 @@ module Inkcite
       code
     end
 
-    def inline_styles
+    def inline_reset_styles
 
       reset = []
 
@@ -820,26 +824,57 @@ module Inkcite
       # Reset the font on every cell to the default family.
       reset << "td { font-family: #{self[Renderer::Base::FONT_FAMILY]}; }"
 
-      # Obviously VML-specific CSS needed only if VML was used in the issue.
+      # VML-specific CSS needed only if VML was used in the email.
       if vml_used?
         reset << 'v\:* { behavior: url(#default#VML); display: inline-block; }'
         reset << 'o\:* { behavior: url(#default#VML); display: inline-block; }'
       end
 
-      reset << inline_google_fonts
+      reset.join(NEW_LINE)
+    end
+
+    def inline_styles
+
+      # Separating <style> blocks to prevent Gmail from filtering
+      # the entire CSS section because of its strict parsing.
+      # https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81#.khhj4u4b5
+      style_blocks = []
+
+      # Add a section for the bootstrap/reset styles common to every email
+      # that address common rendering issues in many clients.
+      style_blocks << inline_reset_styles
+
+      # Web font styles need to be in their own block because
+      # they have multiple @ signs which Gmail doesn't like.
+      style_blocks << inline_google_fonts
 
       # Responsive styles.
-      reset += @media_query.to_a unless @media_query.blank?
+      style_blocks << @media_query.to_css unless @media_query.blank?
 
-      html = []
+      # Filter the URI-based styles and add the remaining styles as a
+      # separate block.  Possibly need to consider making these style
+      # blocks separate in the future - e.g. special effects blocks
+      # should probably be separated since there is a high likelihood
+      # of @ within @
+      style_blocks << self.styles.select { |s| !s.is_a?(URI::HTTP) }.join(NEW_LINE)
 
-      # Append the minified CSS
-      html << Minifier.css(reset.join(NEW_LINE), self)
+      # Filter empty style blocks
+      style_blocks.select! { |s| !s.blank? }
 
-      # Iterate through the list of files or in-line CSS and embed them into the HTML.
-      self.styles.each do |css|
-        next if css.is_a?(URI::HTTP)
-        html << Minifier.css(from_uri(css), self)
+      # Minify each of the blocks
+      style_blocks.each { |s| Minifier.css(s, self) }
+
+      # Join all of the style blocks into a single block if this
+      # is not an email - otherwise, keep them separate.
+      style_blocks = [ style_blocks.join(NEW_LINE) ] unless email?
+
+      html = []
+
+      # Iterate through the style blocks and append them
+      style_blocks.each do |s|
+        html << '<style>'
+        html << s
+        html << '</style>'
       end
 
       html.join(NEW_LINE)

data/lib/inkcite/view/media_query.rb

@@ -46,7 +46,7 @@ module Inkcite
         css = []
         css << "@media only screen and (max-width: #{Inkcite::Renderer::px(@max_width)}) {"
         css += active_styles.collect(&:to_css)
-        css << "}"
+        css << '}'
 
         css
       end

data/test/animation_spec.rb

@@ -7,31 +7,35 @@ describe Inkcite::Animation do
   end
 
   it 'supports browser prefixing' do
-    Inkcite::Animation.with_browser_prefixes("animation: video-frames 5s ease infinite", @view, { :separator => '; ' }).must_equal('animation: video-frames 5s ease infinite; -webkit-animation: video-frames 5s ease infinite; ')
+    Inkcite::Renderer::Style.new(nil, @view, { :animation => 'video-frames 5s ease infinite' }).to_s.must_equal('-webkit-animation:video-frames 5s ease infinite;animation:video-frames 5s ease infinite')
+  end
+
+  it 'supports browser prefixing specific items only' do
+    Inkcite::Renderer::Style.new(nil, @view, { :left => '25%', :animation => 'video-frames 5s ease infinite' }).to_s.must_equal('-webkit-animation:video-frames 5s ease infinite;animation:video-frames 5s ease infinite;left:25%')
   end
 
   it 'can instantiate an animation keyframe' do
-    Inkcite::Animation::Keyframe.new(5, { :top => '-10px', :left => '22%' }).to_s.must_equal('  5%   { left:22%;top:-10px }')
+    Inkcite::Animation::Keyframe.new(5, @view, { :top => '-10px', :left => '22%' }).to_css('').must_equal('5% { left:22%;top:-10px }')
   end
 
   it 'can add style to an animation keyframe' do
-    keyframe = Inkcite::Animation::Keyframe.new(25)
+    keyframe = Inkcite::Animation::Keyframe.new(25, @view)
     keyframe[:top] = '-15%'
     keyframe[:left] = '78px'
-    keyframe.to_s.must_equal('  25%  { left:78px;top:-15% }')
+    keyframe.to_css('').must_equal('25% { left:78px;top:-15% }')
   end
 
   it 'can prefix a style on a keyframe' do
-    keyframe = Inkcite::Animation::Keyframe.new(33)
-    keyframe.add_with_prefixes :transform, 'rotate(14deg)', @view
-    keyframe.to_s.must_equal('  33%  { -webkit-transform:rotate(14deg);transform:rotate(14deg) }')
+    keyframe = Inkcite::Animation::Keyframe.new(33, @view, { :transform => 'rotate(14deg)' })
+    keyframe.to_css('').must_equal('33% { transform:rotate(14deg) }')
+    keyframe.to_css('-webkit-').must_equal('33% { -webkit-transform:rotate(14deg) }')
   end
 
   it 'can instantiate an animation and add keyframes' do
-    anim = Inkcite::Animation::Keyframes.new('snowflake7', @view)
-    anim << Inkcite::Animation::Keyframe.new(5, { :top => '-10px', :left => '22%' }).add_with_prefixes(:transform, 'rotate(14deg)', @view)
+    anim = Inkcite::Animation.new('snowflake7', @view)
+    anim.add_keyframe 5, { :top => '-10px', :left => '22%', :transform => 'rotate(14deg)' }
     anim.add_keyframe 25, { :top => '100%', :left => '18%' }
-    anim.to_s.must_equal(%Q(@keyframes snowflake7 {\n  5%   { -webkit-transform:rotate(14deg);left:22%;top:-10px;transform:rotate(14deg) }\n  25%  { left:18%;top:100% }\n}\n@-webkit-keyframes snowflake7 {\n  5%   { -webkit-transform:rotate(14deg);left:22%;top:-10px;transform:rotate(14deg) }\n  25%  { left:18%;top:100% }\n}\n))
+    anim.to_keyframe_css.must_equal(%Q(@keyframes snowflake7 {\n5% { left:22%;top:-10px;transform:rotate(14deg) }\n25% { left:18%;top:100% }\n}\n@-webkit-keyframes snowflake7 {\n5% { -webkit-transform:rotate(14deg);left:22%;top:-10px }\n25% { left:18%;top:100% }\n}\n))
   end
 
 

data/test/renderer/background_spec.rb

@@ -0,0 +1,59 @@
+describe Inkcite::Renderer::Background do
+
+  before do
+    @view = Inkcite::Email.new('test/project/').view(:development, :email)
+  end
+
+  it 'warns when an image is missing' do
+    Inkcite::Renderer.render('{background src=missing.jpg}', @view)
+    @view.errors.must_include('Missing image (line 0) [src=missing.jpg]')
+  end
+
+  it 'warns when an outlook-specific image is missing' do
+    Inkcite::Renderer.render('{background outlook-src=also-missing.jpg}', @view)
+    @view.errors.must_include('Missing image (line 0) [src=also-missing.jpg]')
+  end
+
+  it 'defaults to filling the available horizontal space' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="background:url(https://i.imgur.com/YJOX1PC.png)" width=100%><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports 100% width' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png width=100%}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="background:url(https://i.imgur.com/YJOX1PC.png)" width=100%><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports fill width' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png width=fill}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="background:url(https://i.imgur.com/YJOX1PC.png)" width=100%><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports an optional width in pixels' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png width=120}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="background:url(https://i.imgur.com/YJOX1PC.png)" width=120><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports an optional height in pixels' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png bgcolor=#7bceeb height=92 width=120}{/background}', @view).must_equal('<table bgcolor=#7bceeb border=0 cellpadding=0 cellspacing=0 height=92 style="background:#7bceeb url(https://i.imgur.com/YJOX1PC.png)" width=120><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports an optional background color' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png bgcolor=#7bceeb width=120}{/background}', @view).must_equal('<table bgcolor=#7bceeb border=0 cellpadding=0 cellspacing=0 style="background:#7bceeb url(https://i.imgur.com/YJOX1PC.png)" width=120><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports the font attribute' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png font=large align=center}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="background:url(https://i.imgur.com/YJOX1PC.png)" width=100%><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div style="color:#ff0000;font-family:serif;font-size:24px;font-weight:bold;line-height:24px;text-align:center"></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports font-related attributes' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png font-size=18 line-height=27}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="background:url(https://i.imgur.com/YJOX1PC.png)" width=100%><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div style="font-size:18px;line-height:27px"></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+  end
+
+  it 'supports a custom mobile background' do
+    Inkcite::Renderer.render('{background src=https://i.imgur.com/YJOX1PC.png mobile-src="https://i.imgur.com/YJOX1PC-mobile.png" mobile-background-position="top" mobile-background-size="cover"}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 class="m1" style="background:url(https://i.imgur.com/YJOX1PC.png)" width=100%><tr><td><!--[if mso]><v:rect fill="t" stroke="f" 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"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+    @view.media_query.find_by_klass('m1').declaration_string.must_equal('background:url(https://i.imgur.com/YJOX1PC-mobile.png) top / cover no-repeat !important')
+  end
+
+  it 'supports mobile padding' do
+    Inkcite::Renderer.render('{background src=background.jpg mobile-padding=15}{/background}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="background:url(images/background.jpg)" width=100%><tr><td class="m1"><!--[if mso]><v:rect fill="t" stroke="f" style="mso-width-percent:1000" xmlns:v="urn:schemas-microsoft-com:vml"><v:fill src="images/background.jpg" type="tile" /><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:True"><![endif]--><div></div><!--[if mso]></v:textbox></v:rect><![endif]--></td></tr></table>')
+    @view.media_query.find_by_klass('m1').declaration_string.must_equal('padding:15px')
+  end
+
+end