kate522
1cbc0c6ed8
.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 的固定像素位移。
89 lines
4.1 KiB
JavaScript
89 lines
4.1 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* 「卡密管理」后台页契约：
|
|
* 1) 标题右侧按钮（page-title-action）由页面头部唯一输出，列表渲染不得再输出一次；
|
|
* 2) 表头排序箭头必须锚定在「文字基线」上，而不是依赖绝对定位元素的静态位置：
|
|
* 宿主为零尺寸 inline-block（其基线=下边缘=文字基线），箭头用 bottom + translateY(50%)
|
|
* 定位，中心落在基线以上 .725em/.075em，对称于文字视觉中心。
|
|
* 历史缺陷：靠静态位置 + 固定 -3px/+6px，静态位置随表头字体/字号变化，
|
|
* 量测确认整组箭头相对文字偏下 2px。
|
|
*/
|
|
|
|
const assert = require('node:assert/strict');
|
|
const fs = require('node:fs');
|
|
const path = require('node:path');
|
|
const test = require('node:test');
|
|
|
|
const root = path.resolve(__dirname, '..', '..');
|
|
const page = fs.readFileSync(path.join(root, 'src/Admin/Native/PayChargeCards.php'), 'utf8');
|
|
|
|
const count = (src, pattern) => (src.match(pattern) || []).length;
|
|
|
|
const header = page.slice(
|
|
page.indexOf('public function render_charge_cards_page('),
|
|
page.indexOf('private function render_list(')
|
|
);
|
|
const list = page.slice(
|
|
page.indexOf('private function render_list('),
|
|
page.indexOf('private function render_add_form(')
|
|
);
|
|
|
|
test('标题右侧按钮只在页面头部输出一次', () => {
|
|
assert.ok(header.length > 0 && list.length > 0);
|
|
|
|
// 添加/导出两个 tab 的「返回列表」各一次，列表页的「添加卡密 / 导出卡密」各一次。
|
|
assert.equal(count(header, /class="page-title-action"/g), 4);
|
|
assert.doesNotMatch(list, /class="page-title-action"/);
|
|
assert.equal(count(page, /class="page-title-action"/g), count(header, /class="page-title-action"/g));
|
|
|
|
// 列表页的两个入口按钮各自只有一处定义。
|
|
assert.equal(count(page, /add_query_arg\('tab', 'add'/g), 1);
|
|
assert.equal(count(page, /add_query_arg\('tab', 'export'/g), 1);
|
|
assert.match(header, /esc_html__\('添加卡密', 'aksrt'\)/);
|
|
assert.match(header, /esc_html__\('导出卡密', 'aksrt'\)/);
|
|
});
|
|
|
|
test('搜索提示仍由页面头部输出且列表不再自建头部', () => {
|
|
assert.equal(count(header, /update-nag/g), 1);
|
|
assert.match(header, /搜索 “%s” 的内容/);
|
|
assert.doesNotMatch(list, /update-nag/);
|
|
assert.doesNotMatch(list, /\$head_but/);
|
|
|
|
// 搜索词在页面头部解析后传入列表，避免两处各解析一次。
|
|
assert.match(page, /render_list\(\$s\)/);
|
|
assert.match(list, /private function render_list\(string \$s\): void/);
|
|
});
|
|
|
|
test('排序箭头锚定文字基线，不依赖绝对定位的静态位置', () => {
|
|
const host = page.match(/\.orderby-but \{[^}]*\}/);
|
|
assert.ok(host, '.orderby-but 规则缺失');
|
|
// 零尺寸 inline-block：基线即下边缘，从而把箭头锚定到文字基线；尺寸为零则不参与换行/行高。
|
|
assert.match(host[0], /position:\s*relative/);
|
|
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 \{ 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">/);
|
|
});
|
|
|
|
test('类型列链接每种类型只生成一次', () => {
|
|
assert.equal(count(page, /\$type_html = '<a/g), 4);
|
|
assert.equal(count(page, /add_query_arg\('type', 'custom'/g), 1);
|
|
assert.match(list, /if \(\$msg\['type'\] !== 'custom'\) \{/);
|
|
assert.doesNotMatch(list, /\$msg\['type'\] === 'custom'\)\s*\{\s*\$type_html/);
|
|
});
|