Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-ruby/ruby-text-combine-upright-001b.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!-- `reftest-wait` is a reftest harness signal that delays comparison until ready.
See https://web-platform-tests.org/writing-tests/reftests.html#controlling-when-comparison-occurs -->
<html class="reftest-wait">
<head>
<meta charset="UTF-8">
<title>CSS Test: Ruby with text-combine-upright child in base</title>
<link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
<link rel="match" href="ruby-text-combine-upright-001-ref.html">
<script src="/common/reftest-wait.js"></script>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.test {
display: none;
font: 52px Ahem;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<p>Test passes if the two rectangles are vertically middle aligned.</p>
<div class="test" id="target">
<ruby><rb><span style="text-combine-upright: all">X</span></rb><rt>XXXXXXXX</rt></ruby>
</div>
<script>
// Avoid fallback-font first layout for deterministic reftest snapshots.
Promise.all([
document.fonts.load('52px Ahem'),
document.fonts.ready,
]).then(() => {
const target = document.getElementById('target');
target.style.display = 'block';
target.getBoundingClientRect();
requestAnimationFrame(() => {
takeScreenshot();
});
});
</script>
</body>
</html>