| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="resources/text-based-repaint.js"></script> |
| <script> |
| function repaintTest() { |
| const target = document.getElementById('target'); |
| const range = new Range(); |
| // select "par^agra|ph 1" in target |
| range.setStart(target.firstChild, 8); |
| range.setEnd(target.firstChild, 12); |
| const rect = range.getClientRects()[0]; |
| const center = rect.left + rect.width / 2; |
| if (window.eventSender) { |
| eventSender.mouseMoveTo(center, rect.top); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(center, rect.top); |
| eventSender.mouseMoveTo(center, rect.bottom); |
| eventSender.mouseUp(); |
| const actual = getSelection().toString(); |
| if (actual !== range.toString()) |
| console.log(`It should be "agra" instead of "${actual}".`); |
| } |
| } |
| </script> |
| |
| <title>Repaint Test Across Writing Mode Boundaries</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| |
| <style type="text/css"> |
| |
| body { |
| margin: 50px; |
| font-size: 20px; |
| font-family: Times; |
| } |
| |
| .lrblock { |
| writing-mode: tb-lr; /* IE */ |
| -webkit-writing-mode: vertical-lr; |
| height: 275px; |
| margin-bottom: 50px; |
| padding: 1px; |
| background-color: #eee; |
| } |
| |
| .basic { |
| width: 275px; |
| margin: 0; |
| padding: 1px; |
| writing-mode: lr-tb; /* IE */ |
| -webkit-writing-mode: horizontal-tb; |
| } |
| |
| div.d0 { |
| background-color: #fee; |
| } |
| |
| div.d1 { |
| background-color: #ffe; |
| } |
| |
| p { |
| margin: 10% 5% 10% 5%; |
| background-color: #faa; |
| border-left: 20px solid #f88; |
| border-right: 20px solid #f88; |
| line-height: 1em; |
| padding: 1px; |
| } |
| |
| .vert { |
| writing-mode: tb-rl; /* IE */ |
| -webkit-writing-mode: vertical-rl; |
| } |
| |
| </style> |
| </head> |
| <body onload="runRepaintAndPixelTest()"> |
| |
| <div class="lrblock"> |
| <div class="basic d0"><p>第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div> |
| <div class="basic d1 vert"><p id="target">第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div> |
| </div> |
| |
| </body> |
| </html> |
