Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/word-spacing/word-spacing-combining-mark-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Text test: word-spacing does not separate a combining mark from its base</title>
<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
<link rel="match" href="reference/word-spacing-combining-mark-001-ref.html">
<meta name="assert" content="Word spacing is added at word-separator characters. A space and the combining mark applied to it are one typographic character unit, so word-spacing must not displace the mark relative to the space it is attached to, even when the font positions the mark with a GPOS mark-to-base anchor rather than with glyph advances.">
<style>
/* /fonts/mark-anchor-test.ttf anchors U+0301 to the space glyph as well as to
'A', so the mark's base is the word-separator character that word-spacing
widens. Each glyph is a full-width bar in its own horizontal band: 'A' is the
bottom bar and U+0301 the middle bar, placed directly above whichever base it
attaches to. 'D' is the middle bar as an ordinary spacing glyph, so "AD"
paints the bottom bar in the first em and the middle bar in the second --
exactly what "A", space, U+0301 paints when the mark stays on its space.
Word-spacing that displaces the mark slides the middle bar further right.
Generated by css/css-text/tools/generate-mark-anchor-font.py. */
@font-face {
font-family: "mark-anchor-test";
src: url("/fonts/mark-anchor-test.ttf") format("truetype");
}
div {
font-family: "mark-anchor-test";
font-size: 100px;
line-height: 150px;
/* One em, so a displaced mark lands a full glyph clear of its base. */
word-spacing: 100px;
white-space: nowrap;
}
</style>
<p>Test passes if the lower black bar below is 100px wide starting at the left
edge, and the upper bar is 100px wide immediately to its right, with no gap
between them horizontally and no bar further right.</p>
<!-- 'A', then a space carrying a combining mark. Word-spacing widens the
space's advance; the mark must not move with it. -->
<div>A ́</div>
</html>