LayoutTests/fast/dom/inner-text-001.html

   1 <html>
   2 <head>
   3     <style type="text/css">
   4       ul.colored {
   5         background: yellow;
   6         margin: 12px 12px 12px 12px;
   7         padding: 3px 3px 3px 3px;
   8       }
   9       li.colored {
  10         color: white;
  11         background: blue;
  12         margin: 12px 12px 12px 12px;
  13         padding: 12px 0px 12px 12px;
  14         list-style: none;
  15       }
  16       h4.colored {
  17         color: white;
  18         background: blue;
  19         margin: 12px 12px 12px 12px;
  20         padding: 12px 0px 12px 12px;
  21       }
  22     </style>
  23 </head>
  24
  25 <body style="font-size: 12px;">
  26 <div contenteditable id="test" style="border-style:solid; border-color:red">
  27 <h2>Test innerText</h1>
  28 <h3>Check lists, tables, styled text, and images.</h3>
  29 Block flow elements get line breaks before and after.  Table cells are tab separated.
  30 <ul>
  31 <li>Item 1</li>
  32 <li>Item 2</li>
  33 </ul>
  34 <table border=1><tr><td>1</td><td>2</td><td><span">3</span></td></tr><tr><td>4</td><td>5</td><td><span">6</span></td></tr></table>
  35 <br>
  36 Right <h4 style="display:inline">here</h4> is an inline block.
  37 <br>
  38 And an <table border=1 style="display:inline"><td>inline</td><td>table</td><td>with</td><td>one</td><td>row</td></table> is here, too.
  39 <br>
  40 And an <table border=1 style="display:inline"><tr><td>inline</td><td>table</td></tr><tr><td>with</td><td>rows</td></tr></table> not far behind.
  41 <h3>Check collapsed margins</h3>
  42 Collapsed margins are supposed to result in an extra line break.
  43 <h4 class="colored">First header</h4>
  44 <h4 class="colored">Second header</h4>
  45 <ul class="colored">
  46   <li class="colored">First list element</li>
  47   <li class="colored">Second list element</li>
  48 </ul>
  49 This <b>line</b> contains <img src="../replaced/resources/compass.jpg"> an image.
  50 </div>
  51 <p><b><u>The innerText of the above:</u></b></p>
  52 <pre id="innertext"></pre>
  53 <script>
  54     if (window.layoutTestController)
  55         window.layoutTestController.dumpAsText();
  56
  57     document.getElementById("innertext").innerText = document.getElementById("test").innerText;
  58 </script>
  59 </body>
  60
  61 </html>