kiteditor 1.0.1

data/features/regions/editable/basic_editing.feature

@@ -0,0 +1,195 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to manipulate it in various ways (eg. bold, add italics, set headers, colors, etc.)
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can set and unset bold content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the bold editor button
+    Then the contents of the editable region should be "this is <b><span>simple</span></b> <b>content</b>"
+
+    When I click on the bold editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can italicize content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the italicize editor button
+    Then the contents of the editable region should be "this is <i><span>simple</span></i> <b>content</b>"
+
+    When I click on the italicize editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can overline content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the overline editor button
+    Then the contents of the editable region should be "this is <span style='text-decoration:overline'><span>simple</span></span> <b>content</b>"
+    # doesn't remove overlines
+
+
+#  Scenario: A user can strikeout content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the strikethrough editor button
+    Then the contents of the editable region should be "this is <strike><span>simple</span></strike> <b>content</b>"
+
+    When I click on the strikethrough editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+#  Scenario: A user can underline content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the underline editor button
+    Then the contents of the editable region should be "this is <u><span>simple</span></u> <b>content</b>"
+
+    When I click on the underline editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can make content superscript
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the superscript editor button
+    Then the contents of the editable region should be "this is <sup><span>simple</span></sup> <b>content</b>"
+
+    When I click on the superscript editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can make content subscript
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the subscript editor button
+    Then the contents of the editable region should be "this is <sub><span>simple</span></sub> <b>content</b>"
+
+    When I click on the subscript editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can justify content to the left, center, right, or fully justified
+    # firefox: this isn't possible on the first line due to a bug in gecko, so we have special content for it
+    Given the content of the editable region has justifiable content
+    And I make a selection
+
+    When I click on the justify left editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='left'>this is <span>justifiable</span><b>content</b></div> "
+
+    When I click on the justify center editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='center'>this is <span>justifiable</span><b>content</b></div> "
+
+    When I click on the justify right editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='right'>this is <span>justifiable</span><b>content</b></div> "
+
+    When I click on the full justification editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='justify'>this is <span>justifiable</span><b>content</b></div> "
+
+
+#  Scenario: A user can make an unordered list
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert unordered list editor button
+    Then the contents of the editable region should be "<ul><li>this is <span>simple</span> <b>content</b></li></ul>"
+
+    # todo: we should test enter and tab, and shift+tab in advanced editing
+
+#  Scenario: A user can make an ordered list
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert ordered list editor button
+    Then the contents of the editable region should be "<ol><li>this is <span>simple</span> <b>content</b></li></ol>"
+
+    # todo: we should test enter and tab, and shift+tab in advanced editing
+
+
+#  Scenario: A user can indent and outdent content
+    # firefox: this isn't possible on the first line due to a bug in gecko, so we have special content for it
+    Given the content of the editable region has justifiable content
+    And I make a selection
+
+    When I click on the indent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote>this is <span>justifiable</span><b>content</b></blockquote> "
+
+    When I click on the indent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote><blockquote>this is <span>justifiable</span><b>content</b></blockquote></blockquote> "
+
+    When I click on the outdent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote>this is <span>justifiable</span><b>content</b></blockquote> "
+
+    When I click on the outdent editor button
+    Then the contents of the editable region should be "<div>first line</div><br>this is <span>justifiable</span><b>content</b> "
+
+
+#  Scenario: A user can insert horizontal rules
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert hr editor button
+    Then the contents of the editable region should be "this is&nbsp;<hr size='2' width='100%'> <b>content</b>"
+
+    When I click on the insert hr editor button
+    Then the contents of the editable region should be "this is&nbsp;<hr size='2' width='100%'><hr size='2' width='100%'> <b>content</b>"
+
+
+#  Scenario: A user can clean/remove formatting on their selection
+    Given the content of the editable region has wrapped content
+    And I make a selection
+
+    When I click on the remove formatting editor button
+    Then the contents of the editable region should be "this is wrapped content"
+
+
+#  Scenario: A user can wrap content within predefined styles
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the style editor dropdown
+    And select the red style from the dropdown
+    Then the contents of the editable region should be "this is <span class='red'><span>simple</span></span> <b>content</b>"
+
+
+#  Scenario: A user can wrap content in formatted block tags
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the block format editor dropdown
+    And select the heading 2 block from the dropdown
+    Then the contents of the editable region should be "<h2>this is <span>simple</span> <b>content</b></h2>"
+
+
+#  Scenario: A user can set the background color of a selection
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the background color editor palette
+    And click on the color red
+    Then the contents of the editable region should be "this is <span style='background-color:#FF0000'><span>simple</span></span> <b>content</b>"
+
+
+#  Scenario: A user can set the foreground color
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the foreground color editor palette
+    And click on the color red
+    Then the contents of the editable region should be "this is <font color='rgb(255, 0, 0)'><span>simple</span></font> <b>content</b>"

data/features/regions/editable/inserting_links.feature

@@ -0,0 +1,98 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to insert links of different types
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can insert and edit a link to an external site
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Link" button
+    Then the modal window should be visible
+    And the "Link Content" field should contain "simple"
+
+    When I fill in "URL" with "http://google.com"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a href='http://google.com'>simple</a> <b>content</b>"
+    And the modal window should not be visible
+
+    When I click on the "Insert Link" button
+    Then I should not see "Link Content"
+
+    When I fill in "URL" with "http://cnn.com"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a href='http://cnn.com'>simple</a> <b>content</b>"
+
+
+#  Scenario: A user can insert and edit a link with a target set
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Link" button
+    And fill in "URL" with "http://google.com"
+    And select "Blank (a new window or tab)" from "Link Target"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a target='_blank' href='http://google.com'>simple</a> <b>content</b>"
+
+    When I click on the "Insert Link" button
+    And select "Top (removes any frames)" from "Link Target"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a target='_top' href='http://google.com'>simple</a> <b>content</b>"
+
+
+#  Scenario: A user can insert a link to an external site and open it in a popup
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Link" button
+    And fill in "URL" with "http://google.com"
+    And select "Popup Window (javascript new window popup)" from "Link Target"
+    And I fill in "Popup Width" with "500"
+    And fill in "Popup Height" with "200"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a href='javascript:void(window.open('http://google.com', 'popup_window', 'width=500,height=200,menubar=no,toolbar=no'))'>simple</a> <b>content</b>"
+
+    When I click on the "Insert Link" button
+    Then the "Popup Width" field should contain "500"
+    And the "Popup Height" field should contain "200"
+
+
+#  Scenario: A user can insert a bookmark and then link to it
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Link" button
+    And I choose "Bookmark"
+    And fill in "Bookmark" with "test-bookmark1"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a name='test-bookmark1'>simple</a> <b>content</b>"
+
+    When I make a selection for "b"
+    And click on the "Insert Link" button
+    And I choose "Existing Links"
+    And select "simple" from "Existing Links"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a name='test-bookmark1'>simple</a> <a href='#test-bookmark1'>content</a>"
+
+    When I make a selection for "a"
+    And click on the "Insert Link" button
+    # todo: this should prefill
+    #Then the "Bookmark" field should contain "test-bookmark1"
+    And I choose "Bookmark"
+    And fill in "Bookmark" with "test-bookmark2"
+    And press "Insert Link"
+    Then the contents of the editable region should be "this is <a name='test-bookmark2'>simple</a> <a href='#test-bookmark1'>content</a>"
+
+    # todo: when I change the name of a bookmark, and bookmarks that are pointing to me should also be updated (on this page)
+
+
+  Scenario: A user can navigate links inside of regions
+    # todo: finish

data/features/regions/editable/inserting_media.feature

@@ -0,0 +1,110 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to insert different types of media
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can insert and edit an image
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    Then the modal window should be visible
+    And I should see "Insert Media (images and videos)" within the modal title
+
+    When I fill in "URL" with "/assets/mercury/temp-logo.png"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png'> <b>content</b>"
+    And the modal window should not be visible
+
+    When I make a selection for "img"
+    And click on the "Insert Media" button
+    Then the "media_image_url" field should contain "/assets/mercury/temp-logo.png"
+
+    When I fill in "URL" with "/assets/mercury/default-snippet.png"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/default-snippet.png'> <b>content</b>"
+
+
+#  Scenario: A user can insert and edit an image with an alignment set
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    When I fill in "media_image_url" with "/assets/mercury/temp-logo.png"
+    And select "Right" from "Alignment"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png' align='right'> <b>content</b>"
+
+    When I make a selection for "img"
+    And click on the "Insert Media" button
+    And select "Absolute Middle" from "Alignment"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png' align='absmiddle'> <b>content</b>"
+
+
+  Scenario: A user can edit an image by double clicking it
+    Given the content of the editable region has an image
+
+    When I double click on the first image in the editable region
+    Then the modal window should be visible
+    And I should see "Insert Media (images and videos)" within the modal title
+    And the "media_image_url" field should contain "/assets/mercury/temp-logo.png"
+
+    When I fill in "URL" with "/assets/mercury/default-snippet.png"
+    And select "Absolute Middle" from "Alignment"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/default-snippet.png' align='absmiddle'> <b>content</b>"
+
+
+  Scenario: A user can embed and edit a youtube video
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    And choose "YouTube Share URL"
+    And fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eII"
+    And fill in "Width" with "400"
+    And fill in "Height" with "200"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eII?wmode=transparent' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
+
+    When I make a selection for "iframe"
+    And click on the "Insert Media" button
+    Then the "media_youtube_url" field should contain "http://youtu.be/Pny4hoN8eII"
+
+    When I fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eI"
+    And fill in "Width" with "500"
+    And fill in "Height" with "300"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eI?wmode=transparent' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"
+
+
+#  Scenario: A user can embed and edit a vimeo video
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    And choose "Vimeo URL"
+    And fill in "Vimeo URL" with "http://vimeo.com/25708134"
+    And fill in "Width" with "400"
+    And fill in "Height" with "200"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe src='http://player.vimeo.com/video/25708134?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
+
+    When I make a selection for "iframe"
+    And click on the "Insert Media" button
+    Then the "media_vimeo_url" field should contain "http://vimeo.com/25708134"
+
+    When I fill in "Vimeo URL" with "http://vimeo.com/2570813"
+    And fill in "Width" with "500"
+    And fill in "Height" with "300"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe src='http://player.vimeo.com/video/2570813?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"

data/features/regions/editable/inserting_snippets.feature

@@ -0,0 +1,102 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to reuse content chunks
+  I should be able to put snippets into regions
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+  # todo: these can't be one scenario because snippet.load doesn't find/replace existing ones
+  Scenario: A user can drag and drop snippets into an editable region
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I open the snippet panel
+    And I drag the example snippet into the editable region
+    Then the modal window should be visible
+    And I should see "Snippet Options" within the modal title
+
+    When I fill in "First Name" with "Jeremy"
+    And fill in "Favorite Beer" with "Stella"
+    And press "Insert Snippet"
+    Then the modal window should not be visible
+    And the contents of the editable region should be "this is <div data-version='1' data-snippet='snippet_14' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div><span>simple</span> <b>content</b>"
+
+
+  Scenario: A user can use the snippet toolbar to remove a snippet
+    Given the options for the example snippet "snippet_42" are first_name: "Jeremy", favorite_beer: "Stella"
+    And the content of the editable region has that snippet
+
+    When I hover over the snippet
+    Then the snippet toolbar should be visible
+
+    When I click on the remove snippet toolbar button
+    Then the contents of the editable region should be " <b>content</b>"
+
+
+  Scenario: A user can use the snippet toolbar to edit the options of a snippet
+    Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
+    And the content of the editable region has that snippet
+
+    When I hover over the snippet
+    And click on the edit snippet settings toolbar button
+    Then the modal window should be visible
+    And the "First Name" field should contain "Hipsters"
+    And the "Favorite Beer" field should contain "PBR"
+
+    When I fill in "First Name" with "Jeremy"
+    And fill in "Favorite Beer" with "Stella"
+    And press "Insert Snippet"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+
+
+  Scenario: A user can make changes to a snippets options, and they'll be versioned for undo and redo
+    Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
+    And the content of the editable region has that snippet
+
+    When I edit the snippet
+    And I fill in "First Name" with "Jeremy"
+    And fill in "Favorite Beer" with "Stella"
+    And press "Insert Snippet"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+
+    When I edit the snippet
+    Then the "First Name" field should contain "Jeremy"
+    And the "Favorite Beer" field should contain "Stella"
+
+    When fill in "First Name" with "Diesel"
+    And fill in "Favorite Beer" with "Bells Hopslam"
+    And press "Insert Snippet"
+    Then the content of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+
+    When I click on the "Undo" button
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+
+    When I edit the snippet
+    # todo: this is a bug
+#    Then the "First Name" field should contain "Jeremy"
+#    And the "Favorite Beer" field should contain "Stella"
+
+    When I close the modal
+    When I click on the "Redo" button
+    Then the contents of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+
+    When I edit the snippet
+    Then the "First Name" field should contain "Diesel"
+    And the "Favorite Beer" field should contain "Bells Hopslam"
+
+    When I fill in "First Name" with "Jen"
+    And fill in "Favorite Beer" with "Miller High Life"
+    And press "Insert Snippet"
+    Then the contents of the editable region should be "<div data-version='4' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jen</strong> likes Miller High Life</div> <b>content</b>"
+
+
+#  Scenario: When a user saves, the snippets should be gone from the html, but the options are serialized
+#    Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
+#    And the content of the editable region has that snippet
+#    When I click on the "Save" button

data/features/regions/editable/inserting_special_characters.feature

@@ -0,0 +1,24 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to insert characters that are otherwise hard
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can insert special characters
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Character" button
+    Then the modal window should be visible
+    And I should see "Special Characters" within the modal title
+
+    When I click on the sweet snowman
+    Then the modal window should not be visible
+    And the contents of the editable region should be "this is ☃ <b>content</b>"

data/features/regions/editable/inserting_tables.feature

@@ -0,0 +1,109 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to insert and edit complex tables
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can insert a table
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Table" button
+    Then the modal window should be visible
+    And I should see "Insert Table" within the modal title
+
+    When I click on the third cell in the first row
+    And I add a column before it
+    Then the table column count should be 4
+    And the selected cell should be the forth cell in the first row
+
+    When I add a column after
+    Then the table column count should be 5
+    And the selected cell should be the forth cell in the first row
+
+    When I add a row after
+    Then the table row count should be 3
+    And the selected cell should be the forth cell in the first row
+
+    When I add a row before
+    Then the table row count should be 4
+    And the selected cell should be the forth cell in the second row
+
+    When I delete the column
+    Then the table column count should be 4
+    And a selected cell should not be visible
+
+    When I click on the second cell in the second row
+    And delete the row
+    Then the table row count should be 3
+    And a selected cell should not be visible
+
+    When I click on the second cell in the second row
+    And increase the colspan
+    And click on the first cell in the first row
+    And increase the rowspan
+    And select "Right" from "Alignment"
+    And fill in "Border" with "2"
+    And fill in "Spacing" with "2"
+    And press "Insert Table"
+    Then the contents of the editable region should be "this is&nbsp;<table align='right' border='2' cellspacing='2'><tbody><tr><td rowspan='2'><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td colspan='2'><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table> <b>content</b>"
+    And the modal window should not be visible
+
+
+#  Scenario: A user can edit a table after inserting one (in an editable region)
+    Given the content of the editable region has a table
+    And I make a selection
+
+    When I click on the add row before editor button
+    Then the table row count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td></tr><tr><td><span>1</span></td><td><span>2</span></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the add row after editor button
+    Then the table row count should be 4
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td></tr><tr><td><span>1</span></td><td><span>2</span></td></tr><tr><td><br></td><td><br></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the add column before editor button
+    Then the column count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>1</span></td><td><span>2</span></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the add column after editor button
+    Then the column count should be 4
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>1</span></td><td><br></td><td><span>2</span></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>3</span></td><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the delete row editor button
+    Then the table row count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>3</span></td><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I make a selection
+    And click on the delete column editor button
+    Then the table column count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+
+#  Scenario: A user can adjust the colspans of a table (in an editable region)
+    Given the content of the editable region has a table
+    And I make a selection
+
+    When I click on the increase colspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td colspan='2'><span>1</span></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the decrease colspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td><span>1</span></td><td><br></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+
+#  Scenario: A user can adjust the rowspans of a table (in an editable region)
+    Given the content of the editable region has a table
+    And I make a selection
+
+    When I click on the increase rowspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td rowspan='2'><span>1</span></td><td><span>2</span></td></tr><tr><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the decrease rowspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td><span>1</span></td><td><span>2</span></td></tr><tr><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"