Test for style block being maintained.

cms/djangoapps/contentstore/features/common.py

@@ -318,15 +318,16 @@ def i_am_shown_a_notification(step):
     assert world.is_css_present('.wrapper-prompt')
 
 
-def type_in_codemirror(index, text):
+def type_in_codemirror(index, text, find_prefix="$"):
     script = """
-    var cm = $('div.CodeMirror:eq({})').get(0).CodeMirror;
+    var cm = {find_prefix}('div.CodeMirror:eq({index})').get(0).CodeMirror;
     cm.getInputField().focus();
     cm.setValue(arguments[0]);
-    cm.getInputField().blur();""".format(index)
+    cm.getInputField().blur();""".format(index=index, find_prefix=find_prefix)
     world.browser.driver.execute_script(script, str(text))
     world.wait_for_ajax_complete()
 
+
 def get_codemirror_value(index=0):
     return world.browser.driver.execute_script("""
         return $('div.CodeMirror:eq({})').get(0).CodeMirror.getValue();

cms/djangoapps/contentstore/features/html-editor.feature

@@ -24,4 +24,17 @@ Feature: CMS.HTML Editor
     Given I have created a Blank HTML Page
     When I edit the page
     And I add an image with a static link via the Image Plugin Icon
-    Then the image static link is rewritten to translate the path
+    Then the image static link is rewritten to translate the path
+
+  Scenario: TinyMCE and CodeMirror preserve style tags
+    Given I have created a Blank HTML Page
+    When I edit the page
+    And type "<p class='title'>pages</p><style><!-- .title { color: red; } --></style>" in the code editor and press OK
+    And I save the page
+    Then the page has text:
+      """
+      <p class="title">pages</p>
+      <style><!--
+      .title { color: red; }
+      --></style>
+      """

cms/djangoapps/contentstore/features/html-editor.py

@@ -2,7 +2,8 @@
 # pylint: disable=C0111
 
 from lettuce import world, step
-from nose.tools import assert_in  # pylint: disable=no-name-in-module
+from nose.tools import assert_in, assert_equal  # pylint: disable=no-name-in-module
+from common import type_in_codemirror
 
 
 @step('I have created a Blank HTML Page$')
@@ -38,18 +39,44 @@ def i_click_on_edit_icon(step):
 
 @step('I add an image with a static link via the Image Plugin Icon$')
 def i_click_on_image_plugin_icon(step):
-    # Click on image plugin button
-    world.css_click('.mce-i-image')
+    use_plugin(
+        '.mce-i-image',
+        lambda: world.css_fill('.mce-textbox', '/static/image.jpg', 0)
+    )
+
+
+@step('type "(.*)" in the code editor and press OK$')
+def type_in_codemirror_plugin(step, text):
+    use_plugin(
+        '.mce-i-code',
+        lambda: type_in_codemirror(0, text, "$('iframe').contents().find")
+    )
+
+
+def use_plugin(button_class, action):
+    # Click on plugin button
+    world.css_click(button_class)
 
     # Wait for the editing window to open.
     world.wait_for_visible('.mce-window')
 
-    # Fill in the first field (source).
-    world.css_fill('.mce-textbox', '/static/image.jpg', 0)
+    # Trigger the action
+    action()
+
     # Click OK
     world.css_click('.mce-primary')
 
 
+@step('I save the page$')
+def i_click_on_save(step):
+    world.save_component(step)
+
+
+@step('the page has text:')
+def check_page_text(step):
+    assert_equal(step.multiline, world.css_find('.xmodule_HtmlModule').html.strip())
+
+
 @step('the image static link is rewritten to translate the path$')
 def image_static_link_is_rewritten(step):
     # Find the TinyMCE iframe within the main window

common/lib/xmodule/xmodule/js/src/html/edit.coffee

@@ -46,6 +46,12 @@ class @HTMLEditingDescriptor
       height: '400px',
       menubar: false,
       statusbar: false,
+      # Necessary to avoid stripping of style tags.
+      valid_children : "+body[style]",
+      # Prevent TinyMCE from adding extra <p>&nbsp;</p> in code.
+      forced_root_block : "",
+      force_br_newlines : true,
+      force_p_newlines : false,
       setup: @setupTinyMCE,
       # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered.
       # The tinyMCE callback passes in the editor as a paramter.