Skip to content

Commit 716e262

Browse files
kojiishichromium-wpt-export-bot
kojiishi
authored and
chromium-wpt-export-bot
committed
[text-spacing-trim] Update fallback tests
Before this patch, the `text-spacing-trim-fallback-001` test was to ensure kerning is applied as expected. Since its purpose is to ensure the same rendering for fallback and non-fallback, this patch changes: * Change the ref to use the normal `text-spacing-trim` with non-fallback font, instead of manually applying `halt`. * Add `highlight-chars.js` to visualize bounding boxes of punctuation characters to ensure the kerning is applied to the same character. It uses CSS custom highlights so that the visualization doesn't change the DOM structure. Bug: 431660829 Change-Id: I226c8a66e020a2832492d8c00af41cb817ced1f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6831915 Auto-Submit: Koji Ishii <kojii@chromium.org> Commit-Queue: Kent Tamura <tkent@chromium.org> Reviewed-by: Kent Tamura <tkent@chromium.org> Cr-Commit-Position: refs/heads/main@{#1499854}
1 parent b0fabbb commit 716e262

3 files changed

Lines changed: 63 additions & 9 deletions

File tree

‎css/css-text/text-spacing-trim/support/highlight-chars.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
"use strict";
2+
3+
/**
4+
* Find characters in a container and creates CSS Highlights for them.
5+
* @param {Node} container - The container node to search within.
6+
*/
7+
function highlightChars(container) {
8+
const chars = {
9+
"「": "open",
10+
"」": "close",
11+
"（": "open",
12+
"）": "close",
13+
"。": "dot",
14+
"、": "dot",
15+
"．": "dot",
16+
"，": "dot",
17+
"：": "colon",
18+
"；": "colon",
19+
};
20+
const style = [
21+
"::highlight(open) { background-color: orange; }",
22+
"::highlight(close) { background-color: springgreen; }",
23+
"::highlight(dot) { background-color: skyblue; }",
24+
"::highlight(colon) { background-color: wheat; }",
25+
].join("\n");
26+
const style_element = document.createElement("style");
27+
style_element.textContent = style;
28+
document.head.appendChild(style_element);
29+
30+
const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
31+
while (walker.nextNode()) {
32+
const textNode = walker.currentNode;
33+
const text = textNode.nodeValue;
34+
for (let i = 0; i < text.length; ++i) {
35+
const char = text[i];
36+
const name = chars[char];
37+
if (!name) {
38+
continue;
39+
}
40+
let highlight = CSS.highlights.get(name);
41+
if (!highlight) {
42+
highlight = new Highlight();
43+
CSS.highlights.set(name, highlight);
44+
}
45+
const range = document.createRange();
46+
range.setStart(textNode, i);
47+
range.setEnd(textNode, i + 1);
48+
highlight.add(range);
49+
}
50+
}
51+
}
52+
53+
window.addEventListener("load", () => {
54+
const container = document.getElementById("container");
55+
highlightChars(container ? container : document.body);
56+
});

‎css/css-text/text-spacing-trim/text-spacing-trim-fallback-001-ref.html‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3+
<script src="support/highlight-chars.js"></script>
34
<style>
45
@font-face {
56
font-family: halt;
@@ -8,16 +9,12 @@
89
#container {
910
font-family: halt;
1011
font-size: 20px;
11-
text-spacing-trim: space-all;
12-
}
13-
halt {
14-
font-feature-settings: 'halt' 1;
1512
}
1613
</style>
1714
<div id="container">
18-
<div>国<halt>。</halt>：国</div>
19-
<div>国<halt>。</halt>：国</div>
20-
<div>国<halt>。</halt>：国</div>
21-
<div>国。<halt>「</halt>国</div>
22-
<div>国。<halt>「</halt>国</div>
15+
<div>国。：国</div>
16+
<div>国。：国</div>
17+
<div>国。：国</div>
18+
<div>国。「国</div>
19+
<div>国。「国</div>
2320
</div>

‎css/css-text/text-spacing-trim/text-spacing-trim-fallback-001.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<meta charset="utf-8">
33
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
44
<link rel="match" href="text-spacing-trim-fallback-001-ref.html">
5+
<script src="support/highlight-chars.js"></script>
56
<style>
67
@font-face {
78
font-family: halt;

0 commit comments

Comments
 (0)