layout/reftests/line-breaking/emoji-1.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset=utf-8>
   5 <style>
   6 .test {
   7   width: 6em;
   8   border: 1px solid silver;
   9   margin: 1em;
  10   padding: 2px;
  11 }
  12 .wrapped {
  13   word-wrap: break-word;
  14 }
  15 </style>
  16 </head>
  17 <body>
  18 The emoji should wrap within the box in both cases:
  19 <div class=test>
  20 abcde fghij klmno pqrst uvw xyz
  21 &#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
  22 &#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  23 abcdefghijklmnopqrstuvwxyz
  24 &#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
  25 -->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  26 </div>
  27 <div class="test wrapped">
  28 abcde fghij klmno pqrst uvw xyz
  29 &#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
  30 &#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  31 abcdefghijklmnopqrstuvwxyz
  32 &#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
  33 -->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  34 </div>
  35 </body>
  36 </html>