bidi-simple.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE HTML>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/licenses/publicdomain/
  5. Test: Simple bidi cases
  6. -->
  7. <html><head>
  8. <title>text-overflow: simple mixed-bidi cases</title>
  9. <style type="text/css">
  10. @font-face {
  11. font-family: DejaVuSansMono;
  12. src: url(../fonts/DejaVuSansMono.woff);
  13. }
  14. html,body {
  15. color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  16. }
  17. .test {
  18. overflow:auto;
  19. text-overflow:ellipsis;
  20. white-space:nowrap;
  21. width: 4.4em;
  22. position:relative;
  23. margin-top:1em;
  24. }
  25. .hidden {
  26. overflow:hidden;
  27. width: 4.7em;
  28. }
  29. .rlo {
  30. unicode-bidi: bidi-override; direction: rtl;
  31. }
  32. .lro {
  33. unicode-bidi: bidi-override; direction: ltr;
  34. }
  35. .rtl {
  36. direction:rtl;
  37. }
  38. </style>
  39. </head><body>
  40. <!-- LTR overflow:scroll -->
  41. <div class="test">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  42. <div class="test"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  43. <div class="test"><span class="rlo">HelloWorld</span></div>
  44. <!-- LTR overflow:hidden -->
  45. <div class="test hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  46. <div class="test hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  47. <div class="test hidden"><span class="rlo">HelloWorld</span></div>
  48. <!-- RTL overflow:scroll -->
  49. <div class="test rtl">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  50. <div class="test rtl"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  51. <div class="test rtl"><span class="rlo">HelloWorld</span></div>
  52. <!-- RTL overflow:hidden -->
  53. <div class="test rtl hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  54. <div class="test rtl hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
  55. <div class="test rtl hidden"><span class="rlo">HelloWorld</span></div>
  56. </body></html>