d8744ea4cd0d031db394f1f74ef4778b449a0c44
[WebKit-https.git] / LayoutTests / editing / execCommand / justify.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../fast/js/resources/js-test-pre.js"></script>
5 </head>
6 <body>
7 <p id="description"></p>
8 <div id="console"></div>
9 <script>
10
11 description("Tests justifying paragraphs to left, right, and center.")
12
13 var testContainer = document.createElement("div");
14 testContainer.contentEditable = true;
15 document.body.appendChild(testContainer);
16
17 function testJustifying(selector, command, content, expected)
18 {
19     testContainer.innerHTML = content;
20     var selected = selector(testContainer);
21     document.execCommand(command, false, null);
22     var actual = testContainer.innerHTML;
23     var action = "execCommand('" + command + "') returned \"" + actual + '" selecting ' + selected + ' of "' + content + '"';
24     if (!expected)
25         expected = content;
26     if (actual == expected)
27         testPassed(action);
28     else
29         testFailed(action + ' but expected "' + expected + '"');
30 }
31
32 function selectFirstPosition(container) {
33     while (container.firstChild)
34         container = container.firstChild;
35     window.getSelection().setPosition(container, 0);
36     return 'first position'
37 }
38
39 function selectAll(container) {
40     window.getSelection().selectAllChildren(container);
41     return 'all'
42 }
43
44 function selectMiddleOfHelloWorld(container) {
45     window.getSelection().setPosition(container, 0);
46     window.getSelection().modify('move', 'forward', 'character');
47     window.getSelection().modify('move', 'forward', 'character');
48     window.getSelection().modify('extend', 'forward', 'word');
49     window.getSelection().modify('extend', 'forward', 'character');
50     window.getSelection().modify('extend', 'forward', 'character');
51     window.getSelection().modify('extend', 'forward', 'character');
52     return '"llo wo"'
53 }
54
55 debug('\nCenter');
56 testJustifying(selectFirstPosition, 'JustifyCenter', '', '<div style="text-align: center;"><br></div>');
57 testJustifying(selectFirstPosition, 'JustifyCenter', '<br>', '<div style="text-align: center;"><br></div>');
58 testJustifying(selectFirstPosition, 'JustifyCenter', '<br><br>', '<div style="text-align: center;"><br></div><br>');
59 testJustifying(selectFirstPosition, 'JustifyCenter', 'hello', '<div style="text-align: center;">hello</div>');
60 testJustifying(selectFirstPosition, 'JustifyCenter', 'hello<p>world</p>', '<div style="text-align: center;">hello</div><p>world</p>');
61 testJustifying(selectFirstPosition, 'JustifyCenter', '<p>hello</p>world', '<p style="text-align: center;">hello</p>world');
62 testJustifying(selectAll, 'JustifyCenter', 'hello<blockquote>world</blockquote>', '<div style="text-align: center;">hello</div><blockquote style="text-align: center;">world</blockquote>');
63 testJustifying(selectAll, 'JustifyCenter', '<h3>hello</h3>world', '<h3 style="text-align: center;">hello</h3><div style="text-align: center;">world</div>');
64 testJustifying(selectFirstPosition, 'JustifyCenter', '<div style="text-align: center;">hello<br>world</div>');
65
66 debug('\nFull');
67 testJustifying(selectFirstPosition, 'JustifyFull', '', '<div style="text-align: justify;"><br></div>');
68 testJustifying(selectFirstPosition, 'JustifyFull', '<br>', '<div style="text-align: justify;"><br></div>');
69 testJustifying(selectFirstPosition, 'JustifyFull', '<br><br>', '<div style="text-align: justify;"><br></div><br>');
70 testJustifying(selectFirstPosition, 'JustifyFull', 'hello', '<div style="text-align: justify;">hello</div>');
71 testJustifying(selectFirstPosition, 'JustifyFull', 'hello<p>world</p>', '<div style="text-align: justify;">hello</div><p>world</p>');
72 testJustifying(selectFirstPosition, 'JustifyFull', '<p>hello</p>world', '<p style="text-align: justify;">hello</p>world');
73 testJustifying(selectAll, 'JustifyFull', 'hello<blockquote>world</blockquote>', '<div style="text-align: justify;">hello</div><blockquote style="text-align: justify;">world</blockquote>');
74 testJustifying(selectAll, 'JustifyFull', '<h3>hello</h3>world', '<h3 style="text-align: justify;">hello</h3><div style="text-align: justify;">world</div>');
75 testJustifying(selectFirstPosition, 'JustifyFull', '<div style="text-align: justify;">hello<br>world</div>');
76
77 // Because the default alignment is left, we need to force a different alignment to test "left"
78 testContainer.style.textAlign = 'center';
79
80 debug('\nLeft');
81 testJustifying(selectFirstPosition, 'JustifyLeft', '', '<div style="text-align: left;"><br></div>');
82 testJustifying(selectFirstPosition, 'JustifyLeft', '<br>', '<div style="text-align: left;"><br></div>');
83 testJustifying(selectFirstPosition, 'JustifyLeft', '<br><br>', '<div style="text-align: left;"><br></div><br>');
84 testJustifying(selectFirstPosition, 'JustifyLeft', 'hello', '<div style="text-align: left;">hello</div>');
85 testJustifying(selectFirstPosition, 'JustifyLeft', 'hello<p>world</p>', '<div style="text-align: left;">hello</div><p>world</p>');
86 testJustifying(selectFirstPosition, 'JustifyLeft', '<p>hello</p>world', '<p style="text-align: left;">hello</p>world');
87 testJustifying(selectAll, 'JustifyLeft', 'hello<blockquote>world</blockquote>', '<div style="text-align: left;">hello</div><blockquote style="text-align: left;">world</blockquote>');
88 testJustifying(selectAll, 'JustifyLeft', '<h3>hello</h3>world', '<h3 style="text-align: left;">hello</h3><div style="text-align: left;">world</div>');
89 testJustifying(selectFirstPosition, 'JustifyLeft', '<div style="text-align: left;">hello<br>world</div>');
90
91 debug('\nRight');
92 testJustifying(selectFirstPosition, 'JustifyRight', '', '<div style="text-align: right;"><br></div>');
93 testJustifying(selectFirstPosition, 'JustifyRight', '<br>', '<div style="text-align: right;"><br></div>');
94 testJustifying(selectFirstPosition, 'JustifyRight', '<br><br>', '<div style="text-align: right;"><br></div><br>');
95 testJustifying(selectFirstPosition, 'JustifyRight', 'hello', '<div style="text-align: right;">hello</div>');
96 testJustifying(selectFirstPosition, 'JustifyRight', 'hello<p>world</p>', '<div style="text-align: right;">hello</div><p>world</p>');
97 testJustifying(selectFirstPosition, 'JustifyRight', '<p>hello</p>world', '<p style="text-align: right;">hello</p>world');
98 testJustifying(selectAll, 'JustifyRight', 'hello<blockquote>world</blockquote>', '<div style="text-align: right;">hello</div><blockquote style="text-align: right;">world</blockquote>');
99 testJustifying(selectAll, 'JustifyRight', '<h3>hello</h3>world', '<h3 style="text-align: right;">hello</h3><div style="text-align: right;">world</div>');
100 testJustifying(selectFirstPosition, 'JustifyRight', '<div style="text-align: right;">hello<br>world</div>');
101
102 document.body.removeChild(testContainer);
103 var successfullyParsed = true;
104
105 </script>
106 <script src="../../fast/js/resources/js-test-post.js"></script>
107 </body>
108 </html>