justify.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/editing/execCommand/justify.html
