src/third_party/WebKit/LayoutTests/editing/execCommand/createLink.html

   1 <html>
   2 <head>
   3 <script src=../editing.js language="JavaScript" type="text/JavaScript"></script>
   4 <script>
   5 function log(message) {
   6     var console = document.getElementById("console");
   7     var li = document.createElement("li");
   8     var text = document.createTextNode(message);
   9     li.appendChild(text);
  10     console.appendChild(li);
  11 }
  12
  13 function editingTest() {
  14
  15     var s = window.getSelection();
  16     var d;
  17
  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     createLinkCommand("http://www.google.com/");
  26
  27     log(d.innerHTML);
  28
  29     // Partially select the line in the second div.
  30     d = document.getElementById("test2");
  31     s.collapse(d, 0);
  32     moveSelectionForwardByWordCommand();
  33     extendSelectionForwardByWordCommand();
  34     createLinkCommand("http://www.google.com/");
  35
  36     log(d.innerHTML);
  37
  38     // Partially select the link in the third div
  39     var e = document.getElementById("starthere");
  40     s.collapse(e, 0);
  41     extendSelectionForwardByLineCommand();
  42     createLinkCommand("http://www.google.com/");
  43
  44     log(d.innerHTML);
  45
  46     // Select all the content in the fourth div
  47     d = document.getElementById("test4");
  48     s.collapse(d, 0);
  49     selectAllCommand();
  50     createLinkCommand("http://www.google.com/");
  51
  52     log(d.innerHTML);
  53
  54 }
  55 </script>
  56 </head>
  57
  58 <body style="font-size: 12px;">
  59 <p>This is a test of execCommand(CreateLink, ...).  It tests:</p>
  60 <ol>
  61 <li>Creating a link from a selection that is completely unlinked.</li>
  62 <li>Creating a link from a selection that is inside an existing link.</li>
  63 <li>Creating a link from a selection that is partially linked.</li>
  64 <li>Creating a link from a selection that contains lists, tables, styled text, and images.</li>
  65 </ol>
  66 <ol>
  67 <li><div id="test1" contenteditable="true">This paragraph starts unlinked.  The entire paragraph should end up being a link to google.com.</div></li>
  68 <li><div id="test2" contenteditable="true"><a href="http://www.apple.com/">This paragraph starts out as a link to apple.com.  The second word in the paragraph should end up being a link to google.com.</a></div></li>
  69 <li><div id="test3" contenteditable="true">This line starts out with <a href="http://www.apple.com"><b>a</b><span id="starthere"> link</span></a> in the middle.  The second half of this paragraph, starting after the bold 'a' should end up being a link to google.com.</div></li>
  70 <li><div id="test4" contenteditable="true">
  71 <p>This <i>editable region</i> contains lists, tables, styled text, and images.  The entire region should end up being a link to google.com.</p>
  72 <ul>
  73 <li>Item 1</li>
  74 <li>Item 2</li>
  75 </ul>
  76 <table border=1><tr><td>1</td><td>2</td><td>3</td></tr></table>
  77 <br>
  78 This <b>line</b> contains <img src="../resources/abe.png"> an image.
  79 </div></li>
  80 </ol>
  81 <p>innerHTML of editable regions after the test:</p>
  82 <ol id="console"></ol>
  83 <script>
  84 runEditingTest();
  85 </script>
  86 </body>
  87
  88 </html>