third_party/WebKit/LayoutTests/editing/execCommand/script-tests/toggle-styles.js

   1 description("Test to make sure styles toggle as expected and tag-based styles can be removed by editing commands.")
   2
   3 // Note that editing commands insert <b> instead of
   4 // <span style="font-weight: bold"> when in quirks mode
   5 // so edits to this file should be aware of parse mode.
   6 // FIXME: This test could use iframe subdocuments to avoid
   7 // needing to depend on the compatMode of this document
   8 shouldBeEqualToString("document.compatMode", 'BackCompat');
   9
  10 function testToggleToRemove(toggleCommand, testContainer, testContent)
  11 {
  12     document.body.appendChild(testContainer);
  13     window.getSelection().selectAllChildren(testContainer);
  14     document.execCommand(toggleCommand, false, null);
  15     document.body.removeChild(testContainer);
  16     return (testContainer.firstChild == testContent);
  17 }
  18
  19 function wrapInTag(tagName, content)
  20 {
  21     var element = document.createElement(tagName);
  22     element.appendChild(content);
  23     return element;
  24 }
  25
  26 function wrapInEditableContainer(content)
  27 {
  28     var testContainer = wrapInTag('div', content);
  29     testContainer.contentEditable = true;
  30     return testContainer;
  31 }
  32
  33 function wrapInCSSTag(testContent, cssProperty, cssValue)
  34 {
  35     var wrapperElement = wrapInTag('span', testContent);
  36     wrapperElement.style.setProperty(cssProperty, cssValue, "");
  37     return wrapperElement;
  38 }
  39
  40 function testCSSRemovalOnToggle(cssProperty, cssValue, toggleCommand)
  41 {
  42     var testContent = document.createTextNode("test");
  43     var testWrapper = wrapInCSSTag(testContent, cssProperty, cssValue);
  44     var testContainer = wrapInEditableContainer(testWrapper);
  45     if (testToggleToRemove(toggleCommand, testContainer, testContent)) {
  46         testPassed(toggleCommand + " removing " + cssProperty + ": " + cssValue);
  47     } else {
  48         testFailed(toggleCommand + " removing " + cssProperty + ": " + cssValue + " -- " + testContainer.innerHTML);
  49     }
  50 }
  51
  52 function testTagRemovalOnToggle(tagName, toggleCommand)
  53 {
  54     var testContent = document.createTextNode("test");
  55     var testWrapper = wrapInTag(tagName, testContent);
  56     var testContainer = wrapInEditableContainer(testWrapper);
  57     if (testToggleToRemove(toggleCommand, testContainer, testContent)) {
  58         testPassed(toggleCommand + " removing " + tagName);
  59     } else {
  60         testFailed(toggleCommand + " removing " + tagName + " -- " + testContainer.innerHTML);
  61     }
  62 }
  63
  64 function testBasicToggle(toggleCommand)
  65 {
  66     var testContent = document.createTextNode("test");
  67     var testContainer = wrapInEditableContainer(testContent);
  68     document.body.appendChild(testContainer);
  69     window.getSelection().selectAllChildren(testContainer);
  70     document.execCommand(toggleCommand, false, null);
  71     document.execCommand(toggleCommand, false, null);
  72     if (testContainer.firstChild == testContent) {
  73         testPassed(toggleCommand + " toggle");
  74     } else {
  75         testFailed(toggleCommand + " toggle: " + testContainer.innerHTML);
  76     }
  77     document.body.removeChild(testContainer);
  78 }
  79
  80 function runTests(toggleCommand, tagName, cssProperty, cssValue)
  81 {
  82     testBasicToggle(toggleCommand);
  83     testTagRemovalOnToggle(tagName, toggleCommand);
  84     testCSSRemovalOnToggle(cssProperty, cssValue, toggleCommand);
  85 }
  86
  87 runTests("bold", "b", "font-weight", "bold");
  88 testTagRemovalOnToggle("strong", "bold"); // IE adds "strong" tags for bold, so we should remove them (even though FF doesn't)
  89 runTests("italic", "i", "font-style", "italic");
  90 testTagRemovalOnToggle("em", "italic"); // IE adds "em" tags for italic, so we should remove them (even though FF doesn't)
  91 runTests("subscript", "sub", "vertical-align", "sub");
  92 runTests("superscript", "sup", "vertical-align", "super");
  93 runTests("strikethrough", "strike", "text-decoration", "line-through");
  94 testTagRemovalOnToggle("s", "strikethrough");
  95 runTests("underline", "u", "text-decoration", "underline");
  96
  97 var successfullyParsed = true;