Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/synthetic-bold-combining-mark-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Fonts test: synthetic bold does not separate a combining mark from its base in RTL</title>
<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
<link rel="match" href="synthetic-bold-combining-mark-002-ref.html">
<meta name="assert" content="When a bold weight is synthesized for a family with no bold face, the synthesis must not displace a combining mark relative to the base it is attached to, in a right-to-left run as much as in a left-to-right one.">
<style>
/* The RTL counterpart of synthetic-bold-combining-mark-001, on Hebrew bases (a
genuine RTL run rather than a bidi-override, which would skip bidi rule W1):
ALEF is the bottom bar, BET the bottom and middle bars as one glyph, and GIMEL
all three. Both sides request bold from a family with only a Regular face, so
the synthesis applies equally to each and the comparison tests only that the
mark stayed on its base.
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";
/* Small enough that all three groups fit inside the 800x600 reference
viewport, so every bar is actually compared. */
font-size: 100px;
line-height: 150px;
font-weight: bold;
font-synthesis: weight;
direction: rtl;
white-space: nowrap;
}
</style>
<p>Test passes if every black bar below is exactly as wide as, and right-aligned
with, the bars above and below it in the same group — two groups in the
middle row — and no bar is offset to the left of the others.</p>
<!-- One base, one mark. -->
<div>א́</div>
<!-- Two clusters, so any displacement would accumulate across them. -->
<div>א́א́</div>
<!-- Two marks on one base; each takes its position from the same base. -->
<div>א́̀</div>
</html>