third_party/WebKit/LayoutTests/fast/text/word-break.html

   1 This example tests that word-break properly shrinks a cell to one character per line when it is set to break-all.
   2
   3 <table style="font-family: monospace" width=100% border=1 cellpadding=5 cellspacing=0>
   4 <tr><td style="word-break: break-all">Narrow<td width=100%>This cell should grow
   5 </table>
   6
   7 <br>
   8
   9 This test checks that word-break is ignored when white-space is pre.
  10
  11 <pre style="width:100px; border:5px solid black; word-break: break-all">
  12 Thislongwordshouldnotgetbrokenbutshouldstickoutofthepre.
  13 </pre>
  14
  15 <br>
  16
  17 The next two examples test our custom break-word value for word-break.  We should get the same results as
  18 break-all for the first test, but we should break up the word in the second test (since our behavior matches
  19 word-wrap: break-word in that case).
  20
  21 <table style="font-family: monospace" width=100% border=1 cellpadding=5 cellspacing=0>
  22 <tr><td style="word-break: break-word">Narrow<td width=100%>This cell should grow
  23 </table>
  24
  25 <br>
  26
  27 <pre style="width:100px; border:5px solid black; word-break: break-word">
  28 Thislongwordshouldnotgetbrokenbutshouldstickoutofthepre.
  29 </pre>
  30
  31 <br>
  32
  33 This test makes sure floating and positioned elements do the right thing with word-break: break-all.  The minimum width
  34 should be less than the containing block width.  The breaking should be "dumb" and just occur when the end of the line is hit.
  35
  36 <div style="width:300px; border:2px solid black; font-family: monospace; word-break: break-all">
  37 <div style="float:left">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
  38 <br clear="all">
  39 </div>
  40
  41 <br>
  42
  43 <div style="width:300px; position:relative; border:2px solid black; font-family: monospace; word-break: break-all; height:100px">
  44 <div style="position:absolute">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
  45 </div>
  46
  47 <br>
  48
  49 This test makes sure floating and positioned elements do the right thing with word-break: break-word.  The minimum width
  50 should be less than the containing block width.  The breaking should be "smart" and be like word-wrap: break-word, with words
  51 preferring to wrap first before allowing break opportunities within them.
  52
  53 <div style="width:300px; border:2px solid black; font-family: monospace; word-break: break-word">
  54 <div style="float:left">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
  55 <br clear="all">
  56 </div>
  57
  58 <br>
  59
  60 <div style="width:300px; position:relative; border:2px solid black; font-family: monospace; word-break: break-word; height:100px">
  61 <div style="position:absolute">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
  62 </div>