Text Selection Regression Test
用途: 回归文字选择的全部行为——文档级单选区、跨元素拖拽、富文本、双击/三击、复制内容、对齐/截断绘制、输入控件。每个测试块附带操作方式和预期,配合下方实时状态面板核对。
操作速查: 左键拖拽 = 选择(可跨元素); 双击 = 选词; 三击 = 选整段; Ctrl+A = 全选文档; Ctrl+C = 复制; Esc = 清除; 单击已选中文本内部 = 保留选区, 按住拖到输入框 = 复制进去; 输入框内中键 = 粘贴当前选区;
实时选区状态 (鼠标松开/定时刷新)
(空)
检查重点
1. 选区是文档级唯一的一个, 可跨元素、跨行。
2. 富文本(内联子元素)整体可选, 高亮跨 run 连续。
3. 双击选词、三击选段; 单击选区内部不清除。
4. 复制保留原始空白与 br/块级换行; 软折行不加换行符。
5. text-align/indent/RTL 下点击定位与渲染一致。
6. line-clamp/省略号时高亮只盖可见行, 选区文本仍完整。
7. 浅色 selection-color 下选中文字保持原色。
8. 输入框 text-align 光标定位、中键粘贴、拖拽复制。
user-select 对照
- text: 可正常拖拽选择。
- all: 单击即整块选中。
- none: 完全不可选。
A1. 叶子元素单行
预期: 拖拽选中局部, 高亮矩形贴合文字; Ctrl+C 复制与所选一致。
The quick brown fox jumps over the lazy dog.
A2. 多行折行选择
预期: 折行后按行定位, 点第二行选中的是第二行内容而非整串偏移; 高亮逐行贴合。
This is a longer paragraph that will wrap onto several lines inside this narrow box, so clicking and dragging on different lines must map to the right characters.
A3. 富文本 (内联子元素)
预期: 整块作为一个单元可选; 高亮在 <b>/<span> 之间连续; 复制文本按 DOM 顺序拼接(Hello World!)。
Hello World! Let's select across runs.
A4. 块级边界换行
预期: 每个 div 是独立单元; 跨两个 div 拖拽, 复制文本在两个单元之间出现换行符 alpha\nbeta。
alpha line
beta line
A5. 跨元素拖拽
预期: 从 A4 第一个 div 按住拖到第二个 div, 选区连续跨越两个元素, 中途经过空白区时终点冻结。
B1. 双击选词 / 三击选段
预期: 双击选中整个单词(空白分隔); 三击选中整段; 双击后继续拖拽从词边界扩展。
double click selects this word entirely, triple click selects the whole paragraph.
B2. 点击选区内部保留 + 拖拽复制
预期: 选中文本后单击其内部, 选区不清除; 按住拖到下方输入框松开, 文本被复制进去, 源选区保留。
Drag me into the input below.
B3. user-select 对照
预期: text 可选; all 单击即整块选中; none 完全不可选(状态面板对应项无高亮)。
user-select: text — draggable.
user-select: all — one click selects all.
user-select: none — cannot be selected.
C1. 复制保留原始空白
预期: 全选复制得到 a b(两个空格)与 c\t d(tab 保留), 不做空白折叠。
a b
c d
C2. br 换行
预期: <br> 产生真实换行; 全选复制得到 a\nb; 连续 br 之间有空行。
line one
line two

line four
C3. white-space 系列
预期: pre 保留所有空格与换行; pre-wrap 保留空格且自动折行; pre-line 折叠空格但保留换行。复制内容与显示一致。
one two three
wrap here next
fold spaces keep newline
C4. 软折行不加换行符
预期: 窄容器内折行后全选复制, 折行处是空格而不是换行符(与浏览器一致)。
soft wrap should not insert newline characters into copied text
C5. 中英混合 / CJK
预期: 中英文混排可正常选择复制; 双击按空白分词(CJK 连续文本整体作为一段)。
中文选择测试 mixed English 混合内容 12345
D1. text-align 定位
预期: center/right 下点击定位与渲染对齐一致——点行中间应落在文字中部附近, 而不是按左对齐算。
centered text click here
right aligned text
justify renders left aligned, caret follows the same origin
first line indent of twenty four pixels shifts the caret origin
D2. direction: rtl
预期: start/end 随 RTL 翻转, 缩进方向取反; 点击定位与渲染一致。
rtl start aligned sample text
D3. line-clamp 截断
预期: 高亮只盖可见的两行, 不画到第三行; Ctrl+A 全选后复制仍是完整文本。
This long paragraph is clamped to two visible lines. The selection highlight must not extend to the hidden lines, but selecting everything still copies the whole text.
D4. text-overflow: ellipsis
预期: 高亮止于真实文本, 不覆盖合成省略号 …; 全选复制返回完整文本。
this text is far too long for the box so it gets ellipsized
D5. 自定义 selection-color
预期: 下方浅色高亮(#FFF7E6)下, 选中文字保持原深色(不强制变白); 上方保持默认蓝底白字。
default selection color keeps white text
light selection background keeps dark text readable
E1. 输入框光标定位 (text-align)
预期: center/right 输入框内点击, 光标落在该对齐方式下的对应位置(点中部≈文字中部)。
E2. 多行 textarea
预期: 点击具体行定位到该行; 双击选词; Shift+方向键扩展; 中键粘贴当前文档选区。
E3. 中键粘贴
预期: 先在页面里选中一段文本, 然后在输入框中键点击, 选区文本插入光标处(替换输入框自身选区), 页面选区保留。
G1. flex 容器直接文本
预期: flex 容器的直接文本(匿名项)可选; 子项是独立单元, 高亮互不串。
direct flex text item oneitem two
G2. grid 容器直接文本
预期: grid 容器直接文本同样可选, 子项独立。
grid direct text