fix(payment): 排序箭头改为基线锚定,修正表头箭头相对文字偏下
.orderby-but 从「无尺寸 inline 宿主 + 依赖绝对定位静态位置 + 固定 translateY(-3px)/6px」改为「零尺寸 inline-block 宿主 + bottom 锚定 + translateY(50%)」。 原理:空 inline-block 的基线即其下边缘,会与同行文字基线对齐,于是箭头盒可用 bottom 精确锚定到「基线以上 N em」;translateY(50%) 抵消箭头自身高度,使盒中心恒等于 bottom 值, 与 dashicons 盒高无关。两枚箭头中心分别落在基线以上 .725em / .075em,对称于文字视觉中心。 旧写法的问题:绝对定位元素未指定 top/bottom 时,其位置来自静态位置(容器内容盒顶部), 该值与表头字体/行高联动;在真实后台 CJK 字体度量下整体偏下。 量测(无头 Chrome + 真实 wp-admin common.css/list-tables.css + 真实表头标记): - 旧写法:箭头簇中心相对文字中心 +2.0px(复现用户反馈的「偏下一点」) - 新写法:-0.09px;两箭头相对文字中心 -4.64 / +4.46,居中对称 - 表头行高两版均为 36.59px,无行高副作用 契约测试同步收紧:断言 bottom 锚定写法,并禁止回归到无 bottom 的固定像素位移。
This commit is contained in:
@@ -3,8 +3,11 @@
|
||||
/**
|
||||
* 「卡密管理」后台页契约:
|
||||
* 1) 标题右侧按钮(page-title-action)由页面头部唯一输出,列表渲染不得再输出一次;
|
||||
* 2) 表头排序箭头宿主(.orderby-but)必须保持 inline,不能改成零高度 inline-block,
|
||||
* 否则绝对定位箭头的静态位置会落到文字基线上,整组箭头下沉一行字高。
|
||||
* 2) 表头排序箭头必须锚定在「文字基线」上,而不是依赖绝对定位元素的静态位置:
|
||||
* 宿主为零尺寸 inline-block(其基线=下边缘=文字基线),箭头用 bottom + translateY(50%)
|
||||
* 定位,中心落在基线以上 .725em/.075em,对称于文字视觉中心。
|
||||
* 历史缺陷:靠静态位置 + 固定 -3px/+6px,静态位置随表头字体/字号变化,
|
||||
* 量测确认整组箭头相对文字偏下 2px。
|
||||
*/
|
||||
|
||||
const assert = require('node:assert/strict');
|
||||
@@ -52,19 +55,28 @@ test('搜索提示仍由页面头部输出且列表不再自建头部', () => {
|
||||
assert.match(list, /private function render_list\(string \$s\): void/);
|
||||
});
|
||||
|
||||
test('排序箭头宿主保持 inline,不使用零高度 inline-block 定位', () => {
|
||||
test('排序箭头锚定文字基线,不依赖绝对定位的静态位置', () => {
|
||||
const host = page.match(/\.orderby-but \{[^}]*\}/);
|
||||
assert.ok(host, '.orderby-but 规则缺失');
|
||||
// 零尺寸 inline-block:基线即下边缘,从而把箭头锚定到文字基线;尺寸为零则不参与换行/行高。
|
||||
assert.match(host[0], /position:\s*relative/);
|
||||
assert.doesNotMatch(host[0], /display\s*:/);
|
||||
assert.match(host[0], /display:\s*inline-block/);
|
||||
assert.match(host[0], /width:\s*0/);
|
||||
assert.match(host[0], /height:\s*0/);
|
||||
assert.doesNotMatch(host[0], /margin-left/);
|
||||
|
||||
// 箭头必须显式给出 bottom(静态位置方案没有 bottom),并用 translateY(50%) 抵消自身高度。
|
||||
const arrow = page.match(/\.orderby-but > a \{[^}]*\}/);
|
||||
assert.ok(arrow, '.orderby-but > a 规则缺失');
|
||||
assert.match(arrow[0], /position:\s*absolute/);
|
||||
assert.match(arrow[0], /bottom:\s*\.725em/);
|
||||
assert.match(arrow[0], /transform:\s*translateY\(50%\)/);
|
||||
assert.match(arrow[0], /padding-right:\s*1em/);
|
||||
|
||||
assert.match(page, /\.orderby-but > a \+ a \{ transform: translateY\(6px\); \}/);
|
||||
assert.match(page, /\.orderby-but > a \+ a \{ bottom: \.075em; \}/);
|
||||
// 旧的静态位置写法(无 bottom + 固定像素位移)不得回归。
|
||||
assert.doesNotMatch(page, /translateY\(-3px\)/);
|
||||
assert.doesNotMatch(page, /\.orderby-but > a \+ a \{ transform: translateY\(6px\); \}/);
|
||||
assert.match(header + list, /<span class="orderby-but">/);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user