Home Explore Help
Sign In
khronosschoty
/
palemoon-dev
Watch 2
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
palemoon-dev
/
platform
/
layout
/
reftests
/
writing-mode
/
1117227-1-text-overflow-ref.html

1117227-1-text-overflow-ref.html 2.3 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.   <meta charset="UTF-8">
    5. 

  5.   <title>Bug 1117227 - text-overflow on vertical text</title>
    6. 

  6.   <style>
    7. 

  7.     @font-face {
    8. 

  8.       font-family: DejaVuSansMono;
    9. 

  9.       src: url(../fonts/DejaVuSansMono.woff);
    10. 

  10.     }
    11. 

  11.     body {
    12. 

  12.       font: 16px DejaVuSansMono;
    13. 

  13.       text-orientation: sideways-right;
    14. 

  14.       white-space: nowrap;
    15. 

  15.     }
    16. 

  16.     .c {
    17. 

  17.       block-size: 3em; inline-size: 4em;
    18. 

  18.       overflow: hidden;
    19. 

  19.     }
    20. 

  20.     .vlr { writing-mode: vertical-lr; }
    21. 

  21.     .vrl { writing-mode: vertical-rl; }
    22. 

  22.     .t { margin-inline-start: -1em; }
    23. 

  23.     m { display: inline-block; }
    24. 

  24. 

  25.     #tests { position: relative; }
    26. 

  26.     #tests > div { position: absolute; }
    27. 

  27.     .r1 { top: 0em; }
    28. 

  28.     .r2 { top: 4.5em; }
    29. 

  29.     .c1 { left: 0em; }
    30. 

  30.     .c2 { left: 4em; }
    31. 

  31.     .c3 { left: 8em; }
    32. 

  32.     .c4 { left: 12em; }
    33. 

  33.     .c5 { left: 16em; }
    34. 

  34.     .c6 { left: 20em; }
    35. 

  35.   </style>
    36. 

  36. </head>
    37. 

  37. <body>
    38. 

  38.   <p style="font-family: sans-serif">Test for text-overflow in vertical mode:</p>
    39. 

  39. 

  40.   <div id="tests">
    41. 

  41.     <div class="r1 c1"><div class="c vrl"><span class="t">&nbsp;123456<m>&hellip;</m></span></div></div>
    42. 

  42.     <div class="r1 c2"><div class="c vlr"><span class="t">&nbsp;123456<m>&hellip;</m></span></div></div>
    43. 

  43.     <div class="r1 c3"><div class="c vrl"><span class="t">&nbsp;&nbsp;<m>&hellip;</m>3456<m>&hellip;</m></span></div></div>
    44. 

  44.     <div class="r1 c4"><div class="c vlr"><span class="t">&nbsp;&nbsp;<m>&hellip;</m>3456<m>&hellip;</m></span></div></div>
    45. 

  45.     <div class="r1 c5"><div class="c vrl"><span class="t">&nbsp;&nbsp;<m>&hellip;</m>345678&nbsp;</span></div></div>
    46. 

  46.     <div class="r1 c6"><div class="c vlr"><span class="t">&nbsp;&nbsp;<m>&hellip;</m>345678&nbsp;</span></div></div>
    47. 

  47. 

  48.     <div class="r2 c1"><div class="c vrl"><span class="t">&nbsp;123456<m>$</m></span></div></div>
    49. 

  49.     <div class="r2 c2"><div class="c vlr"><span class="t">&nbsp;123456<m>$</m></span></div></div>
    50. 

  50.     <div class="r2 c3"><div class="c vrl"><span class="t">&nbsp;&nbsp;<m>^</m>3456<m>$</m></span></div></div>
    51. 

  51.     <div class="r2 c4"><div class="c vlr"><span class="t">&nbsp;&nbsp;<m>^</m>3456<m>$</m></span></div></div>
    52. 

  52.     <div class="r2 c5"><div class="c vrl"><span class="t">&nbsp;&nbsp;<m>^</m>3456<m>&hellip;</m></span></div></div>
    53. 

  53.     <div class="r2 c6"><div class="c vlr"><span class="t">&nbsp;&nbsp;<m>^</m>3456<m>&hellip;</m></span></div></div>
    54. 

  54.   </div>
    55. 

  55. </body>
    56. 

  56. </html>
    57. 

  57.