inliner_spec.rb in roadie-1.0.0

- old
+ new

@@ -13,25 +13,44 @@
       use_css ''
     end
 
     it "should inline simple attributes" do
       use_css 'p { color: green }'
-      rendering('<p></p>').should have_styling('color' => 'green').at_selector('p')
+      rendering('<p></p>').should have_styling('color' => 'green')
     end
 
+    it "should keep the order of the styles that was inlined" do
+      use_css 'h1 { padding: 2px; margin: 5px; }'
+      rendering('<h1></h1>').should have_styling([['padding', '2px'], ['margin', '5px']])
+    end
+
     it "should combine multiple selectors into one" do
-      use_css "p { color: green; }
-              .tip { float: right; }"
-      rendering('<p class="tip"></p>').should have_styling('color' => 'green', 'float' => 'right').at_selector('p')
+      use_css 'p { color: green; }
+              .tip { float: right; }'
+      rendering('<p class="tip"></p>').should have_styling('color' => 'green', 'float' => 'right')
     end
 
     it "should use the ones attributes with the highest specificality when conflicts arises" do
       use_css "p { color: red; }
-              .safe { color: green; border: 1px solid black; }"
-      rendering('<p class="safe"></p>').should have_styling('color' => 'green', 'border' => '1px solid black').at_selector('p')
+              .safe { color: green; }"
+      rendering('<p class="safe"></p>').should have_styling('color' => 'green')
     end
 
+    it "should sort styles by specificity order" do
+      use_css 'p      { margin: 2px; }
+               #big   { margin: 10px; }
+               .down  { margin-bottom: 5px; }'
+
+      rendering('<p class="down"></p>').should have_styling([
+        ['margin', '2px'], ['margin-bottom', '5px']
+      ])
+
+      rendering('<p class="down" id="big"></p>').should have_styling([
+        ['margin-bottom', '5px'], ['margin', '10px']
+      ])
+    end
+
     it "should support multiple selectors for the same rules" do
       use_css 'p, a { color: green; }'
       rendering('<p></p><a></a>').tap do |document|
         document.should have_styling('color' => 'green').at_selector('p')
         document.should have_styling('color' => 'green').at_selector('a')
@@ -39,31 +58,31 @@
     end
 
     it "should respect !important properties" do
       use_css "a { text-decoration: underline !important; }
                a.hard-to-spot { text-decoration: none; }"
-      rendering('<a class="hard-to-spot"></a>').should have_styling('text-decoration' => 'underline').at_selector('a')
+      rendering('<a class="hard-to-spot"></a>').should have_styling('text-decoration' => 'underline')
     end
 
     it "should combine with already present inline styles" do
       use_css "p { color: green }"
-      rendering('<p style="font-size: 1.1em"></p>').should have_styling('color' => 'green', 'font-size' => '1.1em').at_selector('p')
+      rendering('<p style="font-size: 1.1em"></p>').should have_styling([['color', 'green'], ['font-size', '1.1em']])
     end
 
-    it "should not overwrite already present inline styles" do
+    it "should not touch already present inline styles" do
       use_css "p { color: red }"
-      rendering('<p style="color: green"></p>').should have_styling('color' => 'green').at_selector('p')
+      rendering('<p style="color: green"></p>').should have_styling([['color', 'red'], ['color', 'green']])
     end
 
     it "should ignore selectors with :psuedo-classes" do
       use_css 'p:hover { color: red }'
-      rendering('<p></p>').should_not have_styling('color' => 'red').at_selector('p')
+      rendering('<p></p>').should_not have_styling('color' => 'red')
     end
 
     describe "inline <style> elements" do
       it "should be used for inlined styles" do
-        rendering(<<-HTML).should have_styling('color' => 'green', 'font-size' => '1.1em').at_selector('p')
+        rendering(<<-HTML).should have_styling([['color', 'green'], ['font-size', '1.1em']])
           <html>
             <head>
               <style type="text/css">p { color: green; }</style>
             </head>
             <body>
@@ -91,11 +110,11 @@
         document = rendering <<-HTML
           <style type="text/css" data-immutable="true">p { color: red; }</style>
           <p></p>
         HTML
         document.should have_selector('style[data-immutable=true]')
-        document.should_not have_styling('color' => 'red').at_selector('p')
+        document.should_not have_styling('color' => 'red')
       end
 
       it "should not be touched when media=print" do
         document = rendering <<-HTML
           <style type="text/css" media="print">p { color: red; }</style>
@@ -115,58 +134,58 @@
     end
   end
 
   describe "making urls absolute" do
     it "should work on image sources" do
-      rendering('<img src="/images/foo.jpg" />').should have_attribute('src' => 'http://example.com/images/foo.jpg').at_selector('img')
-      rendering('<img src="../images/foo.jpg" />').should have_attribute('src' => 'http://example.com/images/foo.jpg').at_selector('img')
-      rendering('<img src="foo.jpg" />').should have_attribute('src' => 'http://example.com/foo.jpg').at_selector('img')
+      rendering('<img src="/images/foo.jpg" />').should have_attribute('src' => 'http://example.com/images/foo.jpg')
+      rendering('<img src="../images/foo.jpg" />').should have_attribute('src' => 'http://example.com/images/foo.jpg')
+      rendering('<img src="foo.jpg" />').should have_attribute('src' => 'http://example.com/foo.jpg')
     end
 
     it "should not touch image sources that are already absolute" do
-      rendering('<img src="http://other.example.org/images/foo.jpg" />').should have_attribute('src' => 'http://other.example.org/images/foo.jpg').at_selector('img')
+      rendering('<img src="http://other.example.org/images/foo.jpg" />').should have_attribute('src' => 'http://other.example.org/images/foo.jpg')
     end
 
     it "should work on inlined style attributes" do
-      rendering('<p style="background: url(/paper.png)"></p>').should have_styling('background' => 'url(http://example.com/paper.png)').at_selector('p')
-      rendering('<p style="background: url(&quot;/paper.png&quot;)"></p>').should have_styling('background' => 'url("http://example.com/paper.png")').at_selector('p')
+      rendering('<p style="background: url(/paper.png)"></p>').should have_styling('background' => 'url(http://example.com/paper.png)')
+      rendering('<p style="background: url(&quot;/paper.png&quot;)"></p>').should have_styling('background' => 'url("http://example.com/paper.png")')
     end
 
     it "should work on external style declarations" do
       use_css "p { background-image: url(/paper.png); }
                table { background-image: url('/paper.png'); }
                div { background-image: url(\"/paper.png\"); }"
-      rendering('<p></p>').should have_styling('background-image' => 'url(http://example.com/paper.png)').at_selector('p')
-      rendering('<table></table>').should have_styling('background-image' => "url('http://example.com/paper.png')").at_selector('table')
-      rendering('<div></div>').should have_styling('background-image' => 'url("http://example.com/paper.png")').at_selector('div')
+      rendering('<p></p>').should have_styling('background-image' => 'url(http://example.com/paper.png)')
+      rendering('<table></table>').should have_styling('background-image' => "url('http://example.com/paper.png')")
+      rendering('<div></div>').should have_styling('background-image' => 'url("http://example.com/paper.png")')
     end
 
     it "should not touch style urls that are already absolute" do
       external_url = 'url(http://other.example.org/paper.png)'
       use_css "p { background-image: #{external_url}; }"
-      rendering('<p></p>').should have_styling('background-image' => external_url).at_selector('p')
-      rendering(%(<div style="background-image: #{external_url}"></div>)).should have_styling('background-image' => external_url).at_selector('div')
+      rendering('<p></p>').should have_styling('background-image' => external_url)
+      rendering(%(<div style="background-image: #{external_url}"></div>)).should have_styling('background-image' => external_url)
     end
 
     it "should not touch the urls when no url options are defined" do
       use_css "img { background: url(/a.jpg); }"
       rendering('<img src="/b.jpg" />', :url_options => nil).tap do |document|
         document.should have_attribute('src' => '/b.jpg').at_selector('img')
-        document.should have_styling('background' => 'url(/a.jpg)').at_selector('img')
+        document.should have_styling('background' => 'url(/a.jpg)')
       end
     end
 
     it "should support port and protocol settings" do
       use_css "img { background: url(/a.jpg); }"
       rendering('<img src="/b.jpg" />', :url_options => {:host => 'example.com', :protocol => 'https', :port => '8080'}).tap do |document|
         document.should have_attribute('src' => 'https://example.com:8080/b.jpg').at_selector('img')
-        document.should have_styling('background' => 'url(https://example.com:8080/a.jpg)').at_selector('img')
+        document.should have_styling('background' => 'url(https://example.com:8080/a.jpg)')
       end
     end
 
     it "should not touch data: URIs" do
       use_css "div { background: url(data:abcdef); }"
-      rendering('<div></div>').should have_styling('background' => 'url(data:abcdef)').at_selector('div')
+      rendering('<div></div>').should have_styling('background' => 'url(data:abcdef)')
     end
   end
 
   describe "inserting tags" do
     it "should insert a doctype if not present" do