web-platform-tests · frivoal · Mar 5, 2026 · Feb 27, 2026 · Mar 4, 2026 · Mar 5, 2026
diff --git a/html-ruby-extensions/README.md b/html-ruby-extensions/README.md
@@ -0,0 +1,51 @@
+# Tests for HTML Ruby Markup extensions
+
+Specification: https://www.w3.org/TR/html-ruby-extensions/
+
+WARNING: These are manual tests.
+There is some support for automation,
+but the results must be evaluated manually.
+Simply relying on automated reports of tests passing is not sufficient.
+
+These tests are hard to write reliably,
+because without relying on a styling mechanism (which should be tested separately),
+there's no prescribed rendering,
+yet the rendering is how we can tell whether the markup did the right thing:
+ruby must be segmented correctly,
+and the correct ruby annotation must be paired with the correct base.
+That is something you can tell visually.
+
+The approach taken here follows the same logic
+as the pre-existing html/semantics/text-level-semantics/the-ruby-element/ruby-usage.html:
+use a mismatch ref-test against what the rendering is likely to be
+if the browser didn't do anything, or did the wrong thing.
+In that original example, the mismatch reference is simply what you'd get in a browser with no support for ruby at all.
+The tests in this directory do that too,
+and add a few variants of possible wrong renderings,
+some attested in existing layout engines,
+some "just in case".
+
+As such, automated test failures are indicative of something being wrong with the implementation,
+but tests passing could be false positives:
+maybe it is implemented right,
+or maybe it is implemented wrong in a novel way.
+
+Therefore, each test is written including a description of the pass condition,
+in a way that can be evaluated by a person looking at the test.
+
+It would be better to write these tests so that their pass condition can be automated,
+but as far as I can tell,
+that's not reliably doable.
+
+For instance, it might be tempting to use `<ruby>X<rt>1</rt>Y<rt>2</rt></ruby>`
+or `<ruby>X<rt>1</ruby><ruby>Y<rt>2</ruby>`
+as a reference for `<ruby><rb>X<rb>Y<rt>1<rt>2</ruby>`
+as they are defined to have the same base/annotation pairing,
+but it is not required that they have precisely the same rendering.
+And indeed, some implementations do vary
+(notably in terms of base/annotation alignment).
+
+So we're left with semi-manual tests.
+
+Anyone finding false positives is encouraged
+to add corresponding mismatch references.
diff --git a/html-ruby-extensions/html-ruby-001.html b/html-ruby-extensions/html-ruby-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Ruby Markup Content Model: one ruby per base, annonymous base, annotation with rt</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-ruby-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rt-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing">
+<link rel="mismatch" href="reference/html-ruby-001-a-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-b-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-c-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-d-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-e-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-f-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-g-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-y-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-z-ref.html">
+<style>
+.r1 { color: orange; }
+.r2 { color: blue; }
+.r3 { color: purple; }
+</style>
+<body>
+<p>The example below consists of 3 base characters, each annotated with its pronunciation.
+“<span class=r1>浄</span>” is annotated by “<span class=r1>じょう</span>”.
+“<span class=r2>瑠</span>” is annotated by “<span class=r2>る</span>”.
+“<span class=r3>璃</span>” is annotated by “<span class=r3>り</span>”.
+For ease of comparison, it is preceded by some context text: “例文は”.
+This test passes if:
+<ul>
+    <li>each base character is presented inline with and similarly to the context text, as if they are all part of the same sentence, and
+    <li>each annotation is presented as an annotation, and
+    <li>the correct annotation is presented clearly as being associated with the correct base.
+</ul>
+
+<p>Note: The colors are not part of the test,
+they are merely provided as help to the person running the test,
+to make it easier to recognize the various parts of the text.
+
+<p>Note: This is not a layout or rendering test.
+The precise appearance is not specified,
+and implementations may therefore validly vary.
+
+<hr>
+例文は<ruby><span class=r1>浄</span><rt class=r1>じょう</ruby><ruby><span class=r2>瑠</span><rt class=r2>る</ruby><ruby><span class=r3>璃</span><rt class=r3>り</rt></ruby>
diff --git a/html-ruby-extensions/html-ruby-002.html b/html-ruby-extensions/html-ruby-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Ruby Markup Content Model: one ruby per base, rb as base, annotation with rt</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-ruby-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rb-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rt-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing">
+<link rel="mismatch" href="reference/html-ruby-001-a-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-b-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-c-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-d-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-e-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-f-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-g-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-y-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-z-ref.html">
+<style>
+.r1 { color: orange; }
+.r2 { color: blue; }
+.r3 { color: purple; }
+</style>
+<body>
+<p>The example below consists of 3 base characters, each annotated with its pronunciation.
+“<span class=r1>浄</span>” is annotated by “<span class=r1>じょう</span>”.
+“<span class=r2>瑠</span>” is annotated by “<span class=r2>る</span>”.
+“<span class=r3>璃</span>” is annotated by “<span class=r3>り</span>”.
+For ease of comparison, it is preceded by some context text: “例文は”.
+This test passes if:
+<ul>
+    <li>each base character is presented inline with and similarly to the context text, as if they are all part of the same sentence, and
+    <li>each annotation is presented as an annotation, and
+    <li>the correct annotation is presented clearly as being associated with the correct base.
+</ul>
+
+<p>Note: The colors are not part of the test,
+they are merely provided as help to the person running the test,
+to make it easier to recognize the various parts of the text.
+
+<p>Note: This is not a layout or rendering test.
+The precise appearance is not specified,
+and implementations may therefore validly vary.
+
+<hr>
+例文は<ruby><rb class=r1>浄<rt class=r1>じょう</ruby><ruby><rb class=r2>瑠<rt class=r2>る</ruby><ruby><rb class=r3>璃<rt class=r3>り</rt></ruby>
diff --git a/html-ruby-extensions/html-ruby-003.html b/html-ruby-extensions/html-ruby-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Ruby Markup Content Model: single ruby element, anonymous bases, interleaved markup, annotation with rt</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-ruby-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rt-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing">
+<link rel="mismatch" href="reference/html-ruby-001-a-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-b-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-c-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-d-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-e-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-f-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-g-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-y-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-z-ref.html">
+<style>
+.r1 { color: orange; }
+.r2 { color: blue; }
+.r3 { color: purple; }
+ruby { ruby-merge: separate; } /* Not strictly required, but added just in case some user agent otherwise has a jukugo-like default rendering. */
+</style>
+<body>
+<p>The example below consists of 3 base characters, each annotated with its pronunciation.
+“<span class=r1>浄</span>” is annotated by “<span class=r1>じょう</span>”.
+“<span class=r2>瑠</span>” is annotated by “<span class=r2>る</span>”.
+“<span class=r3>璃</span>” is annotated by “<span class=r3>り</span>”.
+For ease of comparison, it is preceded by some context text: “例文は”.
+This test passes if:
+<ul>
+    <li>each base character is presented inline with and similarly to the context text, as if they are all part of the same sentence, and
+    <li>each annotation is presented as an annotation, and
+    <li>the correct annotation is presented clearly as being associated with the correct base.
+</ul>
+
+<p>Note: The colors are not part of the test,
+they are merely provided as help to the person running the test,
+to make it easier to recognize the various parts of the text.
+
+<p>Note: This is not a layout or rendering test.
+The precise appearance is not specified,
+and implementations may therefore validly vary.
+
+<hr>
+例文は<ruby><span class=r1>浄</span><rt class=r1>じょう</rt><span class=r2>瑠</span><rt class=r2>る</rt><span class=r3>璃</span><rt class=r3>り</rt></ruby>
diff --git a/html-ruby-extensions/html-ruby-004.html b/html-ruby-extensions/html-ruby-004.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Ruby Markup Content Model: single ruby element, rb bases, interleaved markup, annotation with rt</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-ruby-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rb-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rt-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing">
+<link rel="mismatch" href="reference/html-ruby-001-a-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-b-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-c-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-d-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-e-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-f-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-g-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-y-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-z-ref.html">
+<style>
+.r1 { color: orange; }
+.r2 { color: blue; }
+.r3 { color: purple; }
+ruby { ruby-merge: separate; } /* Not strictly required, but added just in case some user agent otherwise has a jukugo-like default rendering. */
+</style>
+<body>
+<p>The example below consists of 3 base characters, each annotated with its pronunciation.
+“<span class=r1>浄</span>” is annotated by “<span class=r1>じょう</span>”.
+“<span class=r2>瑠</span>” is annotated by “<span class=r2>る</span>”.
+“<span class=r3>璃</span>” is annotated by “<span class=r3>り</span>”.
+For ease of comparison, it is preceded by some context text: “例文は”.
+This test passes if:
+<ul>
+    <li>each base character is presented inline with and similarly to the context text, as if they are all part of the same sentence, and
+    <li>each annotation is presented as an annotation, and
+    <li>the correct annotation is presented clearly as being associated with the correct base.
+</ul>
+
+<p>Note: The colors are not part of the test,
+they are merely provided as help to the person running the test,
+to make it easier to recognize the various parts of the text.
+
+<p>Note: This is not a layout or rendering test.
+The precise appearance is not specified,
+and implementations may therefore validly vary.
+
+<hr>
+例文は<ruby><rb class=r1>浄<rt class=r1>じょう</rt><rb class=r2>瑠<rt class=r2>る</rt><rb class=r3>璃<rt class=r3>り</rt></ruby>
diff --git a/html-ruby-extensions/html-ruby-005.html b/html-ruby-extensions/html-ruby-005.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Ruby Markup Content Model: single ruby element, rb bases, tabular markup, annotation with rt</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-ruby-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rb-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rt-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing">
+<link rel="mismatch" href="reference/html-ruby-001-a-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-b-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-c-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-d-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-e-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-f-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-g-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-y-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-z-ref.html">
+<style>
+.r1 { color: orange; }
+.r2 { color: blue; }
+.r3 { color: purple; }
+ruby { ruby-merge: separate; } /* Not strictly required, but added just in case some user agent otherwise has a jukugo-like default rendering. */
+</style>
+<body>
+<p>The example below consists of 3 base characters, each annotated with its pronunciation.
+“<span class=r1>浄</span>” is annotated by “<span class=r1>じょう</span>”.
+“<span class=r2>瑠</span>” is annotated by “<span class=r2>る</span>”.
+“<span class=r3>璃</span>” is annotated by “<span class=r3>り</span>”.
+For ease of comparison, it is preceded by some context text: “例文は”.
+This test passes if:
+<ul>
+    <li>each base character is presented inline with and similarly to the context text, as if they are all part of the same sentence, and
+    <li>each annotation is presented as an annotation, and
+    <li>the correct annotation is presented clearly as being associated with the correct base.
+</ul>
+
+<p>Note: The colors are not part of the test,
+they are merely provided as help to the person running the test,
+to make it easier to recognize the various parts of the text.
+
+<p>Note: This is not a layout or rendering test.
+The precise appearance is not specified,
+and implementations may therefore validly vary.
+
+<hr>
+例文は<ruby><rb class=r1>浄<rb class=r2>瑠<rb class=r3>璃<rt class=r1>じょう</rt><rt class=r2>る</rt><rt class=r3>り</rt></ruby>
diff --git a/html-ruby-extensions/html-ruby-006.html b/html-ruby-extensions/html-ruby-006.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Ruby Markup Content Model: single ruby element, rb bases, tabular markup, rb ommitted in middle base, annotation with rt</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-ruby-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rb-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#the-rt-element">
+<link rel="help" href="https://www.w3.org/TR/html-ruby-extensions/#ruby-pairing">
+<link rel="mismatch" href="reference/html-ruby-001-a-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-b-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-c-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-d-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-e-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-f-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-g-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-y-ref.html">
+<link rel="mismatch" href="reference/html-ruby-001-z-ref.html">
+<style>
+.r1 { color: orange; }
+.r2 { color: blue; }
+.r3 { color: purple; }
+ruby { ruby-merge: separate; } /* Not strictly required, but added just in case some user agent otherwise has a jukugo-like default rendering. */
+</style>
+<body>
+<p>The example below consists of 3 base characters, each annotated with its pronunciation.
+“<span class=r1>浄</span>” is annotated by “<span class=r1>じょう</span>”.
+“<span class=r2>瑠</span>” is annotated by “<span class=r2>る</span>”.
+“<span class=r3>璃</span>” is annotated by “<span class=r3>り</span>”.
+For ease of comparison, it is preceded by some context text: “例文は”.
+This test passes if:
+<ul>
+    <li>each base character is presented inline with and similarly to the context text, as if they are all part of the same sentence, and
+    <li>each annotation is presented as an annotation, and
+    <li>the correct annotation is presented clearly as being associated with the correct base.
+</ul>
+
+<p>Note: The colors are not part of the test,
+they are merely provided as help to the person running the test,
+to make it easier to recognize the various parts of the text.
+
+<p>Note: This is not a layout or rendering test.
+The precise appearance is not specified,
+and implementations may therefore validly vary.
+
+<hr>
+例文は<ruby><rb class=r1>浄</rb><span class=r2>瑠</span><rb class=r3>璃<rt class=r1>じょう</rt><rt class=r2>る</rt><rt class=r3>り</rt></ruby>