quirks-decorations.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!--
  2. Any copyright is dedicated to the Public Domain.
  3. http://creativecommons.org/licenses/publicdomain/
  4. Test: Quirks mode text-decorations
  5. -->
  6. <html><head>
  7. <title>text-overflow: Quirks mode text-decorations</title>
  8. <style type="text/css">
  9. @font-face {
  10. font-family: Ahem;
  11. src: url(../fonts/Ahem.ttf);
  12. }
  13. @font-face {
  14. font-family: DejaVuSansMono;
  15. src: url(../fonts/DejaVuSansMono.woff);
  16. }
  17. html,body {
  18. color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  19. }
  20. .test {
  21. overflow:hidden;
  22. text-overflow:ellipsis;
  23. float:left;
  24. height:2em;
  25. white-space:pre;
  26. margin-left:1em;
  27. margin-bottom:1em;
  28. font-size:20px;
  29. color:blue;
  30. }
  31. span {
  32. text-shadow:0px 1em 2px blue;
  33. text-decoration: line-through;
  34. font-size:16px;
  35. color:black;
  36. }
  37. .rtl span {
  38. text-shadow:0 1em 0px blue;
  39. }
  40. .rlo {
  41. unicode-bidi: bidi-override; direction:rtl;
  42. }
  43. .lro {
  44. unicode-bidi: bidi-override;
  45. }
  46. .rtl {
  47. direction:rtl;
  48. }
  49. .ltr {
  50. direction:ltr;
  51. }
  52. .t1 { width:7.3em;}
  53. .t2 { width:20px;}
  54. .t3 { width:22px; }
  55. .t4 { width:1px; font-family:Ahem; }
  56. .t3 span {margin-left:14px; }
  57. m { font-size:20px; }
  58. </style>
  59. </head><body>
  60. <div class="test t1"><span>0123&nbsp;567890123456789</span><m>x</m></div>
  61. <div class="test rtl t1"><m>x</m><span>0321&nbsp;56789012345</span></div>
  62. <div class="test t2"><span>xxxx<m>x</m></span></div>
  63. <div class="test t3"><span>x<m>x</m></span></div>
  64. <div class="test t4"><span>x<m>x</m></span></div>
  65. </body>
  66. </html>