packages feed

Elm 0.8.0.2 → 0.8.0.3

raw patch · 4 files changed

+274/−264 lines, 4 filesPVP ok

version bump matches the API change (PVP)

API changes (from Hackage documentation)

Files

Elm.cabal view
@@ -1,5 +1,5 @@ Name:                Elm-Version:             0.8.0.2+Version:             0.8.0.3 Synopsis:            The Elm language module. Description:         Elm aims to make client-side web-development more pleasant.                      It is a statically/strongly typed, functional reactive
compiler/Gen/CompileToJS.hs view
@@ -272,7 +272,8 @@   where      jsDefs defs = mapM toJS (sortBy f defs)     f a b = compare (valueOf a) (valueOf b)-    valueOf (FnDef _ args _) = min 1 (length args)+    valueOf (FnDef _ [] _) = 2+    valueOf (FnDef _ _ _) = 1     valueOf (OpDef _ _ _ _)  = 1  caseToJS span e ps = do
docs.json view
@@ -1585,6 +1585,10 @@           "type" : "Int -> Element -> Element",
           "desc" : "Create an `Element` with a given height.\n"
         },
+        { "name" : "size",
+          "type" : "Int -> Int -> Element -> Element",
+          "desc" : "Create an `Element` with a new width and height.\n"
+        },
         { "name" : "opacity",
           "type" : "Float -> Element -> Element",
           "desc" : "Create an `Element` with a given opacity. Opacity is a number between 0 and 1\nwhere 0 means totally clear.\n"
@@ -1637,6 +1641,10 @@           "type" : "(Int,Int) -> ImageStyle",
           "desc" : ""
         },
+        { "name" : "Tiled",
+          "type" : "ImageStyle",
+          "desc" : ""
+        },
         { "name" : "image",
           "type" : "Int -> Int -> String -> Element",
           "desc" : "Create an image given a width, height, and image source.\n"
@@ -1646,8 +1654,12 @@           "desc" : "Create a fitted image given a width, height, and image source.\nThis will crop the picture to best fill the given dimensions.\n"
         },
         { "name" : "croppedImage",
-          "type" : "Int -> Int -> (Int,Int) -> String -> Element",
-          "desc" : "Create a cropped image. Take a rectangle out of the picture starting\nat the given top left coordinate. If you have a 140-by-140 image,\nthe following will cut a 100-by-100 square out of the middle of it.\n\n        croppedImage 100 100 (20,20) \"yogi.jpg\"\n"
+          "type" : "(Int,Int) -> Int -> Int -> String -> Element",
+          "desc" : "Create a cropped image. Take a rectangle out of the picture starting\nat the given top left coordinate. If you have a 140-by-140 image,\nthe following will cut a 100-by-100 square out of the middle of it.\n\n        croppedImage (20,20) 100 100 \"yogi.jpg\"\n"
+        },
+        { "name" : "tiledImage",
+          "type" : "Int -> Int -> String -> Element",
+          "desc" : ""
         },
         { "name" : "P",
           "type" : "Three",
elm-runtime.js view
@@ -3792,290 +3792,295 @@   var _ = Elm.Color(elm); var Color = _;
   var _ = Elm.Maybe(elm); var Maybe = _;
   var Just = _.Just, Nothing = _.Nothing;
-  var Image_13 = F4(function(a1, a2, a3, a4){
+  var Image_14 = F4(function(a1, a2, a3, a4){
     return {ctor:"Image", _0:a1, _1:a2, _2:a3, _3:a4};});
-  var Container_14 = F2(function(a1, a2){
+  var Container_15 = F2(function(a1, a2){
     return {ctor:"Container", _0:a1, _1:a2};});
-  var Flow_15 = F2(function(a1, a2){
+  var Flow_16 = F2(function(a1, a2){
     return {ctor:"Flow", _0:a1, _1:a2};});
-  var Spacer_16 = {ctor:"Spacer"};
-  var RawHtml_17 = function(a1){
+  var Spacer_17 = {ctor:"Spacer"};
+  var RawHtml_18 = function(a1){
     return {ctor:"RawHtml", _0:a1};};
-  var Custom_18 = {ctor:"Custom"};
-  var Plain_19 = {ctor:"Plain"};
-  var Fitted_20 = {ctor:"Fitted"};
-  var Cropped_21 = function(a1){
+  var Custom_19 = {ctor:"Custom"};
+  var Plain_20 = {ctor:"Plain"};
+  var Fitted_21 = {ctor:"Fitted"};
+  var Cropped_22 = function(a1){
     return {ctor:"Cropped", _0:a1};};
-  var P_25 = {ctor:"P"};
-  var Z_26 = {ctor:"Z"};
-  var N_27 = {ctor:"N"};
-  var Absolute_28 = function(a1){
+  var Tiled_23 = {ctor:"Tiled"};
+  var P_28 = {ctor:"P"};
+  var Z_29 = {ctor:"Z"};
+  var N_30 = {ctor:"N"};
+  var Absolute_31 = function(a1){
     return {ctor:"Absolute", _0:a1};};
-  var Relative_29 = function(a1){
+  var Relative_32 = function(a1){
     return {ctor:"Relative", _0:a1};};
-  var DUp_33 = {ctor:"DUp"};
-  var DDown_34 = {ctor:"DDown"};
-  var DLeft_35 = {ctor:"DLeft"};
-  var DRight_36 = {ctor:"DRight"};
-  var DIn_37 = {ctor:"DIn"};
-  var DOut_38 = {ctor:"DOut"};
-  var Properties_0 = F7(function(id_70, width_71, height_72, opacity_73, color_74, href_75, tag_76){
+  var DUp_36 = {ctor:"DUp"};
+  var DDown_37 = {ctor:"DDown"};
+  var DLeft_38 = {ctor:"DLeft"};
+  var DRight_39 = {ctor:"DRight"};
+  var DIn_40 = {ctor:"DIn"};
+  var DOut_41 = {ctor:"DOut"};
+  var Properties_0 = F7(function(id_73, width_74, height_75, opacity_76, color_77, href_78, tag_79){
     return {
       _:{
       },
-      color:color_74,
-      height:height_72,
-      href:href_75,
-      id:id_70,
-      opacity:opacity_73,
-      tag:tag_76,
-      width:width_71};});
-  var Element_1 = F2(function(props_77, element_78){
+      color:color_77,
+      height:height_75,
+      href:href_78,
+      id:id_73,
+      opacity:opacity_76,
+      tag:tag_79,
+      width:width_74};});
+  var Element_1 = F2(function(props_80, element_81){
     return {
       _:{
       },
-      element:element_78,
-      props:props_77};});
-  var widthOf_2 = function(e_79){
-    return e_79.props.width;};
-  var heightOf_3 = function(e_80){
-    return e_80.props.height;};
-  var sizeOf_4 = function(e_81){
-    return {ctor:"Tuple2", _0:e_81.props.width, _1:e_81.props.height};};
-  var width_5 = F2(function(nw_82, e_83){
+      element:element_81,
+      props:props_80};});
+  var widthOf_2 = function(e_82){
+    return e_82.props.width;};
+  var heightOf_3 = function(e_83){
+    return e_83.props.height;};
+  var sizeOf_4 = function(e_84){
+    return {ctor:"Tuple2", _0:e_84.props.width, _1:e_84.props.height};};
+  var width_5 = F2(function(nw_85, e_86){
     return function(){
-      var p_84 = e_83.props;
-      var props_85 = function(){ 
-      var case0 = e_83.element;
+      var p_87 = e_86.props;
+      var props_88 = function(){ 
+      var case0 = e_86.element;
       switch (case0.ctor) {
         case 'Image':
-          return _N.replace([['height',((case0._2/case0._1)*nw_82)]], p_84);
+          return _N.replace([['height',((case0._2/case0._1)*nw_85)]], p_87);
         case 'RawHtml':
           return _N.replace([['height',function(){
-            var _50000_89 = A2(htmlHeight, nw_82, case0._0);
-            var w_90 = function(){ 
-            switch (_50000_89.ctor) {
+            var _50000_92 = A2(htmlHeight, nw_85, case0._0);
+            var w_93 = function(){ 
+            switch (_50000_92.ctor) {
               case 'Tuple2':
-                return _50000_89._0;
+                return _50000_92._0;
             }_E.Case('Line 50, Column 71') }();
-            var h_91 = function(){ 
-            switch (_50000_89.ctor) {
+            var h_94 = function(){ 
+            switch (_50000_92.ctor) {
               case 'Tuple2':
-                return _50000_89._1;
+                return _50000_92._1;
             }_E.Case('Line 50, Column 71') }();
-            return h_91;}()]], p_84);
+            return h_94;}()]], p_87);
       }
-      return p_84; }();
+      return p_87; }();
       return {
         _:{
         },
-        element:e_83.element,
-        props:_N.replace([['width',nw_82]], props_85)};}();});
-  var height_6 = F2(function(nh_96, e_97){
+        element:e_86.element,
+        props:_N.replace([['width',nw_85]], props_88)};}();});
+  var height_6 = F2(function(nh_99, e_100){
     return function(){
-      var p_98 = e_97.props;
-      var props_99 = function(){ 
-      var case12 = e_97.element;
+      var p_101 = e_100.props;
+      var props_102 = function(){ 
+      var case12 = e_100.element;
       switch (case12.ctor) {
         case 'Image':
-          return _N.replace([['width',((case12._1/case12._2)*nh_96)]], p_98);
+          return _N.replace([['width',((case12._1/case12._2)*nh_99)]], p_101);
       }
-      return p_98; }();
+      return p_101; }();
       return {
         _:{
         },
-        element:e_97.element,
-        props:_N.replace([['height',nh_96]], p_98)};}();});
-  var opacity_7 = F2(function(o_102, e_103){
+        element:e_100.element,
+        props:_N.replace([['height',nh_99]], p_101)};}();});
+  var size_7 = F3(function(w_105, h_106, e_107){
+    return A2(height_6, h_106, A2(width_5, w_105, e_107));});
+  var opacity_8 = F2(function(o_108, e_109){
     return function(){
-      var p_104 = e_103.props;
+      var p_110 = e_109.props;
       return {
         _:{
         },
-        element:e_103.element,
-        props:_N.replace([['opacity',o_102]], p_104)};}();});
-  var color_8 = F2(function(c_105, e_106){
+        element:e_109.element,
+        props:_N.replace([['opacity',o_108]], p_110)};}();});
+  var color_9 = F2(function(c_111, e_112){
     return function(){
-      var p_107 = e_106.props;
+      var p_113 = e_112.props;
       return {
         _:{
         },
-        element:e_106.element,
-        props:_N.replace([['color',Just(c_105)]], p_107)};}();});
-  var tag_9 = F2(function(name_108, e_109){
+        element:e_112.element,
+        props:_N.replace([['color',Just(c_111)]], p_113)};}();});
+  var tag_10 = F2(function(name_114, e_115){
     return function(){
-      var p_110 = e_109.props;
+      var p_116 = e_115.props;
       return {
         _:{
         },
-        element:e_109.element,
-        props:_N.replace([['tag',JS.fromString(name_108)]], p_110)};}();});
-  var link_10 = F2(function(href_111, e_112){
+        element:e_115.element,
+        props:_N.replace([['tag',JS.fromString(name_114)]], p_116)};}();});
+  var link_11 = F2(function(href_117, e_118){
     return function(){
-      var p_113 = e_112.props;
+      var p_119 = e_118.props;
       return {
         _:{
         },
-        element:e_112.element,
-        props:_N.replace([['href',JS.fromString(href_111)]], p_113)};}();});
-  var newElement_12 = F3(function(w_114, h_115, e_116){
+        element:e_118.element,
+        props:_N.replace([['href',JS.fromString(href_117)]], p_119)};}();});
+  var newElement_13 = F3(function(w_120, h_121, e_122){
     return {
       _:{
       },
-      element:e_116,
-      props:A7(Properties_0, guid({ctor:"Tuple0"}), w_114, h_115, 1, Nothing, emptyStr_11, emptyStr_11)};});
-  var image_22 = F3(function(w_117, h_118, src_119){
-    return A3(newElement_12, w_117, h_118, A4(Image_13, Plain_19, w_117, h_118, JS.fromString(src_119)));});
-  var fittedImage_23 = F3(function(w_120, h_121, src_122){
-    return A3(newElement_12, w_120, h_121, A4(Image_13, Fitted_20, w_120, h_121, JS.fromString(src_122)));});
-  var croppedImage_24 = F4(function(w_123, h_124, pos_125, src_126){
-    return A3(newElement_12, w_123, h_124, A4(Image_13, Cropped_21(pos_125), w_123, h_124, JS.fromString(src_126)));});
-  var Position_30 = F4(function(horizontal_127, vertical_128, x_129, y_130){
+      element:e_122,
+      props:A7(Properties_0, guid({ctor:"Tuple0"}), w_120, h_121, 1, Nothing, emptyStr_12, emptyStr_12)};});
+  var image_24 = F3(function(w_123, h_124, src_125){
+    return A3(newElement_13, w_123, h_124, A4(Image_14, Plain_20, w_123, h_124, JS.fromString(src_125)));});
+  var fittedImage_25 = F3(function(w_126, h_127, src_128){
+    return A3(newElement_13, w_126, h_127, A4(Image_14, Fitted_21, w_126, h_127, JS.fromString(src_128)));});
+  var croppedImage_26 = F4(function(pos_129, w_130, h_131, src_132){
+    return A3(newElement_13, w_130, h_131, A4(Image_14, Cropped_22(pos_129), w_130, h_131, JS.fromString(src_132)));});
+  var tiledImage_27 = F3(function(w_133, h_134, src_135){
+    return A3(newElement_13, w_133, h_134, A4(Image_14, Tiled_23, w_133, h_134, JS.fromString(src_135)));});
+  var Position_33 = F4(function(horizontal_136, vertical_137, x_138, y_139){
     return {
       _:{
       },
-      horizontal:horizontal_127,
-      vertical:vertical_128,
-      x:x_129,
-      y:y_130};});
-  var container_31 = F4(function(w_131, h_132, pos_133, e_134){
-    return A3(newElement_12, w_131, h_132, A2(Container_14, pos_133, e_134));});
-  var spacer_32 = F2(function(w_135, h_136){
-    return A3(newElement_12, w_135, h_136, Spacer_16);});
-  var flow_39 = F2(function(dir_137, es_138){
+      horizontal:horizontal_136,
+      vertical:vertical_137,
+      x:x_138,
+      y:y_139};});
+  var container_34 = F4(function(w_140, h_141, pos_142, e_143){
+    return A3(newElement_13, w_140, h_141, A2(Container_15, pos_142, e_143));});
+  var spacer_35 = F2(function(w_144, h_145){
+    return A3(newElement_13, w_144, h_145, Spacer_17);});
+  var flow_42 = F2(function(dir_146, es_147){
     return function(){
-      var ws_139 = A2(List.map, widthOf_2, es_138);
-      var hs_140 = A2(List.map, heightOf_3, es_138);
-      var newFlow_141 = F2(function(w_142, h_143){
-        return A3(newElement_12, w_142, h_143, A2(Flow_15, dir_137, es_138));});
-      return (_N.eq(es_138,_L.Nil)?A2(spacer_32, 0, 0):function(){ 
-      switch (dir_137.ctor) {
+      var newFlow_150 = F2(function(w_151, h_152){
+        return A3(newElement_13, w_151, h_152, A2(Flow_16, dir_146, es_147));});
+      var ws_148 = A2(List.map, widthOf_2, es_147);
+      var hs_149 = A2(List.map, heightOf_3, es_147);
+      return (_N.eq(es_147,_L.Nil)?A2(spacer_35, 0, 0):function(){ 
+      switch (dir_146.ctor) {
         case 'DDown':
-          return A2(newFlow_141, List.maximum(ws_139), List.sum(hs_140));
+          return A2(newFlow_150, List.maximum(ws_148), List.sum(hs_149));
         case 'DIn':
-          return A2(newFlow_141, List.maximum(ws_139), List.maximum(hs_140));
+          return A2(newFlow_150, List.maximum(ws_148), List.maximum(hs_149));
         case 'DLeft':
-          return A2(newFlow_141, List.sum(ws_139), List.maximum(hs_140));
+          return A2(newFlow_150, List.sum(ws_148), List.maximum(hs_149));
         case 'DOut':
-          return A2(newFlow_141, List.maximum(ws_139), List.maximum(hs_140));
+          return A2(newFlow_150, List.maximum(ws_148), List.maximum(hs_149));
         case 'DRight':
-          return A2(newFlow_141, List.sum(ws_139), List.maximum(hs_140));
+          return A2(newFlow_150, List.sum(ws_148), List.maximum(hs_149));
         case 'DUp':
-          return A2(newFlow_141, List.maximum(ws_139), List.sum(hs_140));
-      }_E.Case('Line 152, Column 3') }());}();});
-  var above_40 = F2(function(hi_144, lo_145){
-    return A3(newElement_12, A2(max, widthOf_2(hi_144), widthOf_2(lo_145)), (heightOf_3(hi_144)+heightOf_3(lo_145)), A2(Flow_15, DDown_34, _L.Cons(hi_144,_L.Cons(lo_145,_L.Nil))));});
-  var below_41 = F2(function(lo_146, hi_147){
-    return A3(newElement_12, A2(max, widthOf_2(hi_147), widthOf_2(lo_146)), (heightOf_3(hi_147)+heightOf_3(lo_146)), A2(Flow_15, DDown_34, _L.Cons(hi_147,_L.Cons(lo_146,_L.Nil))));});
-  var beside_42 = F2(function(lft_148, rht_149){
-    return A3(newElement_12, (widthOf_2(lft_148)+widthOf_2(rht_149)), A2(max, heightOf_3(lft_148), heightOf_3(rht_149)), A2(Flow_15, right_67, _L.Cons(lft_148,_L.Cons(rht_149,_L.Nil))));});
-  var layers_43 = function(es_150){
+          return A2(newFlow_150, List.maximum(ws_148), List.sum(hs_149));
+      }_E.Case('Line 160, Column 3') }());}();});
+  var above_43 = F2(function(hi_153, lo_154){
+    return A3(newElement_13, A2(max, widthOf_2(hi_153), widthOf_2(lo_154)), (heightOf_3(hi_153)+heightOf_3(lo_154)), A2(Flow_16, DDown_37, _L.Cons(hi_153,_L.Cons(lo_154,_L.Nil))));});
+  var below_44 = F2(function(lo_155, hi_156){
+    return A3(newElement_13, A2(max, widthOf_2(hi_156), widthOf_2(lo_155)), (heightOf_3(hi_156)+heightOf_3(lo_155)), A2(Flow_16, DDown_37, _L.Cons(hi_156,_L.Cons(lo_155,_L.Nil))));});
+  var beside_45 = F2(function(lft_157, rht_158){
+    return A3(newElement_13, (widthOf_2(lft_157)+widthOf_2(rht_158)), A2(max, heightOf_3(lft_157), heightOf_3(rht_158)), A2(Flow_16, right_70, _L.Cons(lft_157,_L.Cons(rht_158,_L.Nil))));});
+  var layers_46 = function(es_159){
     return function(){
-      var ws_151 = A2(List.map, widthOf_2, es_150);
-      var hs_152 = A2(List.map, heightOf_3, es_150);
-      return A3(newElement_12, List.maximum(ws_151), List.maximum(hs_152), A2(Flow_15, DOut_38, es_150));}();};
-  var middleAt_55 = F2(function(x_153, y_154){
+      var ws_160 = A2(List.map, widthOf_2, es_159);
+      var hs_161 = A2(List.map, heightOf_3, es_159);
+      return A3(newElement_13, List.maximum(ws_160), List.maximum(hs_161), A2(Flow_16, DOut_41, es_159));}();};
+  var middleAt_58 = F2(function(x_162, y_163){
     return {
       _:{
       },
-      horizontal:Z_26,
-      vertical:Z_26,
-      x:x_153,
-      y:y_154};});
-  var topLeftAt_56 = F2(function(x_155, y_156){
+      horizontal:Z_29,
+      vertical:Z_29,
+      x:x_162,
+      y:y_163};});
+  var topLeftAt_59 = F2(function(x_164, y_165){
     return {
       _:{
       },
-      horizontal:N_27,
-      vertical:P_25,
-      x:x_155,
-      y:y_156};});
-  var topRightAt_57 = F2(function(x_157, y_158){
+      horizontal:N_30,
+      vertical:P_28,
+      x:x_164,
+      y:y_165};});
+  var topRightAt_60 = F2(function(x_166, y_167){
     return {
       _:{
       },
-      horizontal:P_25,
-      vertical:P_25,
-      x:x_157,
-      y:y_158};});
-  var bottomLeftAt_58 = F2(function(x_159, y_160){
+      horizontal:P_28,
+      vertical:P_28,
+      x:x_166,
+      y:y_167};});
+  var bottomLeftAt_61 = F2(function(x_168, y_169){
     return {
       _:{
       },
-      horizontal:N_27,
-      vertical:N_27,
-      x:x_159,
-      y:y_160};});
-  var bottomRightAt_59 = F2(function(x_161, y_162){
+      horizontal:N_30,
+      vertical:N_30,
+      x:x_168,
+      y:y_169};});
+  var bottomRightAt_62 = F2(function(x_170, y_171){
     return {
       _:{
       },
-      horizontal:P_25,
-      vertical:N_27,
-      x:x_161,
-      y:y_162};});
-  var midLeftAt_60 = F2(function(x_163, y_164){
+      horizontal:P_28,
+      vertical:N_30,
+      x:x_170,
+      y:y_171};});
+  var midLeftAt_63 = F2(function(x_172, y_173){
     return {
       _:{
       },
-      horizontal:N_27,
-      vertical:Z_26,
-      x:x_163,
-      y:y_164};});
-  var midRightAt_61 = F2(function(x_165, y_166){
+      horizontal:N_30,
+      vertical:Z_29,
+      x:x_172,
+      y:y_173};});
+  var midRightAt_64 = F2(function(x_174, y_175){
     return {
       _:{
       },
-      horizontal:P_25,
-      vertical:Z_26,
-      x:x_165,
-      y:y_166};});
-  var midTopAt_62 = F2(function(x_167, y_168){
+      horizontal:P_28,
+      vertical:Z_29,
+      x:x_174,
+      y:y_175};});
+  var midTopAt_65 = F2(function(x_176, y_177){
     return {
       _:{
       },
-      horizontal:Z_26,
-      vertical:P_25,
-      x:x_167,
-      y:y_168};});
-  var midBottomAt_63 = F2(function(x_169, y_170){
+      horizontal:Z_29,
+      vertical:P_28,
+      x:x_176,
+      y:y_177};});
+  var midBottomAt_66 = F2(function(x_178, y_179){
     return {
       _:{
       },
-      horizontal:Z_26,
-      vertical:N_27,
-      x:x_169,
-      y:y_170};});
-  var emptyStr_11 = JS.fromString(_str(''));
-  var absolute_44 = Absolute_28;
-  var relative_45 = Relative_29;
-  var middle_46 = {
+      horizontal:Z_29,
+      vertical:N_30,
+      x:x_178,
+      y:y_179};});
+  var emptyStr_12 = JS.fromString(_str(''));
+  var absolute_47 = Absolute_31;
+  var relative_48 = Relative_32;
+  var middle_49 = {
     _:{
     },
-    horizontal:Z_26,
-    vertical:Z_26,
-    x:Relative_29(0.5),
-    y:Relative_29(0.5)};
-  var topLeft_47 = {
+    horizontal:Z_29,
+    vertical:Z_29,
+    x:Relative_32(0.5),
+    y:Relative_32(0.5)};
+  var topLeft_50 = {
     _:{
     },
-    horizontal:N_27,
-    vertical:P_25,
-    x:Absolute_28(0),
-    y:Absolute_28(0)};
-  var topRight_48 = _N.replace([['horizontal',P_25]], topLeft_47);
-  var bottomLeft_49 = _N.replace([['vertical',N_27]], topLeft_47);
-  var bottomRight_50 = _N.replace([['horizontal',P_25]], bottomLeft_49);
-  var midLeft_51 = _N.replace([['horizontal',N_27],['x',Absolute_28(0)]], middle_46);
-  var midRight_52 = _N.replace([['horizontal',P_25]], midLeft_51);
-  var midTop_53 = _N.replace([['vertical',P_25],['y',Absolute_28(0)]], middle_46);
-  var midBottom_54 = _N.replace([['vertical',N_27]], midTop_53);
-  var up_64 = DUp_33;
-  var down_65 = DDown_34;
-  var left_66 = DLeft_35;
-  var right_67 = DRight_36;
-  var inward_68 = DIn_37;
-  var outward_69 = DOut_38;
+    horizontal:N_30,
+    vertical:P_28,
+    x:Absolute_31(0),
+    y:Absolute_31(0)};
+  var topRight_51 = _N.replace([['horizontal',P_28]], topLeft_50);
+  var bottomLeft_52 = _N.replace([['vertical',N_30]], topLeft_50);
+  var bottomRight_53 = _N.replace([['horizontal',P_28]], bottomLeft_52);
+  var midLeft_54 = _N.replace([['horizontal',N_30],['x',Absolute_31(0)]], middle_49);
+  var midRight_55 = _N.replace([['horizontal',P_28]], midLeft_54);
+  var midTop_56 = _N.replace([['vertical',P_28],['y',Absolute_31(0)]], middle_49);
+  var midBottom_57 = _N.replace([['vertical',N_30]], midTop_56);
+  var up_67 = DUp_36;
+  var down_68 = DDown_37;
+  var left_69 = DLeft_38;
+  var right_70 = DRight_39;
+  var inward_71 = DIn_40;
+  var outward_72 = DOut_41;
   elm.Native = elm.Native||{};
   elm.Native.Graphics = elm.Native.Graphics||{};
   var _ = elm.Native.Graphics.Element||{};
@@ -4085,47 +4090,49 @@   _.sizeOf = sizeOf_4;
   _.width = width_5;
   _.height = height_6;
-  _.opacity = opacity_7;
-  _.color = color_8;
-  _.tag = tag_9;
-  _.link = link_10;
-  _.newElement = newElement_12;
-  _.image = image_22;
-  _.fittedImage = fittedImage_23;
-  _.croppedImage = croppedImage_24;
-  _.container = container_31;
-  _.spacer = spacer_32;
-  _.flow = flow_39;
-  _.above = above_40;
-  _.below = below_41;
-  _.beside = beside_42;
-  _.layers = layers_43;
-  _.absolute = absolute_44;
-  _.relative = relative_45;
-  _.middle = middle_46;
-  _.topLeft = topLeft_47;
-  _.topRight = topRight_48;
-  _.bottomLeft = bottomLeft_49;
-  _.bottomRight = bottomRight_50;
-  _.midLeft = midLeft_51;
-  _.midRight = midRight_52;
-  _.midTop = midTop_53;
-  _.midBottom = midBottom_54;
-  _.middleAt = middleAt_55;
-  _.topLeftAt = topLeftAt_56;
-  _.topRightAt = topRightAt_57;
-  _.bottomLeftAt = bottomLeftAt_58;
-  _.bottomRightAt = bottomRightAt_59;
-  _.midLeftAt = midLeftAt_60;
-  _.midRightAt = midRightAt_61;
-  _.midTopAt = midTopAt_62;
-  _.midBottomAt = midBottomAt_63;
-  _.up = up_64;
-  _.down = down_65;
-  _.left = left_66;
-  _.right = right_67;
-  _.inward = inward_68;
-  _.outward = outward_69
+  _.size = size_7;
+  _.opacity = opacity_8;
+  _.color = color_9;
+  _.tag = tag_10;
+  _.link = link_11;
+  _.newElement = newElement_13;
+  _.image = image_24;
+  _.fittedImage = fittedImage_25;
+  _.croppedImage = croppedImage_26;
+  _.tiledImage = tiledImage_27;
+  _.container = container_34;
+  _.spacer = spacer_35;
+  _.flow = flow_42;
+  _.above = above_43;
+  _.below = below_44;
+  _.beside = beside_45;
+  _.layers = layers_46;
+  _.absolute = absolute_47;
+  _.relative = relative_48;
+  _.middle = middle_49;
+  _.topLeft = topLeft_50;
+  _.topRight = topRight_51;
+  _.bottomLeft = bottomLeft_52;
+  _.bottomRight = bottomRight_53;
+  _.midLeft = midLeft_54;
+  _.midRight = midRight_55;
+  _.midTop = midTop_56;
+  _.midBottom = midBottom_57;
+  _.middleAt = middleAt_58;
+  _.topLeftAt = topLeftAt_59;
+  _.topRightAt = topRightAt_60;
+  _.bottomLeftAt = bottomLeftAt_61;
+  _.bottomRightAt = bottomRightAt_62;
+  _.midLeftAt = midLeftAt_63;
+  _.midRightAt = midRightAt_64;
+  _.midTopAt = midTopAt_65;
+  _.midBottomAt = midBottomAt_66;
+  _.up = up_67;
+  _.down = down_68;
+  _.left = left_69;
+  _.right = right_70;
+  _.inward = inward_71;
+  _.outward = outward_72
   elm.Graphics = elm.Graphics||{};
   return elm.Graphics.Element = _;
   };
@@ -4247,21 +4254,21 @@     return A2(rect_39, n_99, n_99);};
   var oval_41 = F2(function(w_100, h_101){
     return function(){
+      var f_106 = function(i_107){
+        return {ctor:"Tuple2", _0:(hw_104*Math.cos((t_103*i_107))), _1:(hh_105*Math.sin((t_103*i_107)))};};
       var n_102 = 50;
       var t_103 = ((2*Math.PI)/n_102);
       var hw_104 = (w_100/2);
       var hh_105 = (h_101/2);
-      var f_106 = function(i_107){
-        return {ctor:"Tuple2", _0:(hw_104*Math.cos((t_103*i_107))), _1:(hh_105*Math.sin((t_103*i_107)))};};
       return A2(List.map, f_106, _L.range(0,(n_102-1)));}();});
   var circle_42 = function(r_108){
     return A2(oval_41, (2*r_108), (2*r_108));};
   var ngon_43 = F2(function(n_109, r_110){
     return function(){
-      var m_111 = toFloat(n_109);
-      var t_112 = ((2*Math.PI)/m_111);
       var f_113 = function(i_114){
         return {ctor:"Tuple2", _0:(r_110*Math.cos((t_112*i_114))), _1:(r_110*Math.sin((t_112*i_114)))};};
+      var m_111 = toFloat(n_109);
+      var t_112 = ((2*Math.PI)/m_111);
       return A2(List.map, f_113, _L.range(0,(n_109-1)));}();});
   var defaultLine_11 = {
     _:{
@@ -4571,6 +4578,7 @@     case 'Plain':   return plainImage(img._3);
     case 'Fitted':  return fittedImage(props.width, props.height, img._3);
     case 'Cropped': return croppedImage(img,props.width,props.height,img._3);
+    case 'Tiled':   return tiledImage(img._3);
     }
 }
 
@@ -4582,31 +4590,20 @@     return img;
 }
 
-function fittedImage(w, h, src) {
-    var e = newElement('div');
-    e.style.position = "relative";
-    e.style.overflow = "hidden";
-
-    var img = newElement('img');
-    img.onload = function() {
-	img.style.position = 'absolute';
-	img.style.margin = 'auto';
+function tiledImage(src) {
+    var div = newElement('div');
+    div.style.backgroundImage = 'url(' + src + ')';
+    return div;
+}
 
-	var sw = w, sh = h;
-	if (w / h > this.width / this.height) {
-	    sh = Math.round(this.height * w / this.width);
-	} else {
-	    sw = Math.round(this.width * h / this.height);
-	}
-	img.style.width = sw + 'px';
-	img.style.height = sh + 'px';
-	img.style.left = ((w - sw) / 2) + 'px';
-	img.style.top = ((h - sh) / 2) + 'px';
-    };
-    img.src = src;
-    img.name = src;
-    e.appendChild(img);
-    return e;
+function fittedImage(w, h, src) {
+    var div = newElement('div');
+    div.style.background = 'url(' + src + ') no-repeat center';
+    div.style.webkitBackgroundSize = 'cover';
+    div.style.MozBackgroundSize = 'cover';
+    div.style.OBackgroundSize = 'cover';
+    div.style.backgroundSize = 'cover';
+    return div;
 }
 
 function croppedImage(elem, w, h, src) {
@@ -4722,7 +4719,7 @@         if (nextE._0 !== currE._0) node.innerHTML = nextE._0;
         break;
     case "Image":
-	if (nextE._0.ctor === 'Plain') {
+	if (nextE._0.ctor !== 'Plain') {
 	    if (nextE._3 !== currE._3) node.src = nextE._3;
 	} else if (!eq(nextE,currE) ||
 		   next.props.width !== curr.props.width ||