ultimate-base 0.3.1.1 → 0.3.2

data/app/assets/stylesheets/ultimate/mixins/_vendors.scss

@@ -32,3 +32,12 @@
     #{$property}: $params;
   }
 }
+
+@mixin vendors-full($vendors, $property, $params, $origin: true) {
+  @each $vendor in $vendors {
+    -#{$vendor}-#{$property}: -#{$vendor}-#{$params};
+  }
+  @if $origin {
+    #{$property}: $params;
+  }
+}

data/app/assets/stylesheets/ultimate/mixins/css3.scss

@@ -122,7 +122,7 @@ $boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;
 //    produce:
 //      background-color: $bg-color;
 //      background-image:        -webkit-gradient(linear, right top, left top, color-stop(0%, green), color-stop(20%, orange), color-stop(100%, red)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
-//      background-image: -webkit-linear-gradient(right, green, orange 20%, red 100%); // Chrome 10+, Safari 5.1+
+//      background-image: -webkit-linear-gradient(right, green, orange 20%, red 100%); // Chrome 10+, Safari 5.1+, Android 4.0+
 //      background-image:    -moz-linear-gradient(right, green, orange 20%, red 100%); // FF 3.6+
 //      background-image:     -ms-linear-gradient(right, green, orange 20%, red 100%); // IE 10+
 //      background-image:      -o-linear-gradient(right, green, orange 20%, red 100%); // Opera 11.1+
@@ -147,7 +147,7 @@ $boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;
   }
   $wk_stops: ();
   $stops_length: length($stops);
-  $repcents-by-stop: 100 / ($stops_length - 1);
+  $percents-by-stop: 100 / ($stops_length - 1);
   $i: 0;
   $p: 0;
   @each $stop in $stops {
@@ -158,12 +158,12 @@ $boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;
     }
     $stop: "#{$cp}, #{nth($stop, 1)}";
     $wk_stops: append($wk_stops, color-stop(#{$stop}), comma);
-    $p: $p + $repcents-by-stop;
+    $p: $p + $percents-by-stop;
   }
   $bg-color: nth(nth($stops, 1), 1);
   background-color: $bg-color;
   background-image: -webkit-gradient(linear, $wk_start, $wk_end, $wk_stops);
-  $linear-gradient: linear-gradient($corner_angle, $stops);
+  $linear-gradient: linear-gradient($corner_angle, change-separator($stops));
   @include vendors-param(webkit moz ms o, background-image, $linear-gradient);
   @if $support-ie and $pie-url {
     -pie-background: $bg-color $linear-gradient;
@@ -189,35 +189,42 @@ $boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;
 //    example:
 //      @include radial-gradient(center 45deg, circle closest-side, (orange 0%, red 100%));
 //    produce:
-//      background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Chrome 10+, Safari 5.1+
+//      background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Chrome 10+, Safari 5.1+, Android 4.0+
 //      background-image:    -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // FF 3.6+
 //      background-image:     -ms-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // IE 10+
 //      background-image:      -o-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Opera 11.6+
 //      background-image:         radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // future
 @mixin radial-gradient($position_angle, $shape_size, $stops) {
-  // TODO may be deprecate background-image: -webkit-gradient(radial, $wk_start, $wk_end, unquote(list-to-string($wk_stops, ", ")));
   @include vendors-param(webkit moz ms o, background-image, radial-gradient($position_angle, $shape_size, change-separator($stops)));
 }
 
+@mixin border-gradient_simple($color_start, $color_stop, $is_horizontal: false) {
+  $color_mix: mix($color_start, $color_stop);
+  @if $is_horizontal {
+    border-color: $color_mix $color_stop $color_mix $color_start;
+  } @else {
+    border-color: $color_start $color_mix $color_stop;
+  }
+}
+
 // EXPERIMENTAL
+// Temporary remove webkit support, because find bug in Chromium 20
 @mixin border-gradient($color_start, $color_stop, $is_horizontal: false) {
+  @include border-gradient_simple($color_start, $color_stop, $is_horizontal);
   $start: top;
-  $wk_start: left top;
-  $wk_stop: left bottom;
+  //$wk_start: left top;
+  //$wk_stop: left bottom;
   @if $is_horizontal {
     $start: left;
-    $wk_stop: right top;
-  } @else {
-    $start: top;
-    $wk_stop: left bottom;
+    //$wk_stop: right top;
   }
-  border-color: $color_start mix($color_start, $color_stop) $color_stop;
-  -webkit-border-image: -webkit-gradient(linear, $wk_start, $wk_stop, from($color_start), to($color_stop)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
-  // TODO may be new -webkit-gradient?
-  -moz-border-image: -moz-linear-gradient($start, $color_start, $color_stop); // FF 3.5+
-   -ms-border-image:  -ms-linear-gradient($start, $color_start, $color_stop); // IE 10+
-    -o-border-image:   -o-linear-gradient($start, $color_start, $color_stop); // Opera 11.0+
-       border-image:      linear-gradient($start, $color_start, $color_stop); // future
+  // -webkit-border-image: -webkit-gradient(linear, $wk_start, $wk_stop, from($color_start), to($color_stop)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
+  @include vendors-full(moz ms o, border-image, linear-gradient($start, $color_start, $color_stop));
+  //-webkit-border-image: -webkit-linear-gradient($start, $color_start, $color_stop); // Chrome 10+, Safari 5.1+, Android 4.0+
+  //   -moz-border-image:    -moz-linear-gradient($start, $color_start, $color_stop); // FF 3.5+
+  //    -ms-border-image:     -ms-linear-gradient($start, $color_start, $color_stop); // IE 10+
+  //     -o-border-image:      -o-linear-gradient($start, $color_start, $color_stop); // Opera 11.0+
+  //        border-image:         linear-gradient($start, $color_start, $color_stop); // future
 }
 
 //  Provide cross-browser CSS opacity.
@@ -320,12 +327,16 @@ $boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;
   }
 }
 
-// TODO
-//@mixin placeholder($params) {
-//  &::-webkit-input-placeholder, &:-moz-placeholder {
-//    #{$params};
-//  }
-//}
-//input::-webkit-input-placeholder { color: #a3a3a3 !important;}
-//input:-moz-placeholder { color: #a3a3a3 !important; }
-
+//  Style the html5 input placeholder in browsers that support it.
+//  The styles for the input placeholder are passed as mixin content.
+//  Mostly supported properties: color, font-*, letter-spacing.
+//    example:
+//      @include input-placeholder {
+//        color: #bfbfbf;
+//        font-style: italic;
+//      }
+@mixin input-placeholder {
+  &::-webkit-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+}

data/app/assets/stylesheets/ultimate/mixins/microstructures.scss

@@ -65,18 +65,44 @@ $support-ie: true !default;
   }
 }
 
+@mixin before($display: block, $content: '') {
+  &:before {
+    display: $display;
+    content: $content;
+    @content;
+  }
+}
+
+@mixin after($display: block, $content: '') {
+  &:after {
+    display: $display;
+    content: $content;
+    @content;
+  }
+}
+
+@mixin both($display: block, $content: '') {
+  &:before, &:after {
+    display: $display;
+    content: $content;
+    @content;
+  }
+}
+
 //  Set to container includes float blocks.
-@mixin g-line {
+@mixin g-line($clear: both) {
   @include deprecate("@include g-line;", "overflow: hidden;");
   @if $support-ie {
     *zoom: 1;
     _height: 0;
   }
-  &:after {
-    content: " ";
-    display: block;
-    clear: both;
-    height: 0;
+  @include clearfix($clear);
+}
+
+// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
+@mixin clearfix($clear: both) {
+  @include both(table) {
+    clear: $clear;
   }
 }
 

data/lib/ultimate/base/version.rb

@@ -1,5 +1,5 @@
 module Ultimate
   module Base
-    VERSION = "0.3.1.1"
+    VERSION = "0.3.2"
   end
 end

data/test/javascripts/tests/helpers/asset_tag_test.js.coffee

@@ -36,9 +36,9 @@ test "image_alt", ->
 test "image_tag", ->
   equal image_tag("xml.png"), '<img alt="Xml" src="/images/xml.png" />'
   equal image_tag("rss.gif", alt: "rss syndication"), '<img alt="rss syndication" src="/images/rss.gif" />'
+  equal image_tag("gold.png", size: "20"), '<img alt="Gold" height="20" src="/images/gold.png" width="20" />'
   equal image_tag("gold.png", size: "45x70"), '<img alt="Gold" height="70" src="/images/gold.png" width="45" />'
   equal image_tag("gold.png", size: "45x70"), '<img alt="Gold" height="70" src="/images/gold.png" width="45" />'
-  equal image_tag("error.png", size: "45"), '<img alt="Error" src="/images/error.png" />'
   equal image_tag("error.png", size: "45 x 70"), '<img alt="Error" src="/images/error.png" />'
   equal image_tag("error.png", size: "x"), '<img alt="Error" src="/images/error.png" />'
   equal image_tag("google.com.png"), '<img alt="Google.com" src="/images/google.com.png" />'

data/test/javascripts/tests/helpers/form_options_test.js.coffee

@@ -0,0 +1,96 @@
+#= require ultimate/underscore/underscore
+#= require ultimate/underscore/underscore.string
+#= require ultimate/underscore/underscore.outcasts
+#= require ultimate/helpers/form_options
+
+module "Ultimate.Helpers.FormOptions"
+
+_.extend @, Ultimate.Helpers.FormOptions
+
+test "options_for_select", ->
+  options = '<option value="Denmark">Denmark</option><option value="USA">USA</option><option value="Sweden">Sweden</option>'
+  equal options_for_select(options), options
+  equal options_for_select([ "<Denmark>", "USA", "Sweden" ]),
+        "<option value=\"&lt;Denmark&gt;\">&lt;Denmark&gt;</option>\n<option value=\"USA\">USA</option>\n<option value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ "Denmark", "<USA>", "Sweden" ], "<USA>"),
+        "<option value=\"Denmark\">Denmark</option>\n<option selected=\"selected\" value=\"&lt;USA&gt;\">&lt;USA&gt;</option>\n<option value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ "Denmark", "<USA>", "Sweden" ], [ "<USA>", "Sweden" ]),
+        "<option value=\"Denmark\">Denmark</option>\n<option selected=\"selected\" value=\"&lt;USA&gt;\">&lt;USA&gt;</option>\n<option selected=\"selected\" value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ "Denmark", "<USA>", "Sweden" ], disabled: "<USA>"),
+        "<option value=\"Denmark\">Denmark</option>\n<option disabled=\"disabled\" value=\"&lt;USA&gt;\">&lt;USA&gt;</option>\n<option value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ "Denmark", "<USA>", "Sweden" ], disabled: ["<USA>", "Sweden"]),
+        "<option value=\"Denmark\">Denmark</option>\n<option disabled=\"disabled\" value=\"&lt;USA&gt;\">&lt;USA&gt;</option>\n<option disabled=\"disabled\" value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ "Denmark", "<USA>", "Sweden" ], selected: "Denmark", disabled: "<USA>"),
+        "<option selected=\"selected\" value=\"Denmark\">Denmark</option>\n<option disabled=\"disabled\" value=\"&lt;USA&gt;\">&lt;USA&gt;</option>\n<option value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ true, false ], selected: false, disabled: null),
+        "<option value=\"true\">true</option>\n<option selected=\"selected\" value=\"false\">false</option>"
+  equal options_for_select([1..3]),
+        "<option value=\"1\">1</option>\n<option value=\"2\">2</option>\n<option value=\"3\">3</option>"
+  equal options_for_select([ "ruby", "rubyonrails" ], "rubyonrails"),
+        "<option value=\"ruby\">ruby</option>\n<option selected=\"selected\" value=\"rubyonrails\">rubyonrails</option>"
+  equal options_for_select([ "ruby", "rubyonrails" ], "ruby"),
+        "<option selected=\"selected\" value=\"ruby\">ruby</option>\n<option value=\"rubyonrails\">rubyonrails</option>"
+  equal options_for_select([ "ruby", "rubyonrails", null ], "ruby"),
+        "<option selected=\"selected\" value=\"ruby\">ruby</option>\n<option value=\"rubyonrails\">rubyonrails</option>\n<option value=\"\"></option>"
+  equal options_for_select("$": "Dollar", "<DKR>": "<Kroner>"),
+        "<option value=\"Dollar\">$</option>\n<option value=\"&lt;Kroner&gt;\">&lt;DKR&gt;</option>"
+  equal options_for_select({ "$": "Dollar", "<DKR>": "<Kroner>" }, "Dollar"),
+        "<option selected=\"selected\" value=\"Dollar\">$</option>\n<option value=\"&lt;Kroner&gt;\">&lt;DKR&gt;</option>"
+  equal options_for_select({ "$": "Dollar", "<DKR>": "<Kroner>" }, [ "Dollar", "<Kroner>" ]),
+        "<option selected=\"selected\" value=\"Dollar\">$</option>\n<option selected=\"selected\" value=\"&lt;Kroner&gt;\">&lt;DKR&gt;</option>"
+  equal options_for_select([ [ "<Denmark>", { class: 'bold' } ], [ "USA", { onclick: "alert('Hello World');" } ], [ "Sweden" ], "Germany" ]),
+        "<option class=\"bold\" value=\"&lt;Denmark&gt;\">&lt;Denmark&gt;</option>\n<option onclick=\"alert(&apos;Hello World&apos;);\" value=\"USA\">USA</option>\n<option value=\"Sweden\">Sweden</option>\n<option value=\"Germany\">Germany</option>"
+  equal options_for_select([ [ "<Denmark>", { data: { test: 'bold' } } ] ]),
+        "<option data-test=\"bold\" value=\"&lt;Denmark&gt;\">&lt;Denmark&gt;</option>"
+  equal options_for_select([ [ "<Denmark>", { data: { test: '<bold>' } } ] ]),
+        "<option data-test=\"&lt;bold&gt;\" value=\"&lt;Denmark&gt;\">&lt;Denmark&gt;</option>"
+  equal options_for_select([ "<Denmark>", [ "USA", { class: 'bold' } ], "Sweden" ], "USA"),
+        "<option value=\"&lt;Denmark&gt;\">&lt;Denmark&gt;</option>\n<option class=\"bold\" selected=\"selected\" value=\"USA\">USA</option>\n<option value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ "<Denmark>", [ "USA", { class: 'bold' } ], "Sweden" ], [ "USA", "Sweden" ]),
+        "<option value=\"&lt;Denmark&gt;\">&lt;Denmark&gt;</option>\n<option class=\"bold\" selected=\"selected\" value=\"USA\">USA</option>\n<option selected=\"selected\" value=\"Sweden\">Sweden</option>"
+  equal options_for_select([ [ "<Denmark>", { onclick: 'alert("<code>")' } ] ]),
+        "<option onclick=\"alert(&quot;&lt;code&gt;&quot;)\" value=\"&lt;Denmark&gt;\">&lt;Denmark&gt;</option>"
+
+
+
+class Post
+  title           : null
+  author_name     : null
+  body            : null
+  secret          : null
+  written_on      : null
+  category        : null
+  origin          : null
+  allow_comments  : null
+
+  constructor: ->
+    keys = ['title', 'author_name', 'body', 'secret', 'written_on', 'category', 'origin', 'allow_comments']
+    for a, i in arguments
+      @[keys[i]] = a
+
+dummy_posts =
+  [ new Post("<Abe> went home", "<Abe>", "To a little house", "shh!"),
+    new Post("Babe went home", "Babe", "To a little house", "shh!"),
+    new Post("Cabe went home", "Cabe", "To a little house", "shh!") ]
+
+test "options_from_collection_for_select", ->
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title"),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option value=\"Babe\">Babe went home</option>\n<option value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title", "Babe"),
+  "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option selected=\"selected\" value=\"Babe\">Babe went home</option>\n<option value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title", [ "Babe", "Cabe" ]),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option selected=\"selected\" value=\"Babe\">Babe went home</option>\n<option selected=\"selected\" value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title", (p) -> p.author_name is 'Babe'),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option selected=\"selected\" value=\"Babe\">Babe went home</option>\n<option value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title", disabled: "Babe"),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option disabled=\"disabled\" value=\"Babe\">Babe went home</option>\n<option value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title", disabled: [ "Babe", "Cabe" ]),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option disabled=\"disabled\" value=\"Babe\">Babe went home</option>\n<option disabled=\"disabled\" value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title", selected: "Cabe", disabled: "Babe"),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option disabled=\"disabled\" value=\"Babe\">Babe went home</option>\n<option selected=\"selected\" value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", "title", disabled: (p) -> p.author_name in ['Babe', 'Cabe']),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option disabled=\"disabled\" value=\"Babe\">Babe went home</option>\n<option disabled=\"disabled\" value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, ((p) -> p.author_name), "title"),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option value=\"Babe\">Babe went home</option>\n<option value=\"Cabe\">Cabe went home</option>"
+  equal options_from_collection_for_select(dummy_posts, "author_name", (p) -> p.title),
+        "<option value=\"&lt;Abe&gt;\">&lt;Abe&gt; went home</option>\n<option value=\"Babe\">Babe went home</option>\n<option value=\"Cabe\">Cabe went home</option>"

data/test/javascripts/tests/helpers/form_tag_test.js.coffee

@@ -0,0 +1,225 @@
+#= require ultimate/underscore/underscore
+#= require ultimate/underscore/underscore.string
+#= require ultimate/underscore/underscore.outcasts
+#= require ultimate/helpers/form_tag
+
+module "Ultimate.Helpers.FormTag"
+
+_.extend @, Ultimate.Helpers.FormTag
+
+hidden_fields = (options = {}) ->
+  method = options['method']
+  txt =  '<div style="margin:0;padding:0;display:inline">'
+  txt += '<input name="utf8" type="hidden" value="&#x2713;" />'
+  if method and not (method in ['get', 'post'])
+    txt += '<input name="_method" type="hidden" value="' + method + '" />'
+  txt + '</div>'
+
+form_text = (action = 'http://www.example.com', options = {}) ->
+  [remote, enctype, html_class, id, method] = _.map(_.string.words('remote enctype html_class id method'), (key) -> options[key])
+  method = 'post'  if method isnt 'get'
+  txt =  "<form accept-charset=\"UTF-8\" action=\"#{action}\""
+  txt += " enctype=\"multipart/form-data\""  if enctype
+  txt += " data-remote=\"true\""  if remote
+  txt += " class=\"#{html_class}\""  if html_class
+  txt += " id=\"#{id}\""  if id
+  txt += " method=\"#{method}\">"
+  txt
+
+whole_form = (action = 'javascript:;', options = {}) ->
+  out = form_text(action, options) + hidden_fields(options)
+  if block = _.outcasts.blockGiven(arguments)
+    out += block() + "</form>"
+  out
+
+test "form_tag", ->
+  equal form_tag(),                     whole_form()
+  equal form_tag({}, multipart: true),  whole_form(null, enctype: true)
+  equal form_tag({}, method: 'patch'),  whole_form(null, method: 'patch')
+  equal form_tag({}, method: 'put'),    whole_form(null, method: 'put')
+  equal form_tag({}, method: 'delete'), whole_form(null, method: 'delete')
+  equal form_tag({}, remote: true),     whole_form(null, remote: true)
+  equal form_tag(-> 'Hello world!'),    whole_form(null, -> 'Hello world!')
+  equal form_tag(null, method: 'put', -> 'Hello world!'), whole_form(null, method: 'put', -> 'Hello world!')
+
+test "select_tag", ->
+  equal select_tag("people", "<option>david</option>"), 
+        '<select id="people" name="people"><option>david</option></select>'
+  equal select_tag("colors", "<option>Red</option><option>Blue</option><option>Green</option>", multiple: true),
+        '<select id="colors" multiple="multiple" name="colors[]"><option>Red</option><option>Blue</option><option>Green</option></select>'
+  equal select_tag("places", "<option>Home</option><option>Work</option><option>Pub</option>", disabled: true),
+        '<select disabled="disabled" id="places" name="places"><option>Home</option><option>Work</option><option>Pub</option></select>'
+  equal select_tag("places", "<option>Home</option><option>Work</option><option>Pub</option>", include_blank: true),
+        '<select id="places" name="places"><option value=""></option><option>Home</option><option>Work</option><option>Pub</option></select>'
+  equal select_tag("places", "<option>Home</option><option>Work</option><option>Pub</option>", prompt: "string"),
+        '<select id="places" name="places"><option value="">string</option><option>Home</option><option>Work</option><option>Pub</option></select>'
+  equal select_tag("places", "<option>Home</option><option>Work</option><option>Pub</option>", prompt: "<script>alert(1337)</script>"),
+        '<select id="places" name="places"><option value="">&lt;script&gt;alert(1337)&lt;/script&gt;</option><option>Home</option><option>Work</option><option>Pub</option></select>'
+  equal select_tag("places", "<option>Home</option><option>Work</option><option>Pub</option>", prompt: "string", include_blank: true),
+        '<select id="places" name="places"><option value="">string</option><option value=""></option><option>Home</option><option>Work</option><option>Pub</option></select>'
+  equal select_tag("places", null, include_blank: true),
+        '<select id="places" name="places"><option value=""></option></select>'
+  equal select_tag("places", null, prompt: "string"),
+        '<select id="places" name="places"><option value="">string</option></select>'
+  
+test "text_field_tag", ->
+  equal text_field_tag("title"),
+        '<input id="title" name="title" type="text" />'
+  equal text_field_tag("title", "Hello!", class: "admin"),
+        '<input class="admin" id="title" name="title" type="text" value="Hello!" />'
+  equal text_field_tag("title", "Hello!", size: 75),
+        '<input id="title" name="title" size="75" type="text" value="Hello!" />'
+  equal text_field_tag("title", "Hello!", disabled: true),
+        '<input disabled="disabled" id="title" name="title" type="text" value="Hello!" />'
+  equal text_field_tag("title", "Hello!", size: 70, maxlength: 80),
+        '<input id="title" maxlength="80" name="title" size="70" type="text" value="Hello!" />'
+
+test "label_tag", ->
+  equal label_tag("title"), '<label for="title">Title</label>'
+  equal label_tag("title", "My Title"), '<label for="title">My Title</label>'
+  equal label_tag("title", "My Title", class: "small-label"), '<label class="small-label" for="title">My Title</label>'
+  equal label_tag( -> "Blocked" ), '<label>Blocked</label>'
+  equal label_tag("clock", -> "Grandfather"), '<label for="clock">Grandfather</label>'
+  equal label_tag("clock", id: "label_clock", -> "Grandfather"), '<label for="clock" id="label_clock">Grandfather</label>'
+
+test "hidden_field_tag", ->
+  equal hidden_field_tag('id', 3), '<input id="id" name="id" type="hidden" value="3" />'
+
+test "file_field_tag", ->
+  equal file_field_tag('picsplz'), '<input id="picsplz" name="picsplz" type="file" />'
+  equal file_field_tag('picsplz', class: 'pix'), '<input class="pix" id="picsplz" name="picsplz" type="file" />'
+
+test "password_field_tag", ->
+  equal password_field_tag(), '<input id="password" name="password" type="password" />'
+
+test "text_area_tag", ->
+  equal text_area_tag("body", "hello world", size: "20x40"),
+        '<textarea cols="20" id="body" name="body" rows="40">\nhello world</textarea>'
+  equal text_area_tag("body", "hello world", size: 20),
+        '<textarea id="body" name="body">\nhello world</textarea>'
+  equal text_area_tag("body", "<b>hello world</b>", size: "20x40"),
+        '<textarea cols="20" id="body" name="body" rows="40">\n&lt;b&gt;hello world&lt;/b&gt;</textarea>'
+  equal text_area_tag("body", "<b>hello world</b>", size: "20x40", escape: false),
+        '<textarea cols="20" id="body" name="body" rows="40">\n<b>hello world</b></textarea>'
+  equal text_area_tag("body", null, escape: false),
+        '<textarea id="body" name="body">\n</textarea>'
+
+test "check_box_tag", ->
+  equal check_box_tag('admin'), '<input id="admin" name="admin" type="checkbox" value="1" />'
+
+test "radio_button_tag", ->
+  equal radio_button_tag("people", "david"), 
+        '<input id="people_david" name="people" type="radio" value="david" />'
+  equal radio_button_tag("num_people", 5), 
+        '<input id="num_people_5" name="num_people" type="radio" value="5" />'
+  equal radio_button_tag("gender", "m") + radio_button_tag("gender", "f"), 
+        '<input id="gender_m" name="gender" type="radio" value="m" /><input id="gender_f" name="gender" type="radio" value="f" />'
+  equal radio_button_tag("opinion", "-1") + radio_button_tag("opinion", "1"), 
+        '<input id="opinion_-1" name="opinion" type="radio" value="-1" /><input id="opinion_1" name="opinion" type="radio" value="1" />'
+  equal radio_button_tag("person[gender]", "m"),
+        '<input id="person_gender_m" name="person[gender]" type="radio" value="m" />'
+  equal radio_button_tag('ctrlname', 'apache2.2'),
+        '<input id="ctrlname_apache2.2" name="ctrlname" type="radio" value="apache2.2" />'
+
+test "submit_tag", ->
+  equal submit_tag("Save", onclick: "alert('hello!')", data: { disable_with: "Saving..." }),
+        '<input data-disable-with="Saving..." name="commit" onclick="alert(&apos;hello!&apos;)" type="submit" value="Save" />'
+  equal submit_tag("Save", data: { disable_with: "Saving..." }),
+        '<input data-disable-with="Saving..." name="commit" type="submit" value="Save" />'
+  equal submit_tag("Save", data: { confirm: "Are you sure?" }),
+        '<input data-confirm="Are you sure?" name="commit" type="submit" value="Save" />'
+
+test "button_tag", ->
+  equal button_tag(),
+        '<button name="button" type="submit">Button</button>'
+  equal button_tag("Save", type: "submit"),
+        '<button name="button" type="submit">Save</button>'
+  equal button_tag("Button", type: "button"),
+        '<button name="button" type="button">Button</button>'
+  equal button_tag("Reset", type: "reset"),
+        '<button name="button" type="reset">Reset</button>'
+  equal button_tag("Reset", type: "reset", disabled: true),
+        '<button disabled="disabled" name="button" type="reset">Reset</button>'
+  equal button_tag("<b>Reset</b>", type: "reset", disabled: true),
+        '<button disabled="disabled" name="button" type="reset">&lt;b&gt;Reset&lt;/b&gt;</button>'
+  equal button_tag( -> 'Content' ),
+        '<button name="button" type="submit">Content</button>'
+  equal button_tag(name: 'temptation', type: 'button', -> content_tag('strong', 'Do not press me')),
+        '<button name="temptation" type="button"><strong>Do not press me</strong></button>'
+  equal button_tag("Save", type: "submit", data: { confirm: "Are you sure?" }),
+        '<button data-confirm="Are you sure?" name="button" type="submit">Save</button>'
+
+test "image_submit_tag", ->
+  equal image_submit_tag("save.gif", data: { confirm: "Are you sure?" }),
+        '<input data-confirm="Are you sure?" src="/images/save.gif" type="image" />'
+
+test "field_set_tag", ->
+  equal field_set_tag('Your details', -> 'Hello world!'),
+        '<fieldset><legend>Your details</legend>Hello world!</fieldset>'
+  equal field_set_tag(-> 'Hello world!'),
+        '<fieldset>Hello world!</fieldset>'
+  equal field_set_tag('', -> 'Hello world!'),
+        '<fieldset>Hello world!</fieldset>'
+  equal field_set_tag('', class: 'format', -> 'Hello world!'),
+        '<fieldset class="format">Hello world!</fieldset>'
+  equal field_set_tag(),
+        '<fieldset></fieldset>'
+  equal field_set_tag('You legend!'),
+        '<fieldset><legend>You legend!</legend></fieldset>'
+
+test "different fields tags helpers", ->
+  equal color_field_tag("car"),
+        '<input id="car" name="car" type="color" />'
+  equal search_field_tag("query"),
+        '<input id="query" name="query" type="search" />'
+  equal telephone_field_tag("cell"),
+        '<input id="cell" name="cell" type="tel" />'
+  equal telephone_field_tag("cell"),
+        phone_field_tag("cell")
+  equal date_field_tag("cell"),
+        '<input id="cell" name="cell" type="date" />'
+  equal time_field_tag("cell"),
+        '<input id="cell" name="cell" type="time" />'
+  equal datetime_field_tag("appointment"),
+        '<input id="appointment" name="appointment" type="datetime" />'
+  equal datetime_local_field_tag("appointment"),
+        '<input id="appointment" name="appointment" type="datetime-local" />'
+  equal month_field_tag("birthday"),
+        '<input id="birthday" name="birthday" type="month" />'
+  equal week_field_tag("birthday"),
+        '<input id="birthday" name="birthday" type="week" />'
+  equal url_field_tag("homepage"),
+        '<input id="homepage" name="homepage" type="url" />'
+  equal email_field_tag("address"),
+        '<input id="address" name="address" type="email" />'
+  equal number_field_tag("quantity", null, in: {min: "1", max: "9"}),
+        '<input id="quantity" max="9" min="1" name="quantity" type="number" />'
+  equal range_field_tag("volume", null, in: {min: 0, max: 11}, step: 0.1),
+        '<input id="volume" max="11" min="0" name="volume" step="0.1" type="range" />'
+
+test "boolean options", ->
+  equal check_box_tag("admin", 1, true, disabled: true, readonly: "yes"),
+        '<input checked="checked" disabled="disabled" id="admin" name="admin" readonly="readonly" type="checkbox" value="1" />'
+  equal check_box_tag("admin", 1, true, disabled: false, readonly: null),
+        '<input checked="checked" id="admin" name="admin" type="checkbox" value="1" />'
+  equal tag('input', type: "checkbox", checked: false),
+        '<input type="checkbox" />'
+  equal select_tag("people", "<option>david</option>", multiple: true),
+        '<select id="people" multiple="multiple" name="people[]"><option>david</option></select>'
+  equal select_tag("people[]", "<option>david</option>", multiple: true),
+        '<select id="people_" multiple="multiple" name="people[]"><option>david</option></select>'
+  equal select_tag("people", "<option>david</option>", multiple: null),
+        '<select id="people" name="people"><option>david</option></select>'
+
+test "options side effects", ->
+  options = { option: "random_option" }
+  text_area_tag "body", "hello world", options
+  deepEqual options, { option: "random_option" }
+  submit_tag "submit value", options
+  deepEqual options, { option: "random_option" }
+  button_tag "button value", options
+  deepEqual options, { option: "random_option" }
+  image_submit_tag "submit source", options
+  deepEqual options, { option: "random_option" }
+  label_tag "submit source", "title", options
+  deepEqual options, { option: "random_option" }