123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <!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>
|