Commit df784ace authored by Xianzhu Wang's avatar Xianzhu Wang Committed by Commit Bot

Fix selected text painting in vertical mode

When we paint selected text in vertical mode, we need to rotate the
selection rect because we are under a rotation transform.

Bug: 1106205
Change-Id: I148e2bf7a7b8e2e90a8d48f483d16a73d16200c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2303878Reviewed-by: default avatarKoji Ishii <kojii@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789364}
parent 752e245d
......@@ -400,6 +400,16 @@ class SelectionPaintState {
PaintRect(context, *selection_rect_, color);
}
// Transposes selection_rect_. Called before we paint vertical selected text
// under a rotation transform.
void TransposeSelectionRect(const PhysicalOffset& origin) {
DCHECK(selection_rect_);
selection_rect_->Move(-origin);
std::swap(selection_rect_->offset.top, selection_rect_->offset.left);
std::swap(selection_rect_->size.width, selection_rect_->size.height);
selection_rect_->Move(origin);
}
// Paint the selected text only.
void PaintSelectedText(NGTextPainter& text_painter,
unsigned length,
......@@ -588,13 +598,8 @@ void NGTextFragmentPainter<Cursor>::Paint(const PaintInfo& paint_info,
base::Optional<GraphicsContextStateSaver> state_saver;
// 1. Paint backgrounds behind text if needed. Examples of such backgrounds
// include selection and composition highlights.
// Since NGPaintFragment::ComputeLocalSelectionRectForText() returns
// PhysicalRect rather than LogicalRect, we should paint selection
// before GraphicsContext flip.
// TODO(yoichio): Make NGPhysicalTextFragment::LocalRect and
// NGPaintFragment::ComputeLocalSelectionRectForText logical so that we can
// paint selection in same flipped dimension as NGTextPainter.
// include selection and composition highlights. They use physical coordinates
// so are painted before GraphicsContext rotation.
const DocumentMarkerVector& markers_to_paint =
ComputeMarkersToPaint(node, text_item.IsEllipsis());
if (paint_info.phase != PaintPhase::kSelectionDragImage &&
......@@ -689,6 +694,8 @@ void NGTextFragmentPainter<Cursor>::Paint(const PaintInfo& paint_info,
// Paint only the text that is selected.
if (!selection->IsSelectionRectComputed())
selection->ComputeSelectionRect(box_rect.offset);
if (!is_horizontal)
selection->TransposeSelectionRect(box_rect.offset);
selection->PaintSelectedText(text_painter, length, text_style, node_id);
}
......
<!DOCTYPE html>
<style>
div {
font-family: Times;
font-size: 100px;
line-height: 1;
font-variant-ligatures: discretionary-ligatures;
width: 300px;
writing-mode: vertical-rl;
}
div::selection {
color: white;
background: blue;
}
.small { font-size: 10%; }
</style>
<body>
<div id="target"><span class="small">x </span>ffi f ff fi ffi ffi</div>
<script>
select(0, 1);
function select(start_offset, end_offset) {
let target = document.getElementById('target');
let textNode = target.lastChild;
let range = document.createRange();
range.setStart(textNode, start_offset);
range.setEnd(textNode, end_offset);
getSelection().addRange(range);
}
</script>
</body>
<!DOCTYPE html>
<style>
div {
font-family: Times;
font-size: 100px;
line-height: 1;
font-variant-ligatures: discretionary-ligatures;
width: 300px;
writing-mode: vertical-rl;
}
div::selection {
color: white;
background: blue;
}
.small { font-size: 10%; }
</style>
<body>
<div id="target"><span class="small">x </span>ffi f ff fi ffi ffi</div>
<script>
select(13, 14);
function select(start_offset, end_offset) {
let target = document.getElementById('target');
let textNode = target.lastChild;
let range = document.createRange();
range.setStart(textNode, start_offset);
range.setEnd(textNode, end_offset);
getSelection().addRange(range);
}
</script>
</body>
<!DOCTYPE html>
<style>
div {
font-family: Times;
font-size: 100px;
line-height: 1;
font-variant-ligatures: discretionary-ligatures;
width: 300px;
writing-mode: vertical-rl;
}
div::selection {
color: white;
background: blue;
}
.small { font-size: 10%; }
</style>
<body>
<div id="target"><span class="small">x </span>ffi f ff fi ffi ffi</div>
<script>
select(18, 19);
function select(start_offset, end_offset) {
let target = document.getElementById('target');
let textNode = target.lastChild;
let range = document.createRange();
range.setStart(textNode, start_offset);
range.setEnd(textNode, end_offset);
getSelection().addRange(range);
}
</script>
</body>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment