Test some typography!

features/step_definitions/blueprint_steps.rb

@@ -35,3 +35,23 @@
 Then /^the "([^"]*)" should have a background color of "([^"]*)"$/ do |selector, rgb|
   element(selector).background.color.should == rgb
 end
+
+Then /^the "([^"]*)" should be underlined$/ do |selector|
+  element(selector).text.decoration.should == "underline"
+end
+
+Then /^the "([^"]*)" should be visible$/ do |selector|
+  element(selector).should be_visible
+end
+
+Then /^the "([^"]*)" should be hidden$/ do |selector|
+  element(selector).should_not be_visible
+end
+
+Then /^the "([^"]*)" should be bold$/ do |selector|
+  element(selector).font.weight.should == "bold"
+end
+
+Then /^the "([^"]*)" should be italic$/ do |selector|
+  element(selector).font.style.should == "italic"
+end

features/support/document_element.rb

@@ -1,12 +1,18 @@
 class DocumentElement
   class Dimension  < Struct.new(:top, :right, :bottom, :left);       end
   class Background < Struct.new(:color, :image, :repeat, :position); end
+  class Text       < Struct.new(:decoration);                        end
+  class Font       < Struct.new(:weight, :style);                    end
 
   def initialize(page, selector)
     @page     = page
     @selector = selector
   end
 
+  def visible?
+    @page.evaluate_script(%{$("#{@selector}").is(":visible")})
+  end
+
   def height
     @page.evaluate_script(%{$("#{@selector}").height()}).to_i
   end
@@ -41,4 +47,17 @@ def background
     background.position = @page.evaluate_script(%{$("#{@selector}").css("backgroundPosition")})
     background
   end
+
+  def font
+    font = Font.new
+    font.weight = @page.evaluate_script(%{$("#{@selector}").css("fontWeight")})
+    font.style  = @page.evaluate_script(%{$("#{@selector}").css("fontStyle")})
+    font
+  end
+
+  def text
+    text = Text.new
+    text.decoration = @page.evaluate_script(%{$("#{@selector}").css("textDecoration")})
+    text
+  end
 end

features/typography.feature

@@ -0,0 +1,78 @@
+@javascript
+Feature: Sensible typography
+  In order to develop sites that are easy to read
+  As a developer
+  I should be able to use Blueprint for good typography
+
+  Background:
+    When I generate Blueprint stylesheets
+
+  Scenario: Links are underlined
+    When I open the HTML page using the styles with the content:
+      """
+        <a href="http://www.example.com">Hello world</a>
+      """
+    Then the "a:first" should be underlined
+
+  Scenario: Hiding elements is straightforward
+    When I open the HTML page using the styles with the content:
+      """
+      <div class="container">
+        <div class="awesome">Text</div>
+        <div class="hide">
+          <div>More hidden stuff</div>
+        </div>
+      </div>
+      """
+    Then the ".container .hide:first" should be hidden
+    And the ".container .hide > div:first" should be hidden
+    And the ".container div:first" should be visible
+
+  Scenario: Tables are striped
+    When I open the HTML page using the styles with the content:
+      """
+      <div class="container">
+        <table>
+          <tr><td>Great</td></tr>
+          <tr><td>Great</td></tr>
+          <tr><td>Great</td></tr>
+          <tr><td>Great</td></tr>
+        </table>
+      </div>
+      """
+    Then the ".container table tr:eq(0) td" should have a background color of "transparent"
+    And the ".container table tr:eq(1) td" should have a background color of "rgb(229, 236, 249)"
+    And the ".container table tr:eq(2) td" should have a background color of "transparent"
+    And the ".container table tr:eq(3) td" should have a background color of "rgb(229, 236, 249)"
+
+  Scenario: Tables look good
+    When I open the HTML page using the styles with the content:
+      """
+      <div class="container">
+        <table>
+          <thead>
+            <tr><th>Great</th></tr>
+          </thead>
+          <tfoot>
+            <tr><td>Great</td></tr>
+          </tfoot>
+          <tbody>
+            <tr><td>Great</td></tr>
+            <tr><td>Great</td></tr>
+            <tr><td>Great</td></tr>
+          </tbody>
+        </table>
+      </div>
+      """
+    Then the ".container table" should have a width of 950px
+    And the ".container table thead th" should be bold
+    And the ".container table tfoot td" should be italic
+
+  Scenario: Highlight text
+    When I open the HTML page using the styles with the content:
+      """
+      <div class="container">
+        <a href="http://www.example.com" class="highlight">Text</a>
+      </div>
+      """
+    Then the ".container a" should have a background color of "rgb(255, 255, 0)"