Permalink
Browse files

Test some typography!

  • Loading branch information...
1 parent 4775562 commit b59f2bb8066e34f3b1b9dc7e16dd1295bd6eaeeb @joshuaclayton committed May 20, 2011
Showing with 117 additions and 0 deletions.
  1. +20 −0 features/step_definitions/blueprint_steps.rb
  2. +19 −0 features/support/document_element.rb
  3. +78 −0 features/typography.feature
@@ -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
@@ -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
@@ -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)"

0 comments on commit b59f2bb

Please sign in to comment.