| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| |
| description("Tests justifying paragraphs to left, right, and center.") |
| |
| var testContainer = document.createElement("div"); |
| testContainer.contentEditable = true; |
| document.body.appendChild(testContainer); |
| |
| function testJustifying(selector, command, content, expected) |
| { |
| testContainer.innerHTML = content; |
| var selected = selector(testContainer); |
| document.execCommand(command, false, null); |
| var actual = testContainer.innerHTML; |
| var action = "execCommand('" + command + "') returned \"" + actual + '" selecting ' + selected + ' of "' + content + '"'; |
| if (!expected) |
| expected = content; |
| if (actual == expected) |
| testPassed(action); |
| else |
| testFailed(action + ' but expected "' + expected + '"'); |
| } |
| |
| function selectFirstPosition(container) { |
| while (container.firstChild) |
| container = container.firstChild; |
| window.getSelection().collapse(container, 0); |
| return 'first position' |
| } |
| |
| function selectAll(container) { |
| window.getSelection().selectAllChildren(container); |
| return 'all' |
| } |
| |
| function selectMiddleOfHelloWorld(container) { |
| window.getSelection().collapse(container, 0); |
| window.getSelection().modify('move', 'forward', 'character'); |
| window.getSelection().modify('move', 'forward', 'character'); |
| window.getSelection().modify('extend', 'forward', 'word'); |
| window.getSelection().modify('extend', 'forward', 'character'); |
| window.getSelection().modify('extend', 'forward', 'character'); |
| window.getSelection().modify('extend', 'forward', 'character'); |
| return '"llo wo"' |
| } |
| |
| debug('\nCenter'); |
| testJustifying(selectFirstPosition, 'JustifyCenter', '', '<div style="text-align: center;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyCenter', '<br>', '<div style="text-align: center;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyCenter', '<br><br>', '<div style="text-align: center;"><br></div><br>'); |
| testJustifying(selectFirstPosition, 'JustifyCenter', 'hello', '<div style="text-align: center;">hello</div>'); |
| testJustifying(selectFirstPosition, 'JustifyCenter', 'hello<p>world</p>', '<div style="text-align: center;">hello</div><p>world</p>'); |
| testJustifying(selectFirstPosition, 'JustifyCenter', '<p>hello</p>world', '<p style="text-align: center;">hello</p>world'); |
| testJustifying(selectAll, 'JustifyCenter', 'hello<blockquote>world</blockquote>', '<div style="text-align: center;">hello</div><blockquote style="text-align: center;">world</blockquote>'); |
| testJustifying(selectAll, 'JustifyCenter', '<h3>hello</h3>world', '<h3 style="text-align: center;">hello</h3><div style="text-align: center;">world</div>'); |
| testJustifying(selectFirstPosition, 'JustifyCenter', '<div style="text-align: center;">hello<br>world</div>'); |
| |
| debug('\nFull'); |
| testJustifying(selectFirstPosition, 'JustifyFull', '', '<div style="text-align: justify;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyFull', '<br>', '<div style="text-align: justify;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyFull', '<br><br>', '<div style="text-align: justify;"><br></div><br>'); |
| testJustifying(selectFirstPosition, 'JustifyFull', 'hello', '<div style="text-align: justify;">hello</div>'); |
| testJustifying(selectFirstPosition, 'JustifyFull', 'hello<p>world</p>', '<div style="text-align: justify;">hello</div><p>world</p>'); |
| testJustifying(selectFirstPosition, 'JustifyFull', '<p>hello</p>world', '<p style="text-align: justify;">hello</p>world'); |
| testJustifying(selectAll, 'JustifyFull', 'hello<blockquote>world</blockquote>', '<div style="text-align: justify;">hello</div><blockquote style="text-align: justify;">world</blockquote>'); |
| testJustifying(selectAll, 'JustifyFull', '<h3>hello</h3>world', '<h3 style="text-align: justify;">hello</h3><div style="text-align: justify;">world</div>'); |
| testJustifying(selectFirstPosition, 'JustifyFull', '<div style="text-align: justify;">hello<br>world</div>'); |
| |
| // Because the default alignment is left, we need to force a different alignment to test "left" |
| testContainer.style.textAlign = 'center'; |
| |
| debug('\nLeft'); |
| testJustifying(selectFirstPosition, 'JustifyLeft', '', '<div style="text-align: left;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyLeft', '<br>', '<div style="text-align: left;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyLeft', '<br><br>', '<div style="text-align: left;"><br></div><br>'); |
| testJustifying(selectFirstPosition, 'JustifyLeft', 'hello', '<div style="text-align: left;">hello</div>'); |
| testJustifying(selectFirstPosition, 'JustifyLeft', 'hello<p>world</p>', '<div style="text-align: left;">hello</div><p>world</p>'); |
| testJustifying(selectFirstPosition, 'JustifyLeft', '<p>hello</p>world', '<p style="text-align: left;">hello</p>world'); |
| testJustifying(selectAll, 'JustifyLeft', 'hello<blockquote>world</blockquote>', '<div style="text-align: left;">hello</div><blockquote style="text-align: left;">world</blockquote>'); |
| testJustifying(selectAll, 'JustifyLeft', '<h3>hello</h3>world', '<h3 style="text-align: left;">hello</h3><div style="text-align: left;">world</div>'); |
| testJustifying(selectFirstPosition, 'JustifyLeft', '<div style="text-align: left;">hello<br>world</div>'); |
| |
| debug('\nRight'); |
| testJustifying(selectFirstPosition, 'JustifyRight', '', '<div style="text-align: right;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyRight', '<br>', '<div style="text-align: right;"><br></div>'); |
| testJustifying(selectFirstPosition, 'JustifyRight', '<br><br>', '<div style="text-align: right;"><br></div><br>'); |
| testJustifying(selectFirstPosition, 'JustifyRight', 'hello', '<div style="text-align: right;">hello</div>'); |
| testJustifying(selectFirstPosition, 'JustifyRight', 'hello<p>world</p>', '<div style="text-align: right;">hello</div><p>world</p>'); |
| testJustifying(selectFirstPosition, 'JustifyRight', '<p>hello</p>world', '<p style="text-align: right;">hello</p>world'); |
| testJustifying(selectAll, 'JustifyRight', 'hello<blockquote>world</blockquote>', '<div style="text-align: right;">hello</div><blockquote style="text-align: right;">world</blockquote>'); |
| testJustifying(selectAll, 'JustifyRight', '<h3>hello</h3>world', '<h3 style="text-align: right;">hello</h3><div style="text-align: right;">world</div>'); |
| testJustifying(selectFirstPosition, 'JustifyRight', '<div style="text-align: right;">hello<br>world</div>'); |
| |
| document.body.removeChild(testContainer); |
| |
| </script> |
| </body> |
| </html> |
