diff --git a/.gitignore b/.gitignore
index e69de29..a6c7c28 100644
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+*.js
diff --git a/index.html b/index.html
index 2cf6d24..bbe5752 100644
--- a/index.html
+++ b/index.html
@@ -100,7 +100,7 @@ <h1>jelly</h1>
 <select id='level'>
   <option value='0'>Level 1</option>
   <option value='1'>Level 2</option>
-  <option value='2'>Level 3 [broken]</option>
+  <option value='2'>Level 3</option>
   <option value='3'>Level 4</option>
   <option value='4'>Level 5</option>
   <option value='5'>Level 6</option>
@@ -115,10 +115,10 @@ <h1>jelly</h1>
 <p><a href='https://github.com/martine/jelly'>Here's the source</a>.
   To be implemented:
   <ol>
-    <li>Pushing of blocks (necessary for level 3).</li>
     <li>Beautiful "you win" screen when you win.</li>
 </ol></p>
 
 <script src='jelly.js'></script>
+<script>run()</script>
 </body>
 </html>
diff --git a/jelly.coffee b/jelly.coffee
index 94d1717..35e0a36 100644
--- a/jelly.coffee
+++ b/jelly.coffee
@@ -61,6 +61,11 @@ levels = [
 
 CELL_SIZE = 48
 
+Array::unique = ->
+  output = {}
+  output[@[key]] = @[key] for key in [0...@length]
+  value for key, value of output
+
 moveToCell = (dom, x, y) ->
   dom.style.left = x * CELL_SIZE + 'px'
   dom.style.top = y * CELL_SIZE + 'px'
@@ -131,6 +136,22 @@ class Stage
           cell.style[attr] = border unless other and other.tagName == 'TD'
     return
 
+  canSlide: (jelly, dir) ->
+    obstacles = @checkFilled(jelly, dir, 0)
+    for obstacle in obstacles
+      return false unless @canSlide(obstacle, dir)
+    return true
+
+  slide: (jelly, dir) ->
+    obstacles = @checkFilled(jelly, dir, 0)
+    @slide(obstacle, dir) for obstacle in obstacles
+    @busy = true
+    @move(jelly, jelly.x + dir, jelly.y)
+    @waitForAnimation () =>
+      @checkFall =>
+        @checkForMerges()
+        @busy = false
+
   waitForAnimation: (cb) ->
     names = ['transitionend', 'webkitTransitionEnd']
     end = () =>
@@ -140,13 +161,12 @@ class Stage
     return
 
   trySlide: (jelly, dir) ->
-    return if @checkFilled(jelly, dir, 0)
-    @busy = true
-    @move(jelly, jelly.x + dir, jelly.y)
-    @waitForAnimation () =>
-      @checkFall =>
-        @checkForMerges()
-        @busy = false
+    return unless @canSlide(jelly, dir)
+    @slide(jelly, dir)
+
+  trySlide: (jelly, dir) ->
+    return unless @canSlide(jelly, dir)
+    @slide(jelly, dir)
 
   move: (jelly, targetX, targetY) ->
     @cells[y][x] = null for [x, y] in jelly.cellCoords()
@@ -155,10 +175,12 @@ class Stage
     return
 
   checkFilled: (jelly, dx, dy) ->
+    obstacles = []
     for [x, y] in jelly.cellCoords()
       next = @cells[y + dy][x + dx]
-      return next if next and next != jelly
-    return false
+      if next and next != jelly
+        obstacles.push next
+    return obstacles.unique()
 
   checkFall: (cb) ->
     moved = false
@@ -166,7 +188,7 @@ class Stage
     while didOneMove
       didOneMove = false
       for jelly in @jellies
-        if not @checkFilled(jelly, 0, 1)
+        if @checkFilled(jelly, 0, 1).length == 0
           @move(jelly, jelly.x, jelly.y + 1)
           didOneMove = true
           moved = true
@@ -189,9 +211,12 @@ class Stage
     colors = {}
     colors[j.color] = 1 for j in @jellies
     if Object.keys(colors).length == @jellies.length
-      alert("Congratulations! Level completed.")
+      @showCongrats()
     return
 
+  showCongrats: ->
+      alert("Congratulations! Level completed.")
+
   doOneMerge: ->
     for jelly in @jellies
       for [x, y] in jelly.cellCoords()
@@ -271,15 +296,22 @@ class Jelly
           cell.dom.style.borderTop = 'none'
     return
 
-level = parseInt(location.search.substr(1), 10) or 0
-stage = new Stage(document.getElementById('map'), levels[level])
-window.stage = stage
+run = ->
+  level = parseInt(location.search.substr(1), 10) or 0
+  stage = new Stage(document.getElementById('map'), levels[level])
+  window.stage = stage
+
+  levelPicker = document.getElementById('level')
+  levelPicker.value = level
+  levelPicker.addEventListener 'change', () ->
+    location.search = '?' + levelPicker.value
+
+  document.getElementById('reset').addEventListener 'click', ->
+    stage.dom.innerHTML = ''
+    stage = new Stage(stage.dom, levels[level])
 
-levelPicker = document.getElementById('level')
-levelPicker.value = level
-levelPicker.addEventListener 'change', () ->
-  location.search = '?' + levelPicker.value
+global = exports ? this
+global.run = run
+global.Stage = Stage
+global.Jelly = Jelly
 
-document.getElementById('reset').addEventListener 'click', ->
-  stage.dom.innerHTML = ''
-  stage = new Stage(stage.dom, levels[level])
diff --git a/jelly.js b/jelly.js
deleted file mode 100644
index c5d1ae4..0000000
--- a/jelly.js
+++ /dev/null
@@ -1,391 +0,0 @@
-(function() {
-  var CELL_SIZE, Jelly, JellyCell, Stage, level, levelPicker, levels, moveToCell, stage;
-
-  levels = [["xxxxxxxxxxxxxx", "x            x", "x            x", "x      r     x", "x      xx    x", "x  g     r b x", "xxbxxxg xxxxxx", "xxxxxxxxxxxxxx"], ["xxxxxxxxxxxxxx", "x            x", "x            x", "x            x", "x     g   g  x", "x   r r   r  x", "xxxxx x x xxxx", "xxxxxxxxxxxxxx"], ["xxxxxxxxxxxxxx", "x            x", "x            x", "x   bg  x g  x", "xxx xxxrxxx  x", "x      b     x", "xxx xxxrxxxxxx", "xxxxxxxxxxxxxx"], ["xxxxxxxxxxxxxx", "x            x", "x       r    x", "x       b    x", "x       x    x", "x b r        x", "x b r      b x", "xxx x      xxx", "xxxxx xxxxxxxx", "xxxxxxxxxxxxxx"], ["xxxxxxxxxxxxxx", "x            x", "x            x", "xrg  gg      x", "xxx xxxx xx  x", "xrg          x", "xxxxx  xx   xx", "xxxxxx xx  xxx", "xxxxxxxxxxxxxx"], ["xxxxxxxxxxxxxx", "xxxxxxx      x", "xxxxxxx g    x", "x       xx   x", "x r   b      x", "x x xxx x g  x", "x         x bx", "x       r xxxx", "x   xxxxxxxxxx", "xxxxxxxxxxxxxx"]];
-
-  CELL_SIZE = 48;
-
-  moveToCell = function(dom, x, y) {
-    dom.style.left = x * CELL_SIZE + 'px';
-    return dom.style.top = y * CELL_SIZE + 'px';
-  };
-
-  Stage = (function() {
-
-    function Stage(dom, map) {
-      var event, maybeSwallowEvent, _i, _len, _ref,
-        _this = this;
-      this.dom = dom;
-      this.jellies = [];
-      this.loadMap(map);
-      this.busy = false;
-      maybeSwallowEvent = function(e) {
-        e.preventDefault();
-        if (_this.busy) {
-          return e.stopPropagation();
-        }
-      };
-      _ref = ['contextmenu', 'click', 'touchstart', 'touchmove'];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        event = _ref[_i];
-        this.dom.addEventListener(event, maybeSwallowEvent, true);
-      }
-      this.checkForMerges();
-    }
-
-    Stage.prototype.loadMap = function(map) {
-      var cell, color, jelly, row, table, td, tr, x, y;
-      table = document.createElement('table');
-      this.dom.appendChild(table);
-      this.cells = (function() {
-        var _i, _ref, _results;
-        _results = [];
-        for (y = _i = 0, _ref = map.length; 0 <= _ref ? _i < _ref : _i > _ref; y = 0 <= _ref ? ++_i : --_i) {
-          row = map[y].split(/(?:)/);
-          tr = document.createElement('tr');
-          table.appendChild(tr);
-          _results.push((function() {
-            var _j, _ref1, _results1;
-            _results1 = [];
-            for (x = _j = 0, _ref1 = row.length; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; x = 0 <= _ref1 ? ++_j : --_j) {
-              color = null;
-              cell = null;
-              switch (row[x]) {
-                case 'x':
-                  cell = document.createElement('td');
-                  cell.className = 'cell wall';
-                  tr.appendChild(cell);
-                  break;
-                case 'r':
-                  color = 'red';
-                  break;
-                case 'g':
-                  color = 'green';
-                  break;
-                case 'b':
-                  color = 'blue';
-              }
-              if (!cell) {
-                td = document.createElement('td');
-                td.className = 'transparent';
-                tr.appendChild(td);
-              }
-              if (color) {
-                jelly = new Jelly(this, x, y, color);
-                this.dom.appendChild(jelly.dom);
-                this.jellies.push(jelly);
-                cell = jelly;
-              }
-              _results1.push(cell);
-            }
-            return _results1;
-          }).call(this));
-        }
-        return _results;
-      }).call(this);
-      this.addBorders();
-    };
-
-    Stage.prototype.addBorders = function() {
-      var attr, border, cell, dx, dy, edges, other, x, y, _i, _j, _k, _len, _ref, _ref1, _ref2, _ref3, _ref4;
-      for (y = _i = 0, _ref = this.cells.length; 0 <= _ref ? _i < _ref : _i > _ref; y = 0 <= _ref ? ++_i : --_i) {
-        for (x = _j = 0, _ref1 = this.cells[0].length; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; x = 0 <= _ref1 ? ++_j : --_j) {
-          cell = this.cells[y][x];
-          if (!(cell && cell.tagName === 'TD')) {
-            continue;
-          }
-          border = 'solid 1px #777';
-          edges = [['borderBottom', 0, 1], ['borderTop', 0, -1], ['borderLeft', -1, 0], ['borderRight', 1, 0]];
-          for (_k = 0, _len = edges.length; _k < _len; _k++) {
-            _ref2 = edges[_k], attr = _ref2[0], dx = _ref2[1], dy = _ref2[2];
-            if (!((0 <= (_ref3 = y + dy) && _ref3 < this.cells.length))) {
-              continue;
-            }
-            if (!((0 <= (_ref4 = x + dx) && _ref4 < this.cells[0].length))) {
-              continue;
-            }
-            other = this.cells[y + dy][x + dx];
-            if (!(other && other.tagName === 'TD')) {
-              cell.style[attr] = border;
-            }
-          }
-        }
-      }
-    };
-
-    Stage.prototype.waitForAnimation = function(cb) {
-      var end, name, names, _i, _len,
-        _this = this;
-      names = ['transitionend', 'webkitTransitionEnd'];
-      end = function() {
-        var name, _i, _len;
-        for (_i = 0, _len = names.length; _i < _len; _i++) {
-          name = names[_i];
-          _this.dom.removeEventListener(name, end);
-        }
-        return cb();
-      };
-      for (_i = 0, _len = names.length; _i < _len; _i++) {
-        name = names[_i];
-        this.dom.addEventListener(name, end);
-      }
-    };
-
-    Stage.prototype.trySlide = function(jelly, dir) {
-      var _this = this;
-      if (this.checkFilled(jelly, dir, 0)) {
-        return;
-      }
-      this.busy = true;
-      this.move(jelly, jelly.x + dir, jelly.y);
-      return this.waitForAnimation(function() {
-        return _this.checkFall(function() {
-          _this.checkForMerges();
-          return _this.busy = false;
-        });
-      });
-    };
-
-    Stage.prototype.move = function(jelly, targetX, targetY) {
-      var x, y, _i, _j, _len, _len1, _ref, _ref1, _ref2, _ref3;
-      _ref = jelly.cellCoords();
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        _ref1 = _ref[_i], x = _ref1[0], y = _ref1[1];
-        this.cells[y][x] = null;
-      }
-      jelly.updatePosition(targetX, targetY);
-      _ref2 = jelly.cellCoords();
-      for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
-        _ref3 = _ref2[_j], x = _ref3[0], y = _ref3[1];
-        this.cells[y][x] = jelly;
-      }
-    };
-
-    Stage.prototype.checkFilled = function(jelly, dx, dy) {
-      var next, x, y, _i, _len, _ref, _ref1;
-      _ref = jelly.cellCoords();
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        _ref1 = _ref[_i], x = _ref1[0], y = _ref1[1];
-        next = this.cells[y + dy][x + dx];
-        if (next && next !== jelly) {
-          return next;
-        }
-      }
-      return false;
-    };
-
-    Stage.prototype.checkFall = function(cb) {
-      var didOneMove, jelly, moved, _i, _len, _ref;
-      moved = false;
-      didOneMove = true;
-      while (didOneMove) {
-        didOneMove = false;
-        _ref = this.jellies;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          jelly = _ref[_i];
-          if (!this.checkFilled(jelly, 0, 1)) {
-            this.move(jelly, jelly.x, jelly.y + 1);
-            didOneMove = true;
-            moved = true;
-          }
-        }
-      }
-      if (moved) {
-        this.waitForAnimation(cb);
-      } else {
-        cb();
-      }
-    };
-
-    Stage.prototype.checkForMerges = function() {
-      var jelly, merged, x, y, _i, _len, _ref, _ref1;
-      merged = false;
-      while (jelly = this.doOneMerge()) {
-        merged = true;
-        _ref = jelly.cellCoords();
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          _ref1 = _ref[_i], x = _ref1[0], y = _ref1[1];
-          this.cells[y][x] = jelly;
-        }
-      }
-      if (merged) {
-        this.checkForCompletion();
-      }
-    };
-
-    Stage.prototype.checkForCompletion = function() {
-      var colors, j, _i, _len, _ref;
-      colors = {};
-      _ref = this.jellies;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        j = _ref[_i];
-        colors[j.color] = 1;
-      }
-      if (Object.keys(colors).length === this.jellies.length) {
-        alert("Congratulations! Level completed.");
-      }
-    };
-
-    Stage.prototype.doOneMerge = function() {
-      var dx, dy, jelly, other, x, y, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4;
-      _ref = this.jellies;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        jelly = _ref[_i];
-        _ref1 = jelly.cellCoords();
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          _ref2 = _ref1[_j], x = _ref2[0], y = _ref2[1];
-          _ref3 = [[1, 0], [0, 1]];
-          for (_k = 0, _len2 = _ref3.length; _k < _len2; _k++) {
-            _ref4 = _ref3[_k], dx = _ref4[0], dy = _ref4[1];
-            other = this.cells[y + dy][x + dx];
-            if (!(other && other instanceof Jelly)) {
-              continue;
-            }
-            if (other === jelly) {
-              continue;
-            }
-            if (jelly.color !== other.color) {
-              continue;
-            }
-            jelly.merge(other);
-            this.jellies = this.jellies.filter(function(j) {
-              return j !== other;
-            });
-            return jelly;
-          }
-        }
-      }
-      return null;
-    };
-
-    return Stage;
-
-  })();
-
-  JellyCell = (function() {
-
-    function JellyCell(jelly, x, y, color) {
-      this.jelly = jelly;
-      this.x = x;
-      this.y = y;
-      this.dom = document.createElement('div');
-      this.dom.className = 'cell jelly ' + color;
-    }
-
-    return JellyCell;
-
-  })();
-
-  Jelly = (function() {
-
-    function Jelly(stage, x, y, color) {
-      var cell,
-        _this = this;
-      this.x = x;
-      this.y = y;
-      this.color = color;
-      this.dom = document.createElement('div');
-      this.updatePosition(this.x, this.y);
-      this.dom.className = 'cell jellybox';
-      cell = new JellyCell(this, 0, 0, this.color);
-      this.dom.appendChild(cell.dom);
-      this.cells = [cell];
-      this.dom.addEventListener('contextmenu', function(e) {
-        return stage.trySlide(_this, 1);
-      });
-      this.dom.addEventListener('click', function(e) {
-        return stage.trySlide(_this, -1);
-      });
-      this.dom.addEventListener('touchstart', function(e) {
-        return _this.start = e.touches[0].pageX;
-      });
-      this.dom.addEventListener('touchmove', function(e) {
-        var dx;
-        dx = e.touches[0].pageX - _this.start;
-        if (Math.abs(dx) > 10) {
-          dx = Math.max(Math.min(dx, 1), -1);
-          return stage.trySlide(_this, dx);
-        }
-      });
-    }
-
-    Jelly.prototype.cellCoords = function() {
-      var cell, _i, _len, _ref, _results;
-      _ref = this.cells;
-      _results = [];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        cell = _ref[_i];
-        _results.push([this.x + cell.x, this.y + cell.y]);
-      }
-      return _results;
-    };
-
-    Jelly.prototype.updatePosition = function(x, y) {
-      this.x = x;
-      this.y = y;
-      return moveToCell(this.dom, this.x, this.y);
-    };
-
-    Jelly.prototype.merge = function(other) {
-      var cell, dx, dy, othercell, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2;
-      dx = other.x - this.x;
-      dy = other.y - this.y;
-      _ref = other.cells;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        cell = _ref[_i];
-        this.cells.push(cell);
-        cell.x += dx;
-        cell.y += dy;
-        moveToCell(cell.dom, cell.x, cell.y);
-        this.dom.appendChild(cell.dom);
-      }
-      other.cells = null;
-      other.dom.parentNode.removeChild(other.dom);
-      _ref1 = this.cells;
-      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-        cell = _ref1[_j];
-        _ref2 = this.cells;
-        for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
-          othercell = _ref2[_k];
-          if (othercell === cell) {
-            continue;
-          }
-          if (othercell.x === cell.x + 1 && othercell.y === cell.y) {
-            cell.dom.style.borderRight = 'none';
-          } else if (othercell.x === cell.x - 1 && othercell.y === cell.y) {
-            cell.dom.style.borderLeft = 'none';
-          } else if (othercell.x === cell.x && othercell.y === cell.y + 1) {
-            cell.dom.style.borderBottom = 'none';
-          } else if (othercell.x === cell.x && othercell.y === cell.y - 1) {
-            cell.dom.style.borderTop = 'none';
-          }
-        }
-      }
-    };
-
-    return Jelly;
-
-  })();
-
-  level = parseInt(location.search.substr(1), 10) || 0;
-
-  stage = new Stage(document.getElementById('map'), levels[level]);
-
-  window.stage = stage;
-
-  levelPicker = document.getElementById('level');
-
-  levelPicker.value = level;
-
-  levelPicker.addEventListener('change', function() {
-    return location.search = '?' + levelPicker.value;
-  });
-
-  document.getElementById('reset').addEventListener('click', function() {
-    stage.dom.innerHTML = '';
-    return stage = new Stage(stage.dom, levels[level]);
-  });
-
-}).call(this);
-
-// Generated by CoffeeScript 1.5.0-pre
diff --git a/test/jellyTest.coffee b/test/jellyTest.coffee
new file mode 100644
index 0000000..79b5daf
--- /dev/null
+++ b/test/jellyTest.coffee
@@ -0,0 +1,126 @@
+
+global = exports ? this
+
+left=-1
+right=1
+
+tests = [
+  name: "move left single jelly to empty block"
+  action:
+    move: left
+    row: 1
+    col: 2
+  input: [
+    "xxxx",
+    "x rx",
+    "xxxx", ]
+  result: [
+    "xxxx",
+    "xr x",
+    "xxxx", ]
+ ,
+  name: "move left with adjacent jelly"
+  action:
+    move: left
+    row: 1
+    col: 3
+  input: [ "xxxxx",
+    "x rgx",
+    "xxxxx", ]
+  result: [ "xxxxx",
+    "xrg x",
+    "xxxxx", ]
+ ,
+  name: "move left pushing several jellies"
+  action:
+    move: left
+    row: 1
+    col: 4
+  input: [ "xxxxxx",
+    "x rgbx",
+    "xxxxxx", ]
+  result: [ "xxxxxx",
+    "xrgb x",
+    "xxxxxx", ]
+ ,
+  name: "move left a tower pushing tower of several jellies"
+  action:
+    move: left
+    row: 2
+    col: 3
+  input: [ "xxxxx",
+    "x bgx",
+    "x rgx",
+    "xxxxx", ]
+  result: [ "xxxxx",
+    "xbg x",
+    "xrg x",
+    "xxxxx", ]
+ ,
+  name: "move left a tower pushing tower of several jellies"
+  action:
+    move: left
+    row: 1
+    col: 3
+  input: [ "xxxxx",
+    "x bgx",
+    "x rgx",
+    "xxxxx", ]
+  result: [ "xxxxx",
+    "xbg x",
+    "xrg x",
+    "xxxxx", ]
+ ,
+]
+
+runTest = (test) ->
+  testsDiv = document.getElementById('tests')
+  testDiv = document.createElement('div')
+  testsDiv.appendChild(testDiv)
+  stage = createStage(testDiv, test.input)
+  stage.trySlide(stage.cells[test.action.row][test.action.col], test.action.move)
+
+  actual = []
+  for y in [0...stage.cells.length]
+    row = ""
+    for x in [0...stage.cells[0].length]
+      cell = stage.cells[y][x]
+      if cell
+        if cell instanceof global.Jelly
+          r = cell.color[0]
+        else
+          r = "x"
+      else
+        r = " "
+      row += r
+    actual.push row
+  return actual
+
+addStageToResult = (resultDiv, className, stage) ->
+  div = document.createElement('div')
+  div.className = 'stage ' + className
+  resultDiv.appendChild(div)
+  new createStage(div, stage)
+
+addName = (resultDiv, name) ->
+  div = document.createElement('div')
+  resultDiv.appendChild(div)
+  div.innerHTML = name
+
+createStage = (dom, stage) ->
+  stage = new global.Stage(dom, stage)
+  stage.showCongrats = ->
+  return stage
+
+addResult = (test, actual) ->
+  resultsDiv = document.getElementById('results')
+  resultDiv = document.createElement('div')
+  resultDiv.className = if ("#{actual}" is "#{test.result}") then 'success' else 'failure'
+  resultsDiv.appendChild(resultDiv)
+  addName(resultDiv, test.name)
+  addStageToResult(resultDiv, 'initial', test.input)
+  addStageToResult(resultDiv, 'actual', actual)
+  addStageToResult(resultDiv, 'expected', test.result)
+
+for test in tests
+  addResult(test, runTest(test))
diff --git a/test/test.html b/test/test.html
new file mode 100644
index 0000000..91d2b1b
--- /dev/null
+++ b/test/test.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>jelly no puzzle tests</title>
+<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+<style>
+body {
+  line-height: 1.6em;
+  max-width: 1000px;
+  margin: 4ex;
+  font-family: 'Open Sans', sans-serif;
+}
+h1 {
+  font-weight: normal;
+}
+.stage {
+  position: relative;
+  user-select: none;
+  display: inline-block;
+  border: solid 1px #777;
+}
+select#level {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font: inherit;
+}
+#reset {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  font: inherit;
+}
+.stage table {
+  border-spacing: 0;
+  background: #ccc;
+  background-size: 36px 36px;
+  background-image: -webkit-linear-gradient(-45deg,
+    #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
+}
+.stage table td {
+  padding: 0;
+}
+.cell {
+  width: 48px;
+  height: 48px;
+  box-sizing: border-box;
+}
+.transparent {
+  background: #eef7ff;
+}
+.wall {
+}
+.jellybox {
+  position: absolute;
+  -webkit-transition-property: left;
+  -webkit-transition-duration: 200ms;
+}
+.jelly {
+  position: absolute;
+  cursor: ew-resize;
+}
+.red {
+  background: hsl(0, 100%, 75%);
+  border: solid 1px hsl(0, 100%, 30%);
+}
+.blue {
+  background: hsl(216, 100%, 70%);
+  border: solid 1px hsl(216, 100%, 30%);
+}
+.green {
+  background: hsl(120, 100%, 45%);
+  border: solid 1px hsl(120, 100%, 30%);
+}
+
+@-webkit-keyframes slideRight {
+  0% {
+    -webkit-transform: none;
+  }
+  50% {
+    -webkit-transform: skew(-10deg, 0);
+  }
+  60% {
+    -webkit-transform: skew(5deg, 0);
+  }
+  100% {
+    -webkit-transform: none;
+  }
+}
+@-webkit-keyframes slideLeft {
+  0% {
+    -webkit-transform: none;
+  }
+  50% {
+    -webkit-transform: skew(10deg, 0);
+  }
+  60% {
+    -webkit-transform: skew(-5deg, 0);
+  }
+  100% {
+    -webkit-transform: none;
+  }
+}
+
+#tests {
+  display: none;
+}
+
+#results .failure {
+    background-color: red;
+}
+
+#results .stage {
+   margin : 5px;
+}
+
+</style>
+</head>
+<body>
+<h1>Tests</h1>
+
+<div id="results"></div>
+
+<div id="tests" class="stage"></div>
+
+
+<script src='../jelly.js'></script>
+<script src='jellyTest.js'></script>
+</body>
+</html>