repaint-across-writing-mode-boundary.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script src="resources/text-based-repaint.js"></script>
  5. <script>
  6. function repaintTest() {
  7. const target = document.getElementById('target');
  8. const range = new Range();
  9. // select "par^agra|ph 1" in target
  10. range.setStart(target.firstChild, 8);
  11. range.setEnd(target.firstChild, 12);
  12. const rect = range.getClientRects()[0];
  13. const center = rect.left + rect.width / 2;
  14. if (window.eventSender) {
  15. eventSender.mouseMoveTo(center, rect.top);
  16. eventSender.mouseDown();
  17. eventSender.mouseMoveTo(center, rect.top);
  18. eventSender.mouseMoveTo(center, rect.bottom);
  19. eventSender.mouseUp();
  20. const actual = getSelection().toString();
  21. if (actual !== range.toString())
  22. console.log(`It should be "agra" instead of "${actual}".`);
  23. }
  24. }
  25. </script>
  26. <title>Repaint Test Across Writing Mode Boundaries</title>
  27. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  28. <style type="text/css">
  29. body {
  30. margin: 50px;
  31. font-size: 20px;
  32. font-family: Times;
  33. }
  34. .lrblock {
  35. writing-mode: tb-lr; /* IE */
  36. -webkit-writing-mode: vertical-lr;
  37. height: 275px;
  38. margin-bottom: 50px;
  39. padding: 1px;
  40. background-color: #eee;
  41. }
  42. .basic {
  43. width: 275px;
  44. margin: 0;
  45. padding: 1px;
  46. writing-mode: lr-tb; /* IE */
  47. -webkit-writing-mode: horizontal-tb;
  48. }
  49. div.d0 {
  50. background-color: #fee;
  51. }
  52. div.d1 {
  53. background-color: #ffe;
  54. }
  55. p {
  56. margin: 10% 5% 10% 5%;
  57. background-color: #faa;
  58. border-left: 20px solid #f88;
  59. border-right: 20px solid #f88;
  60. line-height: 1em;
  61. padding: 1px;
  62. }
  63. .vert {
  64. writing-mode: tb-rl; /* IE */
  65. -webkit-writing-mode: vertical-rl;
  66. }
  67. </style>
  68. </head>
  69. <body onload="runRepaintAndPixelTest()">
  70. <div class="lrblock">
  71. <div class="basic d0"><p>第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div>
  72. <div class="basic d1 vert"><p id="target">第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div>
  73. </div>
  74. </body>
  75. </html>