diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/ruby')
30 files changed, 662 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001-ref.html new file mode 100644 index 000000000..ab1fee01a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Basic nested ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org"> + <style> + div { + display: inline-block; + padding: 20px; + border: 1px solid black; + } + </style> +</head> +<body> + <p>Test passes if content in the two blocks are identical:</p> + <div id="test"> + <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角 + </div> + <div id="ref"> + <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角 + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001.html b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001.html new file mode 100644 index 000000000..1c00017cc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Basic nested ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org"> + <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#nested-pairing"> + <link rel="match" href="nested-ruby-pairing-001-ref.html"> + <style> + div { + display: inline-block; + padding: 20px; + border: 1px solid black; + } + </style> +</head> +<body> + <p>Test passes if content in the two blocks are identical:</p> + <div id="test"> + <ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角 + </div> + <div id="ref"> + <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角 + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/reftest-stylo.list b/layout/reftests/w3c-css/submitted/ruby/reftest-stylo.list new file mode 100644 index 000000000..d72859a10 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/reftest-stylo.list @@ -0,0 +1,19 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests for inlinizing block-level boxes +== ruby-inlinize-blocks-001.html ruby-inlinize-blocks-001.html +skip == ruby-inlinize-blocks-002.html ruby-inlinize-blocks-002.html +== ruby-inlinize-blocks-003.html ruby-inlinize-blocks-003.html +== ruby-inlinize-blocks-004.html ruby-inlinize-blocks-004.html +== ruby-inlinize-blocks-005.html ruby-inlinize-blocks-005.html + +# Tests for autohiding base-identical annotations +== ruby-autohide-001.html ruby-autohide-001.html +== ruby-autohide-002.html ruby-autohide-002.html +== ruby-autohide-003.html ruby-autohide-003.html +== ruby-autohide-004.html ruby-autohide-004.html + +# Tests for ruby with text-combine-upright +== ruby-text-combine-upright-001a.html ruby-text-combine-upright-001a.html +== ruby-text-combine-upright-001b.html ruby-text-combine-upright-001b.html +== ruby-text-combine-upright-002a.html ruby-text-combine-upright-002a.html +== ruby-text-combine-upright-002b.html ruby-text-combine-upright-002b.html diff --git a/layout/reftests/w3c-css/submitted/ruby/reftest.list b/layout/reftests/w3c-css/submitted/ruby/reftest.list new file mode 100644 index 000000000..25447e5e8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/reftest.list @@ -0,0 +1,21 @@ +# Tests for inlinizing block-level boxes +== ruby-inlinize-blocks-001.html ruby-inlinize-blocks-001-ref.html +== ruby-inlinize-blocks-002.html ruby-inlinize-blocks-002-ref.html +== ruby-inlinize-blocks-003.html ruby-inlinize-blocks-003-ref.html +== ruby-inlinize-blocks-004.html ruby-inlinize-blocks-004-ref.html +== ruby-inlinize-blocks-005.html ruby-inlinize-blocks-005-ref.html + +# Tests for autohiding base-identical annotations +== ruby-autohide-001.html ruby-autohide-001-ref.html +== ruby-autohide-002.html ruby-autohide-002-ref.html +== ruby-autohide-003.html ruby-autohide-003-ref.html +== ruby-autohide-004.html ruby-autohide-001-ref.html + +# Tests for ruby with text-combine-upright +== ruby-text-combine-upright-001a.html ruby-text-combine-upright-001-ref.html +== ruby-text-combine-upright-001b.html ruby-text-combine-upright-001-ref.html +== ruby-text-combine-upright-002a.html ruby-text-combine-upright-002-ref.html +== ruby-text-combine-upright-002b.html ruby-text-combine-upright-002-ref.html + +# Tests for nested ruby +== nested-ruby-pairing-001.html nested-ruby-pairing-001-ref.html diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001-ref.html new file mode 100644 index 000000000..43945ce1b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> +</head> +<body> + <ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001.html new file mode 100644 index 000000000..61bc6706b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Autohide ruby annotations which are identical to their bases</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide"> + <link rel="match" href="ruby-autohide-001-ref.html"> +</head> +<body> + <ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002-ref.html new file mode 100644 index 000000000..afa0f3cd2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> +</head> +<body> + <p><ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt>ri</rt><rt>が</rt><rt>な</rt> + </ruby></p> + <p><ruby> + <rb>振</rb><rb>ri</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt> + </ruby></p> + <p><ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt> + </ruby></p> + <p><ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt> + </ruby></p> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002.html new file mode 100644 index 000000000..3d5131cdd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Autohide ruby annotations which are identical to their bases</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide"> + <link rel="match" href="ruby-autohide-002-ref.html"> + <script> + window.onload = function() { + // Force a reflow before changes. + document.body.clientWidth; + var elems = document.querySelectorAll('[data-content]'); + for (var i = 0; i < elems.length; i++) { + elems[i].textContent = elems[i].dataset.content; + } + }; + </script> +</head> +<body> + <p><ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt data-content="ri">り</rt><rt>が</rt><rt>な</rt> + </ruby></p> + <p><ruby> + <rb>振</rb><rb data-content="ri">り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt> + </ruby></p> + <p><ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt data-content="り">ri</rt><rt>が</rt><rt>な</rt> + </ruby></p> + <p><ruby> + <rb>振</rb><rb data-content="り">ri</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt> + </ruby></p> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003-ref.html new file mode 100644 index 000000000..468b17d4e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <style> + body { line-height: 5em; } + </style> +</head> +<body> + <ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003.html new file mode 100644 index 000000000..2279e7540 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Autohide ruby annotations which are identical to their bases</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide"> + <link rel="match" href="ruby-autohide-003-ref.html"> + <style> + body { line-height: 5em; } + </style> +</head> +<body> + <ruby> + <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> + <rt>ふ</rt><rt style="line-height: 100em;">り</rt><rt>が</rt><rt>な</rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-004.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-004.html new file mode 100644 index 000000000..4499cf3e1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-004.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Autohide ruby annotations which are identical to their bases</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide"> + <link rel="match" href="ruby-autohide-001-ref.html"> +</head> +<body> + <ruby> + 振<rt>ふ</rt>り<rt>り</rt>仮<rt>が</rt>名<rt>な</rt> + </ruby> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001-ref.html new file mode 100644 index 000000000..d29358b5b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + .inline { + display: inline-block; + background-color: yellow; + width: 30px; height: 30px; + } + </style> +</head> +<body> + <div><ruby>a<div class="inline">b</div>c</ruby></div> + <div><rb>a<div class="inline">b</div>c</rb></div> + <div><rt>a<div class="inline">b</div>c</rt></div> + <div><rbc>a<div class="inline">b</div>c</rbc></div> + <div><rtc>a<div class="inline">b</div>c</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001.html new file mode 100644 index 000000000..f8a73f318 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize"> + <link rel="match" href="ruby-inlinize-blocks-001-ref.html"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + .inline { + display: block; + background-color: yellow; + width: 30px; height: 30px; + } + </style> +</head> +<body> + <div><ruby>a<div class="inline">b</div>c</ruby></div> + <div><rb>a<div class="inline">b</div>c</rb></div> + <div><rt>a<div class="inline">b</div>c</rt></div> + <div><rbc>a<div class="inline">b</div>c</rbc></div> + <div><rtc>a<div class="inline">b</div>c</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002-ref.html new file mode 100644 index 000000000..d1ba587e9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <style> + .block, table, .flex { + background-color: yellow; + width: 100px; height: 30px; + border: 1px solid blue; + } + .block { display: inline-block; } + table { display: inline-table; border-collapse: collapse; } + td { border: 3px solid red; } + .flex { display: inline-flex; } + .flex-item { flex: auto; } + </style> +</head> +<body> + <div><rb>a<div class="block">b</div>c</rb><rt>x<div class="block">y</div>z</rt></div> + <div> + <rb>a<table><tr><td>b1</td><td>b2</td></tr></table>c</rb> + <rt>x<table><tr><td>y1</td><td>y2</td></tr></table>z</rt> + </div> + <div> + <rb>a<div class="flex"> + <div class="flex-item">b1</div> + <div class="flex-item">b2</div> + </div>c</rb> + <rt>x<div class="flex"> + <div class="flex-item">y1</div> + <div class="flex-item">y2</div> + </div>z</rt> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002.html new file mode 100644 index 000000000..e16b7731e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize"> + <link rel="match" href="ruby-inlinize-blocks-002-ref.html"> + <style> + .block, table, .flex { + background-color: yellow; + width: 100px; height: 30px; + border: 1px solid blue; + } + .block { display: block; } + table { border-collapse: collapse; } + td { border: 3px solid red; } + .flex { display: flex; } + .flex-item { flex: auto; } + </style> +</head> +<body> + <div><rb>a<div class="block">b</div>c</rb><rt>x<div class="block">y</div>z</rt></div> + <div> + <rb>a<table><tr><td>b1</td><td>b2</td></tr></table>c</rb> + <rt>x<table><tr><td>y1</td><td>y2</td></tr></table>z</rt> + </div> + <div> + <rb>a<div class="flex"> + <div class="flex-item">b1</div> + <div class="flex-item">b2</div> + </div>c</rb> + <rt>x<div class="flex"> + <div class="flex-item">y1</div> + <div class="flex-item">y2</div> + </div>z</rt> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003-ref.html new file mode 100644 index 000000000..74a4889a9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + div { border-collapse: collapse; } + .table { display: inline-table; } + .cell { + display: table-cell; + background-color: yellow; + border: 3px solid blue; + } + </style> +</head> +<body> + <div><ruby>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</ruby></div> + <div><rb>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rb></div> + <div><rt>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rt></div> + <div><rbc>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rbc></div> + <div><rtc>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003.html new file mode 100644 index 000000000..8200413af --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize"> + <link rel="match" href="ruby-inlinize-blocks-003-ref.html"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + body { border-collapse: collapse; } + .cell { + display: table-cell; + background-color: yellow; + border: 3px solid blue; + } + </style> +</head> +<body> + <div><ruby>a<div class="cell">b1</div><div class="cell">b2</div>c</ruby></div> + <div><rb>a<div class="cell">b1</div><div class="cell">b2</div>c</rb></div> + <div><rt>a<div class="cell">b1</div><div class="cell">b2</div>c</rt></div> + <div><rbc>a<div class="cell">b1</div><div class="cell">b2</div>c</rbc></div> + <div><rtc>a<div class="cell">b1</div><div class="cell">b2</div>c</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004-ref.html new file mode 100644 index 000000000..90e876850 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + .inline { + display: inline-block; + background-color: yellow; + width: 30px; height: 30px; + } + </style> +</head> +<body> + <div><ruby>a<span><div class="inline">b</div></span>c</ruby></div> + <div><rb>a<span><div class="inline">b</div></span>c</rb></div> + <div><rt>a<span><div class="inline">b</div></span>c</rt></div> + <div><rbc>a<span><div class="inline">b</div></span>c</rbc></div> + <div><rtc>a<span><div class="inline">b</div></span>c</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004.html new file mode 100644 index 000000000..1305faa40 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize"> + <link rel="match" href="ruby-inlinize-blocks-004-ref.html"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + .inline { + display: block; + background-color: yellow; + width: 30px; height: 30px; + } + </style> +</head> +<body> + <div><ruby>a<span><div class="inline">b</div></span>c</ruby></div> + <div><rb>a<span><div class="inline">b</div></span>c</rb></div> + <div><rt>a<span><div class="inline">b</div></span>c</rt></div> + <div><rbc>a<span><div class="inline">b</div></span>c</rbc></div> + <div><rtc>a<span><div class="inline">b</div></span>c</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005-ref.html new file mode 100644 index 000000000..25ac110a2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + ruby::before, rb::before, rt::before, rbc::before, rtc::before { + content: "a"; + display: inline-block; + background-color: yellow; + width: 30px; height: 30px; + } + ruby::after, rb::after, rt::after, rbc::after, rtc::after { + content: "c"; + display: inline-block; + background-color: yellow; + width: 30px; height: 30px; + } + </style> +</head> +<body> + <div><ruby>b</ruby></div> + <div><rb>b</rb></div> + <div><rt>b</rt></div> + <div><rbc>b</rbc></div> + <div><rtc>b</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005.html new file mode 100644 index 000000000..a80ce73e5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Inlinize block-level boxes inside ruby</title> + <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize"> + <link rel="match" href="ruby-inlinize-blocks-005-ref.html"> + <link rel="stylesheet" href="support/rbc.css"> + <style> + ruby::before, rb::before, rt::before, rbc::before, rtc::before { + content: "a"; + display: block; + background-color: yellow; + width: 30px; height: 30px; + } + ruby::after, rb::after, rt::after, rbc::after, rtc::after { + content: "c"; + display: block; + background-color: yellow; + width: 30px; height: 30px; + } + </style> +</head> +<body> + <div><ruby>b</ruby></div> + <div><rb>b</rb></div> + <div><rt>b</rt></div> + <div><rbc>b</rbc></div> + <div><rtc>b</rtc></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001-ref.html new file mode 100644 index 000000000..580bcd3fb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Ruby with text-combine-upright in base</title> + <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org"> + <link rel="stylesheet" href="support/ahem.css"> + <style> + .test { + 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"> + <ruby><rb><span style="writing-mode: horizontal-tb">X</span></rb><rt>XXXXXXXX</rt></ruby> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001a.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001a.html new file mode 100644 index 000000000..a35772ac0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001a.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Ruby with text-combine-upright base</title> + <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org"> + <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> + <link rel="match" href="ruby-text-combine-upright-001-ref.html"> + <link rel="stylesheet" href="support/ahem.css"> + <style> + .test { + 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"> + <ruby><rb style="text-combine-upright: all">X</rb><rt>XXXXXXXX</rt></ruby> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001b.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001b.html new file mode 100644 index 000000000..4997bdc9b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001b.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<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="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> + <link rel="match" href="ruby-text-combine-upright-001-ref.html"> + <link rel="stylesheet" href="support/ahem.css"> + <style> + .test { + 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"> + <ruby><rb><span style="text-combine-upright: all">X</span></rb><rt>XXXXXXXX</rt></ruby> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002-ref.html new file mode 100644 index 000000000..796cd90b8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Reference: Ruby with text-combine-upright annotation</title> + <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org"> + <link rel="stylesheet" href="support/ahem.css"> + <style> + .test { + 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"> + <ruby><rb>XXXX</rb><rt><span style="writing-mode: horizontal-tb">X</span></rt></ruby> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002a.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002a.html new file mode 100644 index 000000000..411c5b248 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002a.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Ruby with text-combine-upright in annotation</title> + <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org"> + <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> + <link rel="match" href="ruby-text-combine-upright-002-ref.html"> + <link rel="stylesheet" href="support/ahem.css"> + <style> + .test { + 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"> + <ruby><rb>XXXX</rb><rt style="text-combine-upright: all">X</rt></ruby> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002b.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002b.html new file mode 100644 index 000000000..df57bf886 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002b.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>CSS Test: Ruby with text-combine-upright child in annotation</title> + <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org"> + <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> + <link rel="match" href="ruby-text-combine-upright-002-ref.html"> + <link rel="stylesheet" href="support/ahem.css"> + <style> + .test { + 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"> + <ruby><rb>XXXX</rb><rt><span style="text-combine-upright: all">X</span></rt></ruby> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/ruby/support/Ahem.ttf b/layout/reftests/w3c-css/submitted/ruby/support/Ahem.ttf Binary files differnew file mode 100644 index 000000000..ac81cb031 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/support/Ahem.ttf diff --git a/layout/reftests/w3c-css/submitted/ruby/support/ahem.css b/layout/reftests/w3c-css/submitted/ruby/support/ahem.css new file mode 100644 index 000000000..82ee46679 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/support/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(./Ahem.ttf); +} diff --git a/layout/reftests/w3c-css/submitted/ruby/support/rbc.css b/layout/reftests/w3c-css/submitted/ruby/support/rbc.css new file mode 100644 index 000000000..75620e1e3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/ruby/support/rbc.css @@ -0,0 +1,4 @@ +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} |