RubyGems - mercury-rails - Versions diffs - 0.3.1 → 0.5.0 - Mend

mercury-rails 0.3.1 → 0.5.0

Files changed (203) hide show

data/spec/dummy/public/distro.html ADDED Viewed

@@ -0,0 +1,349 @@
+<html>
+  <head>
+    <!-- add prototype and styles to ensure that libraries don't collide and css doesn't conflict -->
+    <title>Mercury Editor Regression Testing</title>
+    <script src="/prototype.js" type="text/javascript"></script>
+    <style type="text/css">
+      body { border: 1px dotted #000; padding: 10px; }
+      input { padding: 20px !important }
+      .mercury-toolbar-container { display: none !important }
+    </style>
+    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0">
+    <!-- include the loader -->
+    <script src="/assets/mercury/support/history.js" type="text/javascript"></script>
+    <script src="/mercury/javascripts/mercury_loader.js?pack=bundled&src=/mercury" type="text/javascript"></script>
+    <!-- preload snippets -->
+    <script type="text/javascript">
+      // it's worth mentioning that mercury is not loaded in the first request, but should be loaded in the second.
+      History.Adapter.bind(window, 'statechange', function() {
+        var state = History.getState();
+        console.debug(state.data, state.title, state.url);
+      });
+      Event.observe(window, "mercury:ready", function() {
+        Mercury.saveURL = '/contents';
+        Mercury.Snippet.load({
+          snippet_0:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "00"}},
+          snippet_1:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "01"}},
+          snippet_2:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "02"}},
+          snippet_3:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "03"}},
+          snippet_4:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "04"}},
+          snippet_5:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "05"}},
+          snippet_6:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "06"}},
+          snippet_7:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "07"}},
+          snippet_8:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "08"}},
+          snippet_9:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "09"}},
+          snippet_10: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "10"}},
+          snippet_11: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "11"}},
+          snippet_12: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "12"}},
+          snippet_13: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "13"}}
+        });
+      })
+    </script>
+    <!-- styles for the content layout -->
+    <style type="text/css">
+      body, td {
+        font: normal normal normal 100%/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      }
+      h1 {
+        color: #09F;
+        margin: 20px 0 0 0;
+        font-weight: 200;
+      }
+      h2 {
+        font-weight: 200;
+        margin: 15px 0 0 0;
+        border-bottom: 1px solid #CCC;
+      }
+      #forms form {
+        display: inline;
+      }
+      #content {
+        min-width: 500px;
+        width: 70%;
+        margin: 20px auto;
+      }
+      #controls {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        padding: 10px;
+        margin: 0;
+        border: 1px solid #999;
+        background: rgba(255, 255, 255, 0.8);
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+        list-style-type: none;
+      }
+      #controls div {
+        color: #333;
+        text-transform: lowercase;
+        text-decoration: none;
+        cursor: pointer;
+      }
+      .mercury-snippet {
+        background: rgba(0, 0, 0, 0.5);
+        color: #FFF;
+        width: 300px;
+        height: 100px;
+        margin: 1px 0;
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+      }
+      #snippetable1 {
+        float: left;
+        width: 100%;
+        margin-bottom: 20px;
+      }
+      #snippetable1 .mercury-snippet {
+        float: left;
+        width: 33%;
+        border: 1px solid #000;
+      }
+    </style>
+  </head>
+  <body>
+  <div id="content">
+    <ul id="controls">
+      <li><div onclick="alert(Mercury.version)">Mercury Version</div></li>
+      <li><div onclick="Mercury.trigger('toggle:interface')">Toggle Interface</div></li>
+      <li><div onclick="var num = 1; History.pushState({state: num}, 'Mercury Editor -- With history.pushState!', '?pushstate=' + num);">history.pushState</div></li>
+      <li><div onclick="History.go(-1);">History.go(-1)</div></li>
+      <li><div onclick="History.back();">History.back()</div></li>
+      <li><div onclick="History.forward();">History.forward()</div></li>
+    </ul>
+    <h1>Forms (with various methods and targets)</h1>
+    <div id="forms">
+      <form id="form1" action="/mercury/test_page" method="post" target="_top">
+        <input type="submit" name="commit" value="post _top">
+      </form>
+      <form id="form2" action="/mercury/test_page" method="get" target="_blank">
+        <input type="submit" name="commit" value="post _blank">
+      </form>
+      <form id="form3" action="/mercury/test_page" method="post" target="_self">
+        <input type="submit" name="commit" value="post _self">
+      </form>
+      <form id="form4" action="/mercury/test_page" method="get">
+        <input type="submit" name="commit" value="get [none]">
+      </form>
+      <form id="form5" action="/mercury/test_page" method="post" class="lightview" target="_self">
+        <input type="submit" name="commit" value="post _self .lightview">
+      </form>
+      <form id="form6" action="/mercury/test_page" method="get" target="foo">
+        <input type="submit" name="commit" value="get foo">
+      </form>
+    </div>
+    <h1>Links (With various targets)</h1>
+    <div id="links">
+      <a id="anchor1" href="/mercury/test_page" target="_top">_top</a>
+      <a id="anchor2" href="/mercury/test_page" target="_blank">_blank</a>
+      <a id="anchor3" href="/mercury/test_page" target="_self">_self</a>
+      <a id="anchor4" href="/mercury/test_page">[none]</a>
+      <a id="anchor5" href="/mercury/test_page" class="lightview" target="_self">_self .lightview</a>
+      <a id="anchor6" href="/mercury/test_page" target="foo">foo</a>
+    </div>
+    <h1>Editable region</h1>
+    <div id="editable1" class="mercury-region" data-type="editable">
+      If the first line of content isn't wrapped in an element you can't set justification (mozilla only bug).
+      <h2>text with a meta tag (that will be removed)</h2>
+      123<meta>editable content
+      <h2>anchor with a div inside</h2>
+      <a href="/foo1">l<div>ink with a div in</div> it</a>
+      <h2>image wrapped in an anchor</h2>
+      <a href="/foo2"><img alt="logo" src="/assets/mercury/temp-logo.png"></a>123
+      <h2>table with header and definition cells</h2>
+      <table border="1">
+        <tbody>
+          <tr>
+            <th>R1C1</th>
+            <th colspan="5">R1C2</th>
+          </tr>
+          <tr>
+            <th colspan="2">R2C1</th>
+            <th rowspan="2">R2C2</th>
+            <th>R2C3</th>
+            <th rowspan="5">R2C4</th>
+            <th>R2C5</th>
+          </tr>
+          <tr>
+            <td colspan="2">R3C1</td>
+            <td>R3C2</td>
+            <td>R3C3</td>
+          </tr>
+          <tr>
+            <td>R4C1</td>
+            <td>R4C2</td>
+            <td rowspan="4">R4C3</td>
+            <td>R4C4</td>
+            <td>R4C5</td>
+          </tr>
+          <tr>
+            <td>R5C1</td>
+            <td>R5C2</td>
+            <td>R5C3</td>
+            <td>R5C4</td>
+          </tr>
+          <tr>
+            <th rowspan="2">R6C1</th>
+            <th rowspan="2">R6C2</th>
+            <th>R6C3</th>
+            <th>R6C4</th>
+          </tr>
+          <tr>
+            <td>R7C1</td>
+            <td>R7C2</td>
+            <td>R7C3</td>
+          </tr>
+          <tr>
+            <td colspan="2">R8C1</td>
+            <td colspan="4">R7C2</td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>table without tbody or border</h2>
+      <table>
+        <tr>
+          <th>R1C1</th>
+          <th colspan="2">R1C2</th>
+        </tr>
+        <tr>
+          <td rowspan="2">R2C1</td>
+          <td>R2C2</td>
+          <td>R2C3</td>
+        </tr>
+        <tr>
+          <td>R3C1</td>
+          <td>R3C2</td>
+        </tr>
+      </table>
+      <h2>fixed width table (column where all colspans > 1, row where all rowspans > 1)</h2>
+      <table border="1" width="200">
+        <tbody>
+          <tr>
+            <td rowspan="2">R1C1</td>
+            <td colspan="2" rowspan="2">R1C2</td>
+          </tr>
+          <tr></tr>
+          <tr>
+            <td>R3C1</td>
+            <td colspan="2">R3C2</td>
+          </tr>
+          <tr>
+            <td>R4C1</td>
+            <td colspan="2">R4C3</td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>paragraph with an overline wrapped in an underline</h2>
+      <p>123 <u>under <span style="text-decoration:overline">overline</span> line</u> 123</p>
+      <h2>paragraph with an underline wrapped in an overline</h2>
+      <p>123 <span style="text-decoration:overline">over <u>underline</u> line</span> 123</p>
+      <h2>style tag that styles images with a border</h2>
+      <style type="text/css">img { border: 2px solid red}</style>
+      <h2>image next to content wrapped in an anchor</h2>
+      <img alt="logo" src="/assets/mercury/temp-logo.png"><a href="#bookmark1">link for #bookmark1</a>
+      <h2>snippet that's pre-loaded</h2>
+      <div class="mercury-snippet" data-snippet="snippet_0">snippet0</div>
+      <h2>bookmark links</h2>
+      <a name="bookmark1">Bookmark1</a><br/><a name="bookmark2">Bookmark2</a>
+      <br/><br/>
+      Additional content not wrapped in anything
+      <h2>youtube and vimeo iframes with content surrounding it</h2>
+      <!--123<iframe style="width: 560px; height: 349px; " src="http://www.youtube.com/embed/0pXYp72dwl0?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>123321-->
+      <!--<iframe style="width: 400px; height: 225px; " src="http://player.vimeo.com/video/615344?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff" frameborder="0"></iframe>123-->
+    </div>
+    <h1>Markupable region (with markdown)</h1>
+    <div id="markupable1" class="mercury-region" data-type="markupable">
+## notes ##
+**whitespace** in markupable regions is _important_.
+## ordered list ##
+1. list item 1
+2. list item 2
+## unordered list ##
+- list item 1
+- list item 2
+## horizontal rule ##
+- - -
+## anchor ##
+[this is a link](foo 'optional title')
+## image ##
+![add alt text](/assets/mercury/temp-logo.png)
+## snippet that's pre-loaded ##
+[--snippet_1--]
+## code ##
+    <a href="/foo">this html will not be escaped</a>
+                   and     whitespace     will be retained
+## blockquote ##
+> this is indented one level
+## paragraph with bold, italics, etc. ##
+Turkey corned beef ham, chuck ham hock **venison _drumstick_ ** tongue ribeye. Beef tongue pancetta, short ribs meatball headcheese jowl bacon swine t-bone shoulder venison. Hamburger short loin turkey flank short ribs tail. Chicken tri-tip sausage, bresaola sirloin turkey hamburger <sub>headcheese</sub> shank rump. Pork ground round t-bone, ham hock sirloin biltong chicken fatback pork belly pastrami pancetta jowl tail. Cow ribeye pork chop, flank sirloin tail short loin pork loin chicken boudin pastrami. Boudin chuck shankle, spare ribs pancetta <sup>fatback</sup> bresaola.
+    </div>
+    <h1>Snippetable region</h1>
+    <div id="snippetable1" class="mercury-region" data-type="snippetable">
+      <div class="mercury-snippet" data-snippet="snippet_2">snippet2</div>
+      <div class="mercury-snippet" data-snippet="snippet_3">snippet3</div>
+      <div class="mercury-snippet" data-snippet="snippet_4">snippet4</div>
+      <div class="mercury-snippet" data-snippet="snippet_5">snippet5</div>
+      <div class="mercury-snippet" data-snippet="snippet_6">snippet6</div>
+      <div class="mercury-snippet" data-snippet="snippet_7">snippet7</div>
+      <div class="mercury-snippet" data-snippet="snippet_8">snippet8</div>
+      <div class="mercury-snippet" data-snippet="snippet_9">snippet9</div>
+    </div>
+    <h1>Editable region (single snippet and no content)</h1>
+    <div id="editable2" class="mercury-region" data-type="editable">
+      <div class="mercury-snippet" data-snippet="snippet_10">snippet10</div>
+    </div>
+    <h1>Editable region (fixed width/height and overflow)</h1>
+    <div id="editable3" class="mercury-region" data-type="editable" style="width:200px;height:90px;">
+      wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
+      <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/><a href="#offset_test">8</a><br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15
+    </div>
+    <h1>Snippetable region (iframe snippet that contains flash)</h1>
+    <div id="snippetable2" class="mercury-region" data-type="snippetable">
+      <div class="mercury-snippet" data-snippet="snippet_11">snippet11</div>
+      <div class="mercury-snippet" data-snippet="snippet_12">snippet12</div>
+      <iframe class="mercury-snippet" data-snippet="snippet_13"  width="560" height="349" src="http://www.youtube.com/embed/0pXYp72dwl0?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>
+    </div>
+  </div>
+  </body>
+</html>

data/spec/dummy/public/favicon.ico ADDED Viewed

File without changes

data/spec/dummy/public/frame.html ADDED Viewed

@@ -0,0 +1,15 @@
+<html>
+  <head>
+    <!-- add prototype and styles to ensure that libraries don't collide and css doesn't conflict -->
+    <title>Mercury Editor Regression Testing</title>
+    <style type="text/css">
+      html, body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe src="/editor" width="100%" height="300"></iframe>
+  </body>
+</html>

data/spec/dummy/public/images/bunny.gif ADDED Viewed

Binary file

data/spec/dummy/public/images/bunny2.jpg ADDED Viewed

Binary file

data/spec/dummy/public/index.html ADDED Viewed

@@ -0,0 +1,392 @@
+<html>
+  <head>
+    <!-- add prototype and styles to ensure that libraries don't collide and css doesn't conflict -->
+    <title>Mercury Editor Regression Testing</title>
+    <script src="/prototype.js" type="text/javascript"></script>
+    <style type="text/css">
+      body { border: 1px dotted #000; padding: 10px; }
+      input { padding: 20px !important }
+      .mercury-toolbar-container { display: none !important }
+    </style>
+    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0">
+    <!-- include the loader -->
+    <script src="/assets/mercury/support/history.js" type="text/javascript"></script>
+    <script src="/assets/mercury_loader.js" type="text/javascript"></script>
+    <!-- preload snippets -->
+    <script type="text/javascript">
+      // it's worth mentioning that mercury is not loaded in the first request, but should be loaded in the second.
+      History.Adapter.bind(window, 'statechange', function() {
+        var state = History.getState();
+        console.debug(state.data, state.title, state.url);
+      });
+      Event.observe(window, "mercury:ready", function() {
+        Mercury.saveURL = '/contents';
+        Mercury.Snippet.load({
+          snippet_0:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "00"}},
+          snippet_1:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "01"}},
+          snippet_2:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "02"}},
+          snippet_3:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "03"}},
+          snippet_4:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "04"}},
+          snippet_5:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "05"}},
+          snippet_6:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "06"}},
+          snippet_7:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "07"}},
+          snippet_8:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "08"}},
+          snippet_9:  {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "09"}},
+          snippet_10: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "10"}},
+          snippet_11: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "11"}},
+          snippet_12: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "12"}},
+          snippet_13: {name: 'example', options: {'options[favorite_beer]': "Bells Hopslam", 'options[first_name]': "13"}}
+        });
+      });
+      var newRegionIndex = 1;
+      var newRegionType = 0;
+      var regionTypes = ['editable', 'markupable', 'snippetable'];
+      function addRegion() {
+        if (newRegionType >= regionTypes.length) newRegionType = 0;
+        var container = new Element('div', {style: 'position:relative;margin-bottom:20px;'});
+        container.update('<div class="remove" onclick="this.up().remove()">&times;</div><div class="mercury-region" id="new_' + regionTypes[newRegionType] + '_' + newRegionIndex + '" data-type="' + regionTypes[newRegionType] + '">new <b>' + regionTypes[newRegionType] + '</b> region ' + newRegionIndex + '</div>');
+        $('content').insertBefore(container, $('dynamic_regions'));
+        Mercury.trigger('reinitialize');
+        newRegionIndex += 1;
+        newRegionType += 1;
+      }
+    </script>
+    <!-- styles for the content layout -->
+    <style type="text/css">
+      body, td {
+        font: normal normal normal 100%/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      }
+      h1 {
+        color: #09F;
+        margin: 20px 0 0 0;
+        font-weight: 200;
+      }
+      h2 {
+        font-weight: 200;
+        margin: 15px 0 0 0;
+        border-bottom: 1px solid #CCC;
+      }
+      #forms form {
+        display: inline;
+      }
+      #content {
+        min-width: 500px;
+        width: 70%;
+        margin: 20px auto;
+      }
+      #controls {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        padding: 10px;
+        margin: 0;
+        border: 1px solid #999;
+        background: rgba(255, 255, 255, 0.8);
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+        list-style-type: none;
+      }
+      #controls div {
+        color: #333;
+        text-transform: lowercase;
+        text-decoration: none;
+        cursor: pointer;
+      }
+      .mercury-snippet {
+        background: rgba(0, 0, 0, 0.5);
+        color: #FFF;
+        width: 300px;
+        height: 100px;
+        margin: 1px 0;
+        border-radius: 3px;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+      }
+      #snippetable1 {
+        float: left;
+        width: 100%;
+        margin-bottom: 20px;
+      }
+      #snippetable1 .mercury-snippet {
+        float: left;
+        width: 33%;
+        border: 1px solid #000;
+      }
+      div.remove {
+        position: absolute;
+        right: 0;
+        top: -10px;
+        border: 1px solid red;
+        border-radius: 50px;
+        -moz-border-radius: 50px;
+        -webkit-border-radius: 50px;
+        background: #600;
+        color: #FFF;
+        width: 20px;
+        height: 20px;
+        line-height: 18px;
+        text-align: center;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+  <div id="content">
+    <ul id="controls">
+      <li><div onclick="alert(Mercury.version)">Mercury Version</div></li>
+      <li><div onclick="Mercury.trigger('toggle:interface')">Toggle Interface</div></li>
+      <li><div onclick="addRegion()">Add & Reinitialize Regions</div></li>
+      <li><div onclick="var num = 1; History.pushState({state: num}, 'Mercury Editor -- With history.pushState!', '?pushstate=' + num);">history.pushState</div></li>
+      <li><div onclick="History.go(-1);">History.go(-1)</div></li>
+      <li><div onclick="History.back();">History.back()</div></li>
+      <li><div onclick="History.forward();">History.forward()</div></li>
+    </ul>
+    <h1>Forms (with various methods and targets)</h1>
+    <div id="forms">
+      <form id="form1" action="/mercury/test_page" method="post" target="_top">
+        <input type="submit" name="commit" value="post _top">
+      </form>
+      <form id="form2" action="/mercury/test_page" method="get" target="_blank">
+        <input type="submit" name="commit" value="post _blank">
+      </form>
+      <form id="form3" action="/mercury/test_page" method="post" target="_self">
+        <input type="submit" name="commit" value="post _self">
+      </form>
+      <form id="form4" action="/mercury/test_page" method="get">
+        <input type="submit" name="commit" value="get [none]">
+      </form>
+      <form id="form5" action="/mercury/test_page" method="post" class="lightview" target="_self">
+        <input type="submit" name="commit" value="post _self .lightview">
+      </form>
+      <form id="form6" action="/mercury/test_page" method="get" target="foo">
+        <input type="submit" name="commit" value="get foo">
+      </form>
+    </div>
+    <h1>Links (With various targets)</h1>
+    <div id="links">
+      <a id="anchor1" href="/mercury/test_page" target="_top">_top</a>
+      <a id="anchor2" href="/mercury/test_page" target="_blank">_blank</a>
+      <a id="anchor3" href="/mercury/test_page" target="_self">_self</a>
+      <a id="anchor4" href="/mercury/test_page">[none]</a>
+      <a id="anchor5" href="/mercury/test_page" class="lightview" target="_self">_self .lightview</a>
+      <a id="anchor6" href="/mercury/test_page" target="foo">foo</a>
+    </div>
+    <h1>Dynamic Regions</h1>
+    <div id="dynamic_regions"></div>
+    <h1>Editable region</h1>
+    <div id="editable1" class="mercury-region" data-type="editable">
+      If the first line of content isn't wrapped in an element you can't set justification (mozilla only bug).
+      <h2>text with a meta tag (that will be removed)</h2>
+      123<meta>editable content
+      <h2>anchor with a div inside</h2>
+      <a href="/foo1">l<div>ink with a div in</div> it</a>
+      <h2>image wrapped in an anchor</h2>
+      <a href="/foo2"><img alt="logo" src="/assets/mercury/temp-logo.png"></a>123
+      <h2>table with header and definition cells</h2>
+      <table border="1">
+        <tbody>
+          <tr>
+            <th>R1C1</th>
+            <th colspan="5">R1C2</th>
+          </tr>
+          <tr>
+            <th colspan="2">R2C1</th>
+            <th rowspan="2">R2C2</th>
+            <th>R2C3</th>
+            <th rowspan="5">R2C4</th>
+            <th>R2C5</th>
+          </tr>
+          <tr>
+            <td colspan="2">R3C1</td>
+            <td>R3C2</td>
+            <td>R3C3</td>
+          </tr>
+          <tr>
+            <td>R4C1</td>
+            <td>R4C2</td>
+            <td rowspan="4">R4C3</td>
+            <td>R4C4</td>
+            <td>R4C5</td>
+          </tr>
+          <tr>
+            <td>R5C1</td>
+            <td>R5C2</td>
+            <td>R5C3</td>
+            <td>R5C4</td>
+          </tr>
+          <tr>
+            <th rowspan="2">R6C1</th>
+            <th rowspan="2">R6C2</th>
+            <th>R6C3</th>
+            <th>R6C4</th>
+          </tr>
+          <tr>
+            <td>R7C1</td>
+            <td>R7C2</td>
+            <td>R7C3</td>
+          </tr>
+          <tr>
+            <td colspan="2">R8C1</td>
+            <td colspan="4">R7C2</td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>table without tbody or border</h2>
+      <table>
+        <tr>
+          <th>R1C1</th>
+          <th colspan="2">R1C2</th>
+        </tr>
+        <tr>
+          <td rowspan="2">R2C1</td>
+          <td>R2C2</td>
+          <td>R2C3</td>
+        </tr>
+        <tr>
+          <td>R3C1</td>
+          <td>R3C2</td>
+        </tr>
+      </table>
+      <h2>fixed width table (column where all colspans > 1, row where all rowspans > 1)</h2>
+      <table border="1" width="200">
+        <tbody>
+          <tr>
+            <td rowspan="2">R1C1</td>
+            <td colspan="2" rowspan="2">R1C2</td>
+          </tr>
+          <tr></tr>
+          <tr>
+            <td>R3C1</td>
+            <td colspan="2">R3C2</td>
+          </tr>
+          <tr>
+            <td>R4C1</td>
+            <td colspan="2">R4C3</td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>paragraph with an overline wrapped in an underline</h2>
+      <p>123 <u>under <span style="text-decoration:overline">overline</span> line</u> 123</p>
+      <h2>paragraph with an underline wrapped in an overline</h2>
+      <p>123 <span style="text-decoration:overline">over <u>underline</u> line</span> 123</p>
+      <h2>style tag that styles images with a border</h2>
+      <style type="text/css">img { border: 2px solid red}</style>
+      <h2>image next to content wrapped in an anchor</h2>
+      <img alt="clippy" src="/assets/mercury/temp-logo.png"><a href="#bookmark1">link for #bookmark1</a>
+      <h2>snippet that's pre-loaded</h2>
+      <div class="mercury-snippet" data-snippet="snippet_0">snippet0</div>
+      <h2>bookmark links</h2>
+      <a name="bookmark1">Bookmark1</a><br/><a name="bookmark2">Bookmark2</a>
+      <br/><br/>
+      Additional content not wrapped in anything
+      <h2>youtube and vimeo iframes with content surrounding it</h2>
+      <!--123<iframe style="width: 560px; height: 349px; " src="http://www.youtube.com/embed/0pXYp72dwl0?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>123321-->
+      <!--<iframe style="width: 400px; height: 225px; " src="http://player.vimeo.com/video/615344?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff" frameborder="0"></iframe>123-->
+    </div>
+    <h1>Snippetable region</h1>
+    <div id="snippetable1" class="mercury-region" data-type="snippetable">
+      <div class="mercury-snippet" data-snippet="snippet_2">snippet2</div>
+      <div class="mercury-snippet" data-snippet="snippet_3">snippet3</div>
+      <div class="mercury-snippet" data-snippet="snippet_4">snippet4</div>
+      <div class="mercury-snippet" data-snippet="snippet_5">snippet5</div>
+      <div class="mercury-snippet" data-snippet="snippet_6">snippet6</div>
+      <div class="mercury-snippet" data-snippet="snippet_7">snippet7</div>
+      <div class="mercury-snippet" data-snippet="snippet_8">snippet8</div>
+      <div class="mercury-snippet" data-snippet="snippet_9">snippet9</div>
+    </div>
+    <h1>Editable region (single snippet and no content)</h1>
+    <div id="editable2" class="mercury-region" data-type="editable">
+      <div class="mercury-snippet" data-snippet="snippet_10">snippet10</div>
+    </div>
+    <h1>Snippetable region (iframe snippet that contains flash)</h1>
+    <div id="snippetable2" class="mercury-region" data-type="snippetable">
+      <div class="mercury-snippet" data-snippet="snippet_11">snippet11</div>
+      <div class="mercury-snippet" data-snippet="snippet_12">snippet12</div>
+      <iframe class="mercury-snippet" data-snippet="snippet_13"  width="560" height="349" src="http://www.youtube.com/embed/0pXYp72dwl0?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>
+    </div>
+    <h1>Markupable region (with markdown)</h1>
+    <div id="markupable1" class="mercury-region" data-type="markupable">
+## notes ##
+**whitespace** in markupable regions is _important_.
+## ordered list ##
+1. list item 1
+2. list item 2
+## unordered list ##
+- list item 1
+- list item 2
+## horizontal rule ##
+- - -
+## anchor ##
+[this is a link](foo 'optional title')
+## image ##
+![add alt text](/assets/mercury/temp-logo.png)
+## snippet that's pre-loaded ##
+[--snippet_1--]
+## code ##
+    <a href="/foo">this html will not be escaped</a>
+                   and     whitespace     will be retained
+## blockquote ##
+> this is indented one level
+## paragraph with bold, italics, etc. ##
+Turkey corned beef ham, chuck ham hock **venison _drumstick_ ** tongue ribeye. Beef tongue pancetta, short ribs meatball headcheese jowl bacon swine t-bone shoulder venison. Hamburger short loin turkey flank short ribs tail. Chicken tri-tip sausage, bresaola sirloin turkey hamburger <sub>headcheese</sub> shank rump. Pork ground round t-bone, ham hock sirloin biltong chicken fatback pork belly pastrami pancetta jowl tail. Cow ribeye pork chop, flank sirloin tail short loin pork loin chicken boudin pastrami. Boudin chuck shankle, spare ribs pancetta <sup>fatback</sup> bresaola.
+    </div>
+    <h1>Editable region (fixed width/height and overflow)</h1>
+    <div id="editable3" class="mercury-region" data-type="editable" style="width:200px;height:90px;">
+      wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
+      <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/><a href="#offset_test">8</a><br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15
+    </div>
+    <h1>Simple region (h1 tag)</h1>
+    <h1 id="simple-field" class="mercury-region" data-type="simple">This is a simple editable field</h1>
+    <h1>Simple region (h2 tag with wrapping)</h1>
+    <h2 id="simple-field-wrapping" class="mercury-region" data-type="simple" style="width:200px">This is a simple editable field which is much longer. It should wrap when displaying, and when editing.</h2>
+    <h1>Image region</h1>
+    <img id="bunny-image" class="mercury-region" data-type="image" src="/images/bunny.gif" />
+  </div>
+  </body>
+</html>