repaint-across-writing-mode-boundary.html

<!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>
chromium/third_party/blink/web_tests/paint/invalidation/repaint-across-writing-mode-boundary.html
