| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| description("Test to make sure styles toggle as expected and tag-based styles can be removed by editing commands.") |
| |
| // Note that editing commands insert <b> instead of |
| // <span style="font-weight: bold"> when in quirks mode |
| // so edits to this file should be aware of parse mode. |
| // FIXME: This test could use iframe subdocuments to avoid |
| // needing to depend on the compatMode of this document |
| shouldBeEqualToString("document.compatMode", 'BackCompat'); |
| |
| function testToggleToRemove(toggleCommand, testContainer, testContent) |
| { |
| document.body.appendChild(testContainer); |
| window.getSelection().selectAllChildren(testContainer); |
| document.execCommand(toggleCommand, false, null); |
| document.body.removeChild(testContainer); |
| return (testContainer.firstChild == testContent); |
| } |
| |
| function wrapInTag(tagName, content) |
| { |
| var element = document.createElement(tagName); |
| element.appendChild(content); |
| return element; |
| } |
| |
| function wrapInEditableContainer(content) |
| { |
| var testContainer = wrapInTag('div', content); |
| testContainer.contentEditable = true; |
| return testContainer; |
| } |
| |
| function wrapInCSSTag(testContent, cssProperty, cssValue) |
| { |
| var wrapperElement = wrapInTag('span', testContent); |
| wrapperElement.style.setProperty(cssProperty, cssValue, ""); |
| return wrapperElement; |
| } |
| |
| function testCSSRemovalOnToggle(cssProperty, cssValue, toggleCommand) |
| { |
| var testContent = document.createTextNode("test"); |
| var testWrapper = wrapInCSSTag(testContent, cssProperty, cssValue); |
| var testContainer = wrapInEditableContainer(testWrapper); |
| if (testToggleToRemove(toggleCommand, testContainer, testContent)) { |
| testPassed(toggleCommand + " removing " + cssProperty + ": " + cssValue); |
| } else { |
| testFailed(toggleCommand + " removing " + cssProperty + ": " + cssValue + " -- " + testContainer.innerHTML); |
| } |
| } |
| |
| function testTagRemovalOnToggle(tagName, toggleCommand) |
| { |
| var testContent = document.createTextNode("test"); |
| var testWrapper = wrapInTag(tagName, testContent); |
| var testContainer = wrapInEditableContainer(testWrapper); |
| if (testToggleToRemove(toggleCommand, testContainer, testContent)) { |
| testPassed(toggleCommand + " removing " + tagName); |
| } else { |
| testFailed(toggleCommand + " removing " + tagName + " -- " + testContainer.innerHTML); |
| } |
| } |
| |
| function testBasicToggle(toggleCommand) |
| { |
| var testContent = document.createTextNode("test"); |
| var testContainer = wrapInEditableContainer(testContent); |
| document.body.appendChild(testContainer); |
| window.getSelection().selectAllChildren(testContainer); |
| document.execCommand(toggleCommand, false, null); |
| document.execCommand(toggleCommand, false, null); |
| if (testContainer.firstChild == testContent) { |
| testPassed(toggleCommand + " toggle"); |
| } else { |
| testFailed(toggleCommand + " toggle: " + testContainer.innerHTML); |
| } |
| document.body.removeChild(testContainer); |
| } |
| |
| function runTests(toggleCommand, tagName, cssProperty, cssValue) |
| { |
| testBasicToggle(toggleCommand); |
| testTagRemovalOnToggle(tagName, toggleCommand); |
| testCSSRemovalOnToggle(cssProperty, cssValue, toggleCommand); |
| } |
| |
| runTests("bold", "b", "font-weight", "bold"); |
| testTagRemovalOnToggle("strong", "bold"); // IE adds "strong" tags for bold, so we should remove them (even though FF doesn't) |
| runTests("italic", "i", "font-style", "italic"); |
| testTagRemovalOnToggle("em", "italic"); // IE adds "em" tags for italic, so we should remove them (even though FF doesn't) |
| runTests("subscript", "sub", "vertical-align", "sub"); |
| runTests("superscript", "sup", "vertical-align", "super"); |
| runTests("strikethrough", "strike", "text-decoration", "line-through"); |
| testTagRemovalOnToggle("s", "strikethrough"); |
| runTests("underline", "u", "text-decoration", "underline"); |
| |
| var successfullyParsed = true; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
