OLD | NEW |
1 <html> | 1 <!doctype html> |
2 <head> | 2 <script src="../../resources/testharness.js"></script> |
3 <script src=../editing.js language="JavaScript" type="text/JavaScript"></script> | 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <script src="../assert_selection.js"></script> |
| 5 <div id="log"></div> |
4 <script> | 6 <script> |
5 function log(message) { | 7 test(() => { |
6 var console = document.getElementById("console"); | 8 assert_selection( |
7 var li = document.createElement("li"); | 9 '<div contenteditable><a href="abc">^0123456789|</a></div>', |
8 var text = document.createTextNode(message); | 10 'unlink', |
9 li.appendChild(text); | 11 '<div contenteditable>^0123456789|</div>', |
10 console.appendChild(li); | 12 'Fully Select A element'); |
11 } | |
12 | 13 |
13 function editingTest() { | 14 assert_selection( |
14 | 15 '<div contenteditable><a href="abc">012^345|6789</a></div>', |
15 var s = window.getSelection(); | 16 'unlink', |
16 var d; | 17 '<div contenteditable><a href="abc">012</a>^345|<a href="abc">6789</a></
div>', |
17 | 18 'Partially Select A element'); |
18 if (window.testRunner) | |
19 window.testRunner.dumpAsText(); | |
20 | |
21 // Fully select the line in the first div. | |
22 d = document.getElementById("test1"); | |
23 s.collapse(d, 0); | |
24 extendSelectionForwardByLineCommand(); | |
25 unlinkCommand(); | |
26 | |
27 log(d.innerHTML); | |
28 | 19 |
29 // Select the second word in the second div | 20 assert_selection( |
30 d = document.getElementById("test2"); | 21 '<div contenteditable><a href="abc">0123456^789</a>xy|z</div>', |
31 s.collapse(d, 0); | 22 'unlink', |
32 moveSelectionForwardByWordCommand(); | 23 '<div contenteditable><a href=\"abc\">0123456</a>^789xy|z</div>', |
33 extendSelectionForwardByWordCommand(); | 24 'Partially Select A element and following test'); |
34 unlinkCommand(); | 25 |
35 | 26 assert_selection( |
36 log(d.innerHTML); | 27 '<div contenteditable><a href="abc">^<img src="../resources/abe.png">|</
a></div>', |
37 | 28 'unlink', |
38 // Select part of a link (and a bit of trailing non-linked text) | 29 '<div contenteditable>^<img src="../resources/abe.png">|</div>', |
39 d = document.getElementById("test3"); | 30 'Select image in a link'); |
40 var e = document.getElementById("test3start"); | 31 |
41 s.collapse(e, 0); | 32 assert_selection( |
42 extendSelectionForwardByLineCommand(); | 33 '<div contenteditable>^<ul><li><a href="1">1</a></li><li><a href="2">2</
a></li></ul>|</div>', |
43 unlinkCommand(); | 34 'unlink', |
44 | 35 '<div contenteditable><ul><li>^1</li><li>2|</li></ul></div>', |
45 log(d.innerHTML); | 36 'Select a list'); |
46 | 37 |
47 // Link an editable region containing lists, tables, images, etc. | 38 assert_selection( |
48 d = document.getElementById("test4"); | 39 '<div contenteditable><table><tr><td><a href="1">^1</a></td><td><a href=
"2">2|</a></td></tr></table></div>', |
49 s.collapse(d, 0); | 40 'unlink', |
50 selectAllCommand(); | 41 '<div contenteditable><table><tbody><tr><td>^1</td><td>2|</td></tr></tbo
dy></table></div>', |
51 createLinkCommand("http://www.google.com/"); | 42 'Select a table'); |
52 // Now unlink a portion of it | 43 }); |
53 var end = document.getElementById("test4end"); | |
54 s.setBaseAndExtent(d, 0, end, 0); | |
55 unlinkCommand(); | |
56 | |
57 log(d.innerHTML); | |
58 | |
59 } | |
60 </script> | 44 </script> |
61 </head> | |
62 | |
63 <body style="font-size: 12px;"> | |
64 <p>This is a test of execCommand("Unlink"). It tests:</p> | |
65 <ol> | |
66 <li>Completely unlinking a link.</li> | |
67 <li>Unlinking a single word inside of a link.</li> | |
68 <li>Unlinking a selection containing linked and unlinked text.</li> | |
69 <li>Unlinking a selection that partially selects a linked table.</li> | |
70 </ol> | |
71 <p>The editable regions below describe what their content should be after the te
st.</p> | |
72 <ol> | |
73 <li><div id="test1" contenteditable="true"><a href="http://www.apple.com/">This
paragraph should should end up unlinked.</a></div></li> | |
74 <li><div id="test2" contenteditable="true"><a href="http://www.apple.com/">The s
econd word in this paragraph should end up being unlinked, everything else shoul
d be a link.</a></div></li> | |
75 <li><div id="test3" contenteditable="true">This paragraph starts with <a href="h
ttp://www.google.com"><i>a</i><span id="test3start"> link</span></a> in the midd
le. Only the 'a' in the previous sentence should be linked after the test.</div
></li> | |
76 <li><div id="test4" contenteditable="true"> | |
77 <p>This <i>editable region</i> contains lists, tables, styled text, and images.
Everything in this region that is not selected should be a link, nothing that i
s selected should be a link.</p> | |
78 <ul> | |
79 <li>Item 1</li> | |
80 <li>Item 2</li> | |
81 </ul> | |
82 <table border=1><tr><td>1</td><td>2</td><td><span id="test4end">3</span></td></t
r></table> | |
83 <br> | |
84 This <b>line</b> contains <img src="../resources/abe.png"> an image. | |
85 </div></li> | |
86 </ol> | |
87 <p>The innerHTML of editable regions after the test:</p> | |
88 <ol id="console"></ol> | |
89 <script> | |
90 runEditingTest(); | |
91 </script> | |
92 </body> | |
93 | |
94 </html> | |
OLD | NEW |