diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-ruby | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-ruby')
181 files changed, 5247 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-ruby/META.yml b/testing/web-platform/tests/css/css-ruby/META.yml new file mode 100644 index 0000000000..b0098caea1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-ruby/ +suggested_reviewers: + - kojiishi + - fantasai + - upsuper diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-container.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-container.html new file mode 100644 index 0000000000..0a4ad8a24c --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-container.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Absolutely-positioned element in ruby base container</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context"> +<link rel="match" href="abs-in-ruby-base-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + .rel { position: relative; } + .abs { position: absolute; left: 0; top: -1em; } +</style> +<body style="font: 50px/3 Ahem"> +X<ruby><rbc class="rel"><rb><span class="abs">X</span></rb></rbc></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-ref.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-ref.html new file mode 100644 index 0000000000..0c7f57b1d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + .rel { position: relative; } + .abs { position: absolute; left: 0; top: -1em; } +</style> +<body style="font: 50px/3 Ahem"> +X<span class="rel"><span class="abs">X</span></span> diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base.html new file mode 100644 index 0000000000..bff3a3b748 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Absolutely-positioned element in ruby base</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context"> +<link rel="match" href="abs-in-ruby-base-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + .rel { position: relative; } + .abs { position: absolute; left: 0; top: -1em; } +</style> +<body style="font: 50px/3 Ahem"> +X<ruby><rbc><rb class="rel"><span class="abs">X</span></rb></rbc></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-container.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-container.html new file mode 100644 index 0000000000..41be48c47a --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-container.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Absolutely-positioned element in ruby container</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context"> +<link rel="match" href="abs-in-ruby-base-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + .rel { position: relative; } + .abs { position: absolute; left: 0; top: -1em; } +</style> +<body style="font: 50px/3 Ahem"> +X<ruby class="rel"><rbc><rb><span class="abs">X</span></rb></rbc></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html new file mode 100644 index 0000000000..076a2f01cf --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>CSS Ruby Reference: basic 'block ruby' layout.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +@font-face +{ + font-family: "mplus-1p-regular"; + src: url("/fonts/mplus-1p-regular.woff") format("woff"); +} + +html +{ + font-family: "mplus-1p-regular"; +} + +.b { background: lightblue; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +.columns { + columns: 3 auto; + column-rule: 1px; + background: lightgrey; + height: 2em; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +.w { white-space: nowrap; width:2.5em; margin: 1em 0em; } +</style> +A<div class="b"><ruby>ใน<rt>ใ</rt></ruby></div>B +A<div class="mbp b"><ruby>ใน<rt>ใ</rt></ruby></div>B +<div class="columns">A<div class="mbp b"><ruby>ใน<rt>ใ</rt> ใน<rt>ใ</rt> ใน<rt>ใ</rt> ใน<rt>ใ</rt> ใน<rt>ใ</rt></ruby></div>B</div> +<div style="width:2.5em; border:1px solid;"> + <div class="w b"><ruby><rb>ไธ<rb>ไบ<rb>ไธ<rb>ๅ<rb>ไบ<rb>ๅ
ญ<rb>ไธ<rb>ๅ
ซ</ruby></div> + <div class="w b"><ruby><rbc>ไธ</rbc><rbc>ไบ</rbc><rbc>ไธ</rbc><rbc>ๅ</rbc><rbc>ไบ</rbc><rbc>ๅ
ญ</rbc><rbc>ไธ</rbc><rbc>ๅ
ซ</rbc></ruby></div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-001.html b/testing/web-platform/tests/css/css-ruby/block-ruby-001.html new file mode 100644 index 0000000000..0602116aac --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>CSS Ruby Test: basic 'block ruby' layout.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="block-ruby-001-ref.html"> +<style> +@font-face +{ + font-family: "mplus-1p-regular"; + src: url("/fonts/mplus-1p-regular.woff") format("woff"); +} + +html +{ + font-family: "mplus-1p-regular"; +} + +ruby { display: block ruby; background: lightblue; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +.columns { + columns: 3 auto; + column-rule: 1px; + background: lightgrey; + height: 2em; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +</style> +A<ruby>ใน<rt>ใ</rt></ruby>B +A<ruby class="mbp">ใน<rt>ใ</rt></ruby>B +<div class="columns">A<ruby class=mbp>ใน<rt>ใ</rt> ใน<rt>ใ</rt> ใน<rt>ใ</rt> ใน<rt>ใ</rt> ใน<rt>ใ</rt></ruby>B</div> +<div style="width:2.5em; border:1px solid;"> + <ruby style="margin: 1em 0em;"><rb>ไธ<rb>ไบ<rb>ไธ<rb>ๅ<rb>ไบ<rb>ๅ
ญ<rb>ไธ<rb>ๅ
ซ</ruby> + <ruby style="margin: 1em 0em;"><rbc>ไธ</rbc><rbc>ไบ</rbc><rbc>ไธ</rbc><rbc>ๅ</rbc><rbc>ไบ</rbc><rbc>ๅ
ญ</rbc><rbc>ไธ</rbc><rbc>ๅ
ซ</rbc></ruby> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html new file mode 100644 index 0000000000..a4d26153da --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>Reference: blockification/inlinification of 'display:ruby/block ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +div,span { background: lightblue; } +ruby { display: ruby; } +rbb { display: ruby; background: lightblue; } +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; +} +</style> +<grid>A<div><ruby>ใน<rt>ใ</rt></ruby></div>B</grid> +<grid>A<div class=mbp><ruby>ใน<rt>ใ</rt></ruby></div>B</grid> +<grid>A + <div><ruby>ใน<rt>ใ</rt></ruby></div> + <div><ruby><rbc>ไธ</rbc><rbc>ไบ</rbc><rbc>ไธ</rbc><rbc>ๅ</rbc><rbc>ไบ</rbc><rbc>ๅ
ญ</rbc><rbc>ไธ</rbc><rbc>ๅ
ซ</rbc></ruby></div> +B +</grid> +<span><ruby>ใน<rt><rbb>ใ</rbb></rt></ruby></span> +<span><ruby>ใน<rbc><rbb>ใ</rbb></rbc></ruby></span> +<span><ruby>ใน<rtc><rbb>ใ</rbb></rtc></ruby></span> +<span><ruby>ใน<rbb>ใ</rbb></ruby></span> + +<pre>block ruby, block ruby, block ruby, block ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, </pre> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-002.html b/testing/web-platform/tests/css/css-ruby/block-ruby-002.html new file mode 100644 index 0000000000..73fbc3015b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-002.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>CSS Ruby Test: blockification/inlinification of 'display:ruby/block ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"> +<link rel="match" href="block-ruby-002-ref.html"> +<style> +ruby { display: ruby; background: lightblue; } +rbb { display: block ruby; background: lightblue; } +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; +} +</style> +<grid>A<ruby>ใน<rt>ใ</rt></ruby>B</grid> +<grid>A<ruby class=mbp>ใน<rt>ใ</rt></ruby>B</grid> +<grid>A + <ruby>ใน<rt>ใ</rt></ruby> + <ruby><rbc>ไธ</rbc><rbc>ไบ</rbc><rbc>ไธ</rbc><rbc>ๅ</rbc><rbc>ไบ</rbc><rbc>ๅ
ญ</rbc><rbc>ไธ</rbc><rbc>ๅ
ซ</rbc></ruby> +B +</grid> +<ruby>ใน<rt><rbb>ใ</rbb></rt></ruby> +<ruby>ใน<rbc><rbb>ใ</rbb></rbc></ruby> +<ruby>ใน<rtc><rbb>ใ</rbb></rtc></ruby> +<ruby>ใน<rbb>ใ</rbb></ruby> + +<pre></pre> +<script> +let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb')); +let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, ""); +document.querySelector('pre').appendChild(document.createTextNode(result)); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html new file mode 100644 index 0000000000..05eb7dbb99 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>CSS Reference File</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + font:10px/1 monospace; +} + +ruby { display: ruby; background: lightblue; } +rbb { display: block ruby; background: lightblue; } +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; +} +</style> + +<ruby class=mbp>X<rt>ใ</rt></ruby> +<grid>A<ruby class=mbp>X<rt>ใ</rt></ruby>B</grid> +<grid>A<ruby class=mbp>X<rt>ใ</rt></ruby>B</grid> +<grid>A<ruby>X<rt>ใ</rt></ruby><ruby>X<rbc></rbc></ruby>B</grid> +<grid>A<ruby>X</ruby><ruby>X<rbc><rt>ใ</rt></rbc></ruby>B</grid> +<ruby>X<rt><rbb>Xใ</rbb></rt></ruby> +<ruby>X<rbc><rbb>Xใ</rbb></rbc></ruby> +<ruby>X<rtc><rbb>Xใ</rbb></rtc></ruby> +<rbb class=mbp>X</rbb> +<rbb class=mbp>X<rt>ใ</rt></rbb> +<rbb class=mbp>X<rb>X</rb></rbb> + +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-003.html b/testing/web-platform/tests/css/css-ruby/block-ruby-003.html new file mode 100644 index 0000000000..26b33a1f6a --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>CSS Ruby Test: Text node insertion in 'display:ruby/block ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"> +<link rel="match" href="block-ruby-003-ref.html"> +<style> +html,body { + font:10px/1 monospace; +} + +ruby { display: ruby; background: lightblue; } +rbb { display: block ruby; background: lightblue; } +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; +} +</style> + +<ruby class=mbp><rt>ใ</rt></ruby> +<grid>A<ruby class=mbp><rt>ใ</rt></ruby>B</grid> +<grid>A<ruby class=mbp><rt>ใ</rt></ruby>B</grid> +<grid>A<ruby><rt>ใ</rt></ruby><ruby><rbc></rbc></ruby>B</grid> +<grid>A<ruby></ruby><ruby><rbc><rt>ใ</rt></rbc></ruby>B</grid> +<ruby><rt><rbb>ใ</rbb></rt></ruby> +<ruby><rbc><rbb>ใ</rbb></rbc></ruby> +<ruby><rtc><rbb>ใ</rbb></rtc></ruby> +<rbb class=mbp></rbb> +<rbb class=mbp><rt>ใ</rt></rbb> +<rbb class=mbp><rb>X</rb></rbb> + +<script> +document.body.getClientRects(); +let s = "X"; +let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb')); +ruby.forEach(function(e){ e.insertBefore(document.createTextNode(s),e.firstChild); e.offsetHeight;}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html new file mode 100644 index 0000000000..be7e89658d --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>CSS Reference File</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + font:10px/1 monospace; +} + +ruby { display: ruby; background: lightblue; } +rbb { display: block ruby; background: lightblue; } +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; + font-size: 200%; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; + ruby-position: under; +} +</style> + +<rt>ใ</rt> +<ruby class=mbp>X<rt>ใ</rt></ruby> +<grid>A<ruby class=mbp><rt>ใ</rt></ruby>B</grid> +<grid>A<ruby class=mbp>X<rt>ใ</rt></ruby>B</grid> +<grid>A<ruby>X<rt>ใ</rt></ruby><ruby><rbc></rbc><rt>ใ</rt></ruby>B</grid> +<grid>A<ruby><rt>ใ</rt></ruby><ruby><rbc>X</rbc><rt>ใ</rt></ruby>B</grid> +<ruby><rt><rbb>X<rt>ใ</rt></rbb></rt><rt>ใ</rt></ruby> +<ruby><rbc><rbb>X<rt>ใ</rt></rbb></rbc><rt>ใ</rt></ruby> +<ruby><rtc><rbb>X<rt>ใ</rt></rbb></rtc><rt>ใ</rt></ruby> +<rbb class=mbp><rt>ใ</rt></rbb> +<rbb class=mbp>X<rt>ใ</rt></rbb> +<rbb class=mbp><rb>X</rb><rt>ใ</rt></rbb> + +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-004.html b/testing/web-platform/tests/css/css-ruby/block-ruby-004.html new file mode 100644 index 0000000000..33ab4207b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-004.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja"> +<meta charset="utf-8"> +<title>CSS Ruby Test: RT append in 'display:ruby/block ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"> +<link rel="match" href="block-ruby-004-ref.html"> +<style> +html,body { + font:10px/1 monospace; +} + +ruby { display: ruby; background: lightblue; } +rbb { display: block ruby; background: lightblue; } + +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; + font-size: 200%; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; + ruby-position: under; +} +</style> + + +<rt>ใ</rt> +<ruby class=mbp>X</ruby> +<grid>A<ruby class=mbp></ruby>B</grid> +<grid>A<ruby class=mbp>X</ruby>B</grid> +<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid> +<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid> +<ruby><rt><rbb>X</rbb></rt></ruby> +<ruby><rbc><rbb>X</rbb></rbc></ruby> +<ruby><rtc><rbb>X</rbb></rtc></ruby> +<rbb class=mbp></rbb> +<rbb class=mbp>X</rbb> +<rbb class=mbp><rb>X</rb></rbb> + +<script> +document.body.getClientRects(); +let rt = document.querySelector('rt'); +let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb')); +ruby.forEach(function(e){ let n = rt.cloneNode(true); e.appendChild(n); e.offsetHeight;}); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html new file mode 100644 index 0000000000..06c6eccd9a --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html> +<meta charset="utf-8"> +<title>CSS Reference File</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { + font:10px/1 monospace; +} + +rbb, ruby { background:lightblue; } +ruby { display: ruby; } +rbb { display: block ruby; } +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; + font-size: 200%; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; + ruby-position: under; +} +x { display:block; width:3em; overflow:hidden; background:lightblue; } +</style> + +<div>zzzzzzzzzzzz</div> +<ruby class=mbp>X<div>zzzzzzzzzzzz</div></ruby> +<grid>A<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x>B</grid> +<grid>A<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x>B</grid> +<grid>A<x><rbb>X<div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc></rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid> +<grid>A<x><rbb><div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc>X</rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid> +<ruby><rt><ruby>X<div>zzzzzzzzzzzz</div></ruby></rt><div>zzzzzzzzzzzz</div></ruby> +<ruby><rbc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rbc><div>zzzzzzzzzzzz</div></ruby> +<ruby><rtc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rtc><div>zzzzzzzzzzzz</div></ruby> +<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x> +<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x> +<x class=mbp><rbb><rt>X</rt><div>zzzzzzzzzzzz</div></rbb></x> +<x class=mbp><rbb><rb>X</rb><div>zzzzzzzzzzzz</div></rbb></x> + +</html> diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-005.html b/testing/web-platform/tests/css/css-ruby/block-ruby-005.html new file mode 100644 index 0000000000..cf09e76833 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/block-ruby-005.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html> +<meta charset="utf-8"> +<title>CSS Ruby Test: DIV append in 'display:ruby/block ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"> +<link rel="match" href="block-ruby-005-ref.html"> +<style> +body { + font:10px/1 monospace; +} + +rbb, ruby { background:lightblue; overflow:hidden; width:3em; } +ruby { display: ruby; } +rbb { display: block ruby; } +grid { display: grid; } +.mbp { + margin: 1px 3px 5px 7px; + padding: 3px 5px 7px 1px; + border-width: 3px 1px 7px 5px; + border-style: solid; +} +rbc { + display: ruby-base-container; + unicode-bidi: isolate; + font-size: 200%; +} +rtc { + display: ruby-text-container; + unicode-bidi: isolate; + ruby-position: under; +} +</style> + +<div>zzzzzzzzzzzz</div> +<ruby class=mbp>X</ruby> +<grid>A<ruby class=mbp></ruby>B</grid> +<grid>A<ruby class=mbp>X</ruby>B</grid> +<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid> +<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid> +<ruby><rt><rbb>X</rbb></rt></ruby> +<ruby><rbc><rbb>X</rbb></rbc></ruby> +<ruby><rtc><rbb>X</rbb></rtc></ruby> +<rbb class=mbp></rbb> +<rbb class=mbp>X</rbb> +<rbb class=mbp><rt>X</rt></rbb> +<rbb class=mbp><rb>X</rb></rbb> + +<script> +document.body.getClientRects(); +let div = document.querySelector('div'); +let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb')); +ruby.forEach(function(e){ let n = div.cloneNode(true); e.appendChild(n); e.offsetHeight;}); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-ruby/br-clear-all-000.html b/testing/web-platform/tests/css/css-ruby/br-clear-all-000.html new file mode 100644 index 0000000000..91c5a0b63b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/br-clear-all-000.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-ruby-1/#rubypos"> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes"> +<style> + #float { + float: left; + width: 100px; + height: 100px; + background: cyan; + } + #container { + padding-bottom: 50px; + line-height: 20px; + background: yellow; + } + ruby { + ruby-position: under; + } + ruby > div { + display: inline-block; + width: 20px; + height: 20px; + background: hotpink; + } + rt > div { + display: inline-block; + width: 50px; + height: 50px; + background: blue; + } +</style> +<p>The yellow box should encompass its contents and also the cyan float, due to + clearance. The yellow box has bottom padding, and the blue ruby annotation box + is allowed to overflow into the padding area. In this case the blue box isn't + tall enough to even get past the float, though.</p> +<div id="float"></div> +<div id="container" data-expected-height="150"> + <ruby> + <div></div> + <rt> + <div></div> + </rt> + </ruby> + <br clear="all"> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-ruby/br-clear-all-001.html b/testing/web-platform/tests/css/css-ruby/br-clear-all-001.html new file mode 100644 index 0000000000..7c71eab4dd --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/br-clear-all-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-ruby-1/#rubypos"> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes"> +<style> + #float { + float: left; + width: 100px; + height: 100px; + background: cyan; + } + #container { + padding-bottom: 50px; + line-height: 20px; + background: yellow; + } + ruby { + ruby-position: under; + } + ruby > div { + display: inline-block; + width: 20px; + height: 20px; + background: hotpink; + } + rt > div { + display: inline-block; + width: 50px; + height: 100px; + background: blue; + } +</style> +<p>The yellow box should encompass its contents and also the cyan float, due to + clearance. The yellow box has bottom padding, and the blue ruby annotation box + is allowed to overflow into the padding area.</p> +<div id="float"></div> +<div id="container" data-expected-height="150"> + <ruby> + <div></div> + <rt> + <div></div> + </rt> + </ruby> + <br clear="all"> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-ruby/br-clear-all-002.html b/testing/web-platform/tests/css/css-ruby/br-clear-all-002.html new file mode 100644 index 0000000000..487fd33b5c --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/br-clear-all-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-ruby-1/#rubypos"> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes"> +<style> + #float { + float: left; + width: 100px; + height: 100px; + background: cyan; + } + #container { + padding-bottom: 50px; + line-height: 20px; + background: yellow; + } + ruby { + ruby-position: under; + } + ruby > div { + display: inline-block; + width: 20px; + height: 20px; + background: hotpink; + } + rt > div { + display: inline-block; + width: 50px; + height: 150px; + background: blue; + } +</style> +<p>The yellow box should encompass its contents and also the cyan float, due to + clearance. The yellow box has bottom padding, and the blue ruby annotation box + is allowed to overflow into the padding area. In this case the blue box is so + tall it will use the entire padding area, and also stretch the yellow box + somewhat.</p> +<div id="float"></div> +<div id="container" data-expected-height="170"> + <ruby> + <div></div> + <rt> + <div></div> + </rt> + </ruby> + <br clear="all"> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container-ref.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container-ref.html new file mode 100644 index 0000000000..e6119468c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference File</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<div style="font-size: 64px; line-height: 3">a<ruby><rb> </rb><rt>b</rt></ruby>c</div> diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container.html new file mode 100644 index 0000000000..4d86e07985 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Empty ruby base container</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="empty-ruby-base-container-ref.html"> +<div style="font-size: 64px; line-height: 3">a<ruby><rt>b</rt></ruby>c</div> diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-abs.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-abs.html new file mode 100644 index 0000000000..025859ea74 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-abs.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Empty ruby text container</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="empty-ruby-text-container-ref.html"> +<style> +a { position: absolute; } +</style> +<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc><a> </a></rtc><rt>c</rt></ruby>d</div> diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-float.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-float.html new file mode 100644 index 0000000000..88bcf42736 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-float.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Empty ruby text container</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="empty-ruby-text-container-ref.html"> +<style> +a { float: right; } +</style> +<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc><a> </a></rtc><rt>c</rt></ruby>d</div> diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-ref.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-ref.html new file mode 100644 index 0000000000..9b513c9ada --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Empty ruby text container</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc><rt></rt></rtc><rt>c</rt></ruby>d</div> diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container.html new file mode 100644 index 0000000000..972013c662 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Empty ruby text container</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="empty-ruby-text-container-ref.html"> +<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc></rtc><rt>c</rt></ruby>d</div> diff --git a/testing/web-platform/tests/css/css-ruby/improperly-contained-annotation-001.html b/testing/web-platform/tests/css/css-ruby/improperly-contained-annotation-001.html new file mode 100644 index 0000000000..3790ba0bd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/improperly-contained-annotation-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Ruby Test: Improperly-contained ruby annotation</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#ruby-display"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#box-fixup"> + <link rel="match" href="reference/improperly-contained-annotation-001-ref.html"> + + <meta content="This test checks that an improperly-contained ruby annotation is wrapped in an anonymous ruby container."> + + <style> + ruby + { + background-color: lightblue; + font-size: 40px; + } + + rbc + { + display: ruby-base-container; + } + </style> + + <ruby><rbc>B<rt>A</rt></rbc></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/inheritance.html b/testing/web-platform/tests/css/css-ruby/inheritance.html new file mode 100644 index 0000000000..0128ea1ee8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/inheritance.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Ruby Layout properties</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#property-index"> +<meta name="assert" content="Properties inherit according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_inherited('ruby-align', 'space-around', 'center'); +assert_inherited('ruby-position', 'alternate', 'under'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/intra-base-white-space-001.html b/testing/web-platform/tests/css/css-ruby/intra-base-white-space-001.html new file mode 100644 index 0000000000..86468376c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/intra-base-white-space-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Ruby Test: intra-base white space (complex)</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#white-space"> + <link rel="match" href="reference/intra-base-white-space-001-ref.html"> + + <meta content="" name="flags"> + <meta content="This test checks that a single intra-base white space must be used when doing unit box pairing as long as it does not begin a ruby base container box or it does not end a ruby base container box. In this test, a leading white space inside of a ruby base unit box (the 'c' one) and a trailing white space inside of a ruby base unit box (the 'd' one) are collapsible white spaces across adjacent ruby base boxes according to white space processing rules."> + + <style> + ruby + { + background-color: lightblue; + font-size: 60px; + } + </style> + + <ruby> + + b<rb> </rb><rb> c</rb><rb>d </rb><rb> </rb><rb>e</rb> + + <rt>a</rt><rt></rt><rt>a</rt><rt>a</rt><rt></rt><rt>a</rt> + + </ruby> + + <!-- + + |[ a ]|[ ]|[ a ]| [ a ] |[]|[ a ]| + |[ b ]|[ws]|[ c ]|[ d ][ws]|[]|[ e ]| + + --> diff --git a/testing/web-platform/tests/css/css-ruby/line-break-around-ruby-001.html b/testing/web-platform/tests/css/css-ruby/line-break-around-ruby-001.html new file mode 100644 index 0000000000..c631f201e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/line-break-around-ruby-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Ruby Test: Test line breaking before and after <ruby> elements.</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<meta name="assert" content="est line breaking before and after <ruby> elements"> +<meta name="flags" content="dom"> +<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#container > div { + line-height:2; + margin-bottom:1em; +} +</style> +<div id="log"></div> +<div id="container"> + <div title="OP+ID" style="width:2em;">ใ๏ผใใ</div> + <div title="ID+CL" style="width:2em;">ใใ๏ผใ</div> + <div title="span+CL" style="width:2em;">ใ<span>ใ</span>๏ผใ</div> + <div title="OP+ruby" style="width:2em;">ใ๏ผ<ruby>ใน<rt>ใ</rt></ruby>ใ</div> + <div title="ruby+CL" style="width:2em;">ใ<ruby>ใน<rt>ใ</rt></ruby>๏ผใ</div> + <div title="OP+ruby+CL" style="width:3em;">ใ๏ผ<ruby>ใน<rt>ใ</rt></ruby>๏ผใ</div> +</div> +<script> +runTests(); +function runTests() { + var lineHeight = parseFloat(getComputedStyle(container.firstElementChild).lineHeight); + Array.prototype.forEach.call(container.children, function (element) { + test(function () { + var lineCount = element.offsetHeight / lineHeight; + assert_approx_equals(lineCount, 3, 0.1); + }, element.title); + }); +} +</script> diff --git a/testing/web-platform/tests/css/css-ruby/line-spacing.html b/testing/web-platform/tests/css/css-ruby/line-spacing.html new file mode 100644 index 0000000000..9d3c6f23e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/line-spacing.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-ruby/#line-height"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + font: 16px/1 Ahem; +} + +body > div { + border: 1px solid lime; +} + +.over_emp { + -webkit-text-emphasis: 'x'; + -webkit-text-emphasis-position: over left; + text-emphasis: 'x'; + text-emphasis-position: over left; +} + +.under_emp { + -webkit-text-emphasis: 'x'; + -webkit-text-emphasis-position: under left; + text-emphasis: 'x'; + text-emphasis-position: under left; +} +</style> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +function renderRuby(source) { + document.body.insertAdjacentHTML('afterbegin', source); + const firstChild = document.body.firstChild; + const container = firstChild.tagName == 'RUBY' ? null : firstChild; + const ruby = firstChild.tagName == 'RUBY' ? firstChild : firstChild.querySelector('ruby'); + return {container: container, ruby: ruby, rt: ruby.querySelector('rt')} +} + +function renderRubyAndGetBoxes(source) { + const {container, ruby, rt} = renderRuby(source); + return { + container: container ? container.getBoundingClientRect() : null, + ruby: ruby ? ruby.getBoundingClientRect() : null, + rt: rt ? rt.getBoundingClientRect() : null + }; +} + +test(() => { + const {container, ruby, rt} = renderRubyAndGetBoxes( + '<div><ruby>base<rt>annotation</rt></ruby></div>'); + assert_true(container.top <= rt.top); + assert_true(rt.top < ruby.top); +}, 'Over ruby doesn\'t overflow the block'); + +test(() => { + const {container, ruby, rt} = renderRubyAndGetBoxes( + '<div>before <span style="vertical-align:32px;">' + + '<ruby>base<rt>annotation</rt></ruby>' + + '</span> after</div>'); + assert_true(container.top <= rt.top); + assert_true(rt.top < ruby.top); +}, 'Over ruby + vertical-align doesn\'t overflow the block'); + +test(() => { + const {container, ruby, rt} = renderRubyAndGetBoxes( + '<div><ruby style="ruby-position:under">base<rt>annotation</rt></ruby></div>'); + assert_true(container.bottom >= rt.bottom); + assert_true(rt.bottom > ruby.bottom); +}, 'Under ruby doesn\'t overflow the block'); + +test(() => { + const {container, ruby, rt} = renderRubyAndGetBoxes( + '<div>before <ruby style="vertical-align:-32px; ruby-position:under">' + + 'base<rt>annotation</rt></ruby> after</div>'); + assert_true(container.bottom >= rt.bottom); + assert_true(rt.bottom > ruby.bottom); +}, 'Under ruby + vertical-align doesn\'t overflow the block'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div><ruby style="ruby-position:under">base<rt>annotation</rt></ruby>' + + '<div>n</div></div>'); + const nextBlockBox = container.querySelector('div').getBoundingClientRect(); + const rtBox = rt.getBoundingClientRect(); + assert_greater_than_equal(nextBlockBox.top, rtBox.bottom); +}, 'Under ruby doesn\'t overwrap with the next block'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div><span>before</span><br><ruby>base<rt style="font-size:16px"' + + '>annotation</rt></ruby></div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + assert_true(ruby.getBoundingClientRect().top - firstLine.bottom > 1); +}, 'Expand inter-lines spacing'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<span>Second line</span><br>' + + '<ruby>base<rt style="font-size:50%">' + + 'annotation</rt></ruby></div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const secondLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + assert_approx_equals(secondLine.top - firstLine.top, rubyLine.top - secondLine.top, 1); +}, 'Consume half-leading of the previous line'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<span class="under_emp">Second line</span><br>' + + '<ruby>base<rt style="font-size:50%">' + + 'annotation</rt></ruby></div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const secondLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + const RUBY_EMPHASIS_SIZE = 8; + assert_greater_than_equal(rubyLine.top - secondLine.top, + secondLine.top - firstLine.top + RUBY_EMPHASIS_SIZE); +}, 'Don\'t Consume half-leading of the previous line with text-emphasis'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<ruby style="ruby-position:under">base<rt style="font-size:50%">' + + 'annotation</rt></ruby><br>' + + '<span>Third line</span></div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + const thirdLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + assert_approx_equals(rubyLine.top - firstLine.top, thirdLine.top - rubyLine.top, 1); +}, 'Consume half-leading of the next line'); + +test(() => { + const {container, ruby, rt} = renderRuby( + '<div style="line-height:1.5;">' + + '<span>First line</span><br>' + + '<ruby style="ruby-position:under">base<rt style="font-size:50%">' + + 'annotation</rt></ruby><br>' + + '<span class="over_emp">Third line</span>' + + '</div>'); + const firstLine = container.querySelector('span').getBoundingClientRect(); + const rubyLine = ruby.getBoundingClientRect(); + const thirdLine = container.querySelectorAll('span')[1].getBoundingClientRect(); + const RUBY_EMPHASIS_SIZE = 8; + assert_greater_than_equal(thirdLine.top - rubyLine.top, + rubyLine.top - firstLine.top + RUBY_EMPHASIS_SIZE); +}, 'Don\'t Consume half-leading of the next line with text-emphasis'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001-ref.html b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001-ref.html new file mode 100644 index 0000000000..8c47023287 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001-ref.html @@ -0,0 +1,27 @@ +<!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; + } + ruby { + ruby-position: over; + } + </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/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001.html b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001.html new file mode 100644 index 0000000000..d502dbca9b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001.html @@ -0,0 +1,29 @@ +<!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; + } + ruby { + ruby-position: over; + } + </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/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-invalid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-invalid.html new file mode 100644 index 0000000000..fcb8511d9e --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Ruby Layout: parsing ruby-align with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<meta name="assert" content="ruby-align supports only the grammar 'start | center | space-between | space-around'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("ruby-align", "auto"); +test_invalid_value("ruby-align", "left"); +test_invalid_value("ruby-align", "10px"); + +test_invalid_value("ruby-align", "center start"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-valid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-valid.html new file mode 100644 index 0000000000..23093b2b23 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Ruby Layout: parsing ruby-align with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<meta name="assert" content="ruby-align supports the full grammar 'start | center | space-between | space-around'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("ruby-align", "start"); +test_valid_value("ruby-align", "center"); +test_valid_value("ruby-align", "space-between"); +test_valid_value("ruby-align", "space-around"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-invalid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-invalid.html new file mode 100644 index 0000000000..b618bcb5da --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Ruby Layout: parsing ruby-merge with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<meta name="assert" content="ruby-merge supports only the grammar 'separate | merge | auto'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("ruby-merge", "none"); +test_invalid_value("ruby-merge", "collapse"); +test_invalid_value("ruby-merge", "10px"); + +test_invalid_value("ruby-merge", "merge separate"); +test_invalid_value("ruby-merge", "merge auto"); +test_invalid_value("ruby-merge", "auto separate"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-valid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-valid.html new file mode 100644 index 0000000000..5694e87dff --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Ruby Layout: parsing ruby-merge with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<meta name="assert" content="ruby-merge supports the full grammar 'separate | merge | auto'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("ruby-align", "separate"); +test_valid_value("ruby-align", "merge"); +test_valid_value("ruby-align", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-invalid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-invalid.html new file mode 100644 index 0000000000..907c7deee3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Ruby Layout: parsing ruby-position with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position"> +<meta name="assert" content="ruby-position supports only the grammar 'over | under | inter-character'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("ruby-position", "auto"); +test_invalid_value("ruby-position", "center"); +test_invalid_value("ruby-position", "above"); +test_invalid_value("ruby-position", "10px 20px"); + +test_invalid_value("ruby-position", "over under"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-valid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-valid.html new file mode 100644 index 0000000000..2a21748613 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Ruby Layout: parsing ruby-position with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position"> +<meta name="assert" content="ruby-position supports the full grammar 'over | under | inter-character'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("ruby-position", "over"); +test_valid_value("ruby-position", "under"); +test_valid_value("ruby-position", "inter-character"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/rb-display-001.html b/testing/web-platform/tests/css/css-ruby/rb-display-001.html new file mode 100644 index 0000000000..5149eb34a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/rb-display-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Ruby Test: element with 'display: ruby-base' (basic)</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#ruby-display"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#base-annotation-pairing"> + <link rel="match" href="reference/rb-display-001-ref.html"> + + + <style> + ruby + { + background-color: lightblue; + font-size: 60px; + } + + span.rb + { + display: ruby-base; + } + </style> + + <ruby><span class="rb">bas</span><span class="rb">bas</span><rt>T</rt><rt>T</rt></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/rbc-rtc-basic-001.html b/testing/web-platform/tests/css/css-ruby/rbc-rtc-basic-001.html new file mode 100644 index 0000000000..758490a553 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/rbc-rtc-basic-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> + + <html lang="ja"> + + <meta charset="UTF-8"> + + <title>CSS Ruby Test: rbc and rtc elements (basic)</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="match" href="reference/rbc-rtc-basic-001-ref.html"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#box-fixup"> + + + <style> + body + { + font-size: 60px; + } + + ruby + { + background: lightblue; + } + + span#rbc + { + display: ruby-base-container; + } + + rtc + { + display: ruby-text-container; + } + </style> + + <ruby><span id="rbc"><rb>ใใ</rb></span><rt>ใน<rt>ใ</ruby> + + <ruby>ใงใ<rtc>ใใ</ruby> + + <ruby><rb>็ง<rb>ใซ<rtc>่ชฐ</ruby> + + </html> diff --git a/testing/web-platform/tests/css/css-ruby/reference/improperly-contained-annotation-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/improperly-contained-annotation-001-ref.html new file mode 100644 index 0000000000..72a55541bc --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/reference/improperly-contained-annotation-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference File</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + ruby + { + background-color: lightblue; + font-size: 40px; + } + </style> + + <ruby><rbc>B<ruby>​<rt>A</rt></ruby></rbc></ruby> + + <!-- + + ​ or ​ is the entity reference for zero-wide space. + + MathML uses the entity name ​ for this character. + + --> diff --git a/testing/web-platform/tests/css/css-ruby/reference/intra-base-white-space-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/intra-base-white-space-001-ref.html new file mode 100644 index 0000000000..4615b53ea7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/reference/intra-base-white-space-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference File</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + ruby + { + background-color: lightblue; + font-size: 60px; + } + </style> + + <ruby> + + <rb>b</rb><rt>a</rt><rb> </rb><rt></rt><rb>c</rb><rt>a</rt><rb>d </rb><rt>a</rt><rb>e</rb><rt>a</rt> + + </ruby> + + <!-- + + |[ a ]|[ ]|[ a ]| [ a ] |[ a ]| + |[ b ]|[ws]|[ c ]|[ d ][ws]|[ e ]| + + --> diff --git a/testing/web-platform/tests/css/css-ruby/reference/rb-display-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/rb-display-001-ref.html new file mode 100644 index 0000000000..f8ed4022bc --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/reference/rb-display-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference File</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + ruby + { + background-color: lightblue; + font-size: 60px; + } + </style> + + <ruby>bas<rt>T</rt>bas<rt>T</rt></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/reference/rbc-rtc-basic-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/rbc-rtc-basic-001-ref.html new file mode 100644 index 0000000000..2860c848b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/reference/rbc-rtc-basic-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <html lang="ja"> + + <meta charset="UTF-8"> + + <title>CSS Reference File</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + body + { + font-size: 60px; + } + + ruby + { + background: lightblue; + } + </style> + + <ruby>ใใ<rt>ใน</rt> <rt>ใ</rt></ruby> + + <ruby>ใง<rt>ใ</rt>ใ<rt>ใ</rt></ruby> + + <ruby>็งใซ<rt>่ชฐ</rt></ruby> + + </html> diff --git a/testing/web-platform/tests/css/css-ruby/reference/ruby-annotation-pairing-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/ruby-annotation-pairing-001-ref.html new file mode 100644 index 0000000000..2a8f9a836f --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/reference/ruby-annotation-pairing-001-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference File</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="stylesheet" href="/fonts/ahem.css"> + + <style> + div + { + font-family: Ahem; + font-size: 60px; + line-height: 1; + } + + div.annotation + { + font-size: 30px; + margin-top: 60px; + text-indent: 15px; + } + </style> + + <div class="annotation">A</div> + + <div>W Z</div> + + <div class="annotation">A</div> + + <div>W Z</div> + + <div class="annotation">A</div> + + <div>W Z</div> diff --git a/testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml b/testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml new file mode 100644 index 0000000000..51ac507c3b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja" xmlns="http://www.w3.org/1999/xhtml"> +<meta charset="utf-8"/> +<title>CSS Ruby Test: :root element with 'display:block ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/> +<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/> +<link rel="match" href="root-ruby-ref.xhtml"/> +<style> +:root { display: block ruby; } +rbc { + display: ruby-base-container; +} +rtc { + display: ruby-text-container; +} +</style> +ใน +<rtc> + <rt>ใ</rt> +</rtc> +<rbc> + <rb>A</rb> + <rb>B</rb> +</rbc> + +<pre></pre> +<script> +let ruby = Array.prototype.slice.call(document.querySelectorAll(':root')); +let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, ""); +document.querySelector('pre').appendChild(document.createTextNode(result)); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml b/testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml new file mode 100644 index 0000000000..9edd7e3601 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja" xmlns="http://www.w3.org/1999/xhtml"> +<meta charset="utf-8"/> +<title>Reference: :root element with 'display:ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/> +<style> +rbc { + display: ruby-base-container; +} +rtc { + display: ruby-text-container; +} +</style> +<ruby>ใน +<rtc> + <rt>ใ</rt> +</rtc> +<rbc> + <rb>A</rb> + <rb>B</rb> +</rbc> + +<pre>block ruby, </pre> +</ruby></html> diff --git a/testing/web-platform/tests/css/css-ruby/root-ruby.xhtml b/testing/web-platform/tests/css/css-ruby/root-ruby.xhtml new file mode 100644 index 0000000000..4b78690dd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/root-ruby.xhtml @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ + --> +<html lang="ja" xmlns="http://www.w3.org/1999/xhtml"> +<meta charset="utf-8"/> +<title>CSS Ruby Test: :root element with 'display:ruby'.</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/> +<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/> +<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/> +<link rel="match" href="root-ruby-ref.xhtml"/> +<style> +:root { display: ruby; } +rbc { + display: ruby-base-container; +} +rtc { + display: ruby-text-container; +} +</style> +ใน +<rtc> + <rt>ใ</rt> +</rtc> +<rbc> + <rb>A</rb> + <rb>B</rb> +</rbc> + +<pre></pre> +<script> +let ruby = Array.prototype.slice.call(document.querySelectorAll(':root')); +let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, ""); +document.querySelector('pre').appendChild(document.createTextNode(result)); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/rt-display-001.html b/testing/web-platform/tests/css/css-ruby/rt-display-001.html new file mode 100644 index 0000000000..a83ce243b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/rt-display-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Ruby Test: element with 'display: ruby-text' (basic)</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#ruby-display"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#base-annotation-pairing"> + <link rel="match" href="reference/rb-display-001-ref.html"> + + + <style> + ruby + { + background-color: lightblue; + font-size: 60px; + } + + span.rt + { + display: ruby-text; + font-size: 50%; + } + </style> + + <ruby><rb>bas</rb><rb>bas</rb><span class="rt">T</span><span class="rt">T</span></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-001.xht b/testing/web-platform/tests/css/css-ruby/ruby-001.xht new file mode 100644 index 0000000000..80f49f0dbc --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-001.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Ruby: Ping Test</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ruby/001.html"/> + <link rel="help" href="http://www.w3.org/TR/css3-ruby/"/> + <style type="text/css"> + p { color: navy; } + .a ruby { display: ruby-base; display: inline; display: ruby-base; } + .a rbc { display: ruby-base-container; display: inline; display: ruby-base-container; } + .a rb { display: ruby-base; display: inline; display: ruby-base; } + .a rtc.before { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: before; } + .a rtc.after { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: after; } + .a rt { display: ruby-text; display: inline; display: ruby-text; ruby-span: 3; } + .b ruby { display: inline; } + .b rbc { display: inline; } + .b rb { display: inline; } + .b rtc { display: inline; } + .b rt { display: inline; } + </style> + </head> + <body> + <p>There should be exactly four lines of text below.</p> + <p> + <ruby class="a"> + <rbc> + <rb> 2. This is </rb> + <rb> the second </rb> + <rb> line. </rb> + </rbc> + <rtc class="before"> + <rt> 1. This is </rt> + <rt> the first </rt> + <rt> line. </rt> + </rtc> + <rtc class="after"> + <rt> 3. This is the third line. </rt> + </rtc> + </ruby> + </p> + <p> + <ruby class="b"> + <rbc> + <rb> 4. This </rb> + <rb> is </rb> + <rb> the </rb> + </rbc> + <rtc class="before"> + <rt> fourth </rt> + <rt> and </rt> + <rt> final </rt> + </rtc> + <rtc class="after"> + <rt> line. </rt> + </rtc> + </ruby> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-align-001-ref.html new file mode 100644 index 0000000000..eb368b3ae6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-align-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + div { width: 160px; box-sizing: border-box; } +</style> +<body style="font: 16px/3 Ahem"> +<div>X X X</div> +<div style="text-align: center">X X X</div> +<div style="text-align-last: justify">X X X</div> +<!-- 8px = (width: 160px - 5 * font-size: 16px) / + (1 + justification opportunities: 4) / 2 --> +<div style="text-align-last: justify; padding: 0 8px">X X X</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-001.html b/testing/web-platform/tests/css/css-ruby/ruby-align-001.html new file mode 100644 index 0000000000..13c96f53f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-align-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<link rel="match" href="ruby-align-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby { line-height: 0; } + rt > div { width: 160px; } +</style> +<body style="font: 16px/3 Ahem"> +<ruby style="ruby-align: start"> + <rb>X X X<rt><div></div></rt> +</ruby><br> +<ruby style="ruby-align: center"> + <rb>X X X<rt><div></div></rt> +</ruby><br> +<ruby style="ruby-align: space-between"> + <rb>X X X<rt><div></div></rt> +</ruby><br> +<ruby style="ruby-align: space-around"> + <rb>X X X<rt><div></div></rt> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-001a.html b/testing/web-platform/tests/css/css-ruby/ruby-align-001a.html new file mode 100644 index 0000000000..6e652f1726 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-align-001a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<link rel="match" href="ruby-align-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby { line-height: 0; } + rt > div { width: 160px; } +</style> +<body style="font: 16px/3 Ahem"> +<ruby> + <rb style="ruby-align: start">X X X<rt><div></div></rt> +</ruby><br> +<ruby> + <rb style="ruby-align: center">X X X<rt><div></div></rt> +</ruby><br> +<ruby> + <rb style="ruby-align: space-between">X X X<rt><div></div></rt> +</ruby><br> +<ruby> + <rb style="ruby-align: space-around">X X X<rt><div></div></rt> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-align-002-ref.html new file mode 100644 index 0000000000..e4dd3c8bbe --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-align-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby { line-height: 0; } + rt { font-size: 100%; } + rb { font-size: 0; } + rt > div { width: 160px; box-sizing: border-box; } +</style> +<body style="font: 16px/3 Ahem"> +<ruby> + <rb></rb><rt><div>X X X</div></rt> +</ruby><br> +<ruby> + <rb></rb><rt><div style="text-align: center">X X X</div></rt> +</ruby><br> +<ruby> + <rb></rb><rt><div style="text-align-last: justify">X X X</div></rt> +</ruby><br> +<!-- 8px = (width: 160px - 5 * font-size: 16px) / + (1 + justification opportunities: 4) / 2 --> +<ruby> + <rb></rb><rt><div style="text-align-last: justify; padding: 0 8px">X X X</div></rt> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-002.html b/testing/web-platform/tests/css/css-ruby/ruby-align-002.html new file mode 100644 index 0000000000..ec40be5e10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-align-002.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<link rel="match" href="ruby-align-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby { line-height: 0; } + rt { font-size: 100%; } + rb { font-size: 0; } + rb > div { width: 160px; } +</style> +<body style="font: 16px/3 Ahem"> +<ruby style="ruby-align: start"> + <rb><div></div><rt>X X X</rt> +</ruby><br> +<ruby style="ruby-align: center"> + <rb><div></div><rt>X X X</rt> +</ruby><br> +<ruby style="ruby-align: space-between"> + <rb><div></div><rt>X X X</rt> +</ruby><br> +<ruby style="ruby-align: space-around"> + <rb><div></div><rt>X X X</rt> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-002a.html b/testing/web-platform/tests/css/css-ruby/ruby-align-002a.html new file mode 100644 index 0000000000..dfb7ae37ed --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-align-002a.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Tests for ruby-align</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property"> +<link rel="match" href="ruby-align-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby { line-height: 0; } + rt { font-size: 100%; } + rb { font-size: 0; } + rb > div { width: 160px; } +</style> +<body style="font: 16px/3 Ahem"> +<ruby> + <rb><div></div><rt style="ruby-align: start">X X X</rt> +</ruby><br> +<ruby> + <rb><div></div><rt style="ruby-align: center">X X X</rt> +</ruby><br> +<ruby> + <rb><div></div><rt style="ruby-align: space-between">X X X</rt> +</ruby><br> +<ruby> + <rb><div></div><rt style="ruby-align: space-around">X X X</rt> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-annotation-pairing-001.html b/testing/web-platform/tests/css/css-ruby/ruby-annotation-pairing-001.html new file mode 100644 index 0000000000..453ba96ebd --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-annotation-pairing-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Ruby Test: single ruby annotation pairing</title> + + <link rel="author" title="Gรฉrard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#base-annotation-pairing"> + <link rel="match" href="reference/ruby-annotation-pairing-001-ref.html"> + <link rel="stylesheet" href="/fonts/ahem.css"> + + <meta content="" name="flags"> + <meta content="This test checks that a single ruby annotation must be paired with the corresponding first ruby base of its segment."> + + <!-- + Chromium 90.0.4430.212 and Chromium 93.0.4559.0 fail this test. + --> + + <style> + div, p + { + font-family: Ahem; + font-size: 60px; + line-height: 1; + } + + div#annotation + { + font-size: 30px; + text-indent: 15px; + } + </style> + + <p><ruby><rb>W</rb> <rb>Z</rb> <rt>A</rt></ruby></p> + + <div id="annotation" title="reference">A</div> + + <div id="base" title="reference">W Z</div> + + <p><ruby><rb>W</rb> <span>Z</span> <rt>A</rt></ruby></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-001-ref.html new file mode 100644 index 0000000000..43945ce1b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/testing/web-platform/tests/css/css-ruby/ruby-autohide-001.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-001.html new file mode 100644 index 0000000000..61bc6706ba --- /dev/null +++ b/testing/web-platform/tests/css/css-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/testing/web-platform/tests/css/css-ruby/ruby-autohide-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-002-ref.html new file mode 100644 index 0000000000..afa0f3cd24 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/testing/web-platform/tests/css/css-ruby/ruby-autohide-002.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-002.html new file mode 100644 index 0000000000..3d5131cdd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/testing/web-platform/tests/css/css-ruby/ruby-autohide-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-003-ref.html new file mode 100644 index 0000000000..468b17d4ed --- /dev/null +++ b/testing/web-platform/tests/css/css-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/testing/web-platform/tests/css/css-ruby/ruby-autohide-003.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-003.html new file mode 100644 index 0000000000..2279e7540e --- /dev/null +++ b/testing/web-platform/tests/css/css-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/testing/web-platform/tests/css/css-ruby/ruby-autohide-004.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-004.html new file mode 100644 index 0000000000..4499cf3e16 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/testing/web-platform/tests/css/css-ruby/ruby-base-container-abs.html b/testing/web-platform/tests/css/css-ruby/ruby-base-container-abs.html new file mode 100644 index 0000000000..35baeda23e --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-base-container-abs.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Ruby Test: ruby base container with abs. pos. child</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="empty-ruby-base-container-ref.html"> +<style> +a { position: absolute; } +</style> +<div style="font-size: 64px; line-height: 3">a<ruby><a> </a><rt>b</rt></ruby>c</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-base-container-float.html b/testing/web-platform/tests/css/css-ruby/ruby-base-container-float.html new file mode 100644 index 0000000000..18ef9bb4ba --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-base-container-float.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Ruby Test: ruby base container with floating child</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="empty-ruby-base-container-ref.html"> +<style> +a { float: right; } +</style> +<div style="font-size: 64px; line-height: 3">a<ruby><a> </a><rt>b</rt></ruby>c</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-base-different-size-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size-ref.html new file mode 100644 index 0000000000..70f47eaa8b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>CSS Ruby Reference</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + font: 16px/1 Ahem; + padding: 32px 0; +} +p { + margin: 0; + border: 5px solid blue; +} +ruby { + ruby-align: center; + font-size: 32px; +} +rt { + font-size: 8px; +} +.b { + font-size: 16px; +} +</style> +<p><ruby><rb>X<rb class="b">X<rt>x<rt>x</ruby></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-base-different-size.html b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size.html new file mode 100644 index 0000000000..f71b5644c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>CSS Ruby Test: sizing and positioning of ruby containers when size of ruby bases and the base container differ</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="match" href="ruby-base-different-size-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + font: 16px/1 Ahem; + padding: 32px 0; +} +p { + margin: 0; + border: 5px solid blue; +} +ruby { + ruby-align: center; +} +.a { + font-size: 32px; +} +</style> +<p><ruby><rb class="a">X<rb>X<rt>x<rt>x</ruby></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001-ref.html new file mode 100644 index 0000000000..c714921d32 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Position of ruby annotation in RTL text</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> + body { color: transparent; } + rb { background: green; } + rtc { background: red; } + rt { background: cyan; } +</style> +<body style="text-align: right"> + <ruby><rb>base<rtc><rt>text</ruby> +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-001.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001.html new file mode 100644 index 0000000000..ba18071150 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Position of ruby annotation in RTL text</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi"> +<link rel="match" href="ruby-bidi-001-ref.html"> +<style> + body { color: transparent; } + rb { background: green; } + rtc { background: red; } + rt { background: cyan; } +</style> +<body dir="rtl"> + <ruby><rb>base<rtc><rt>text</ruby> +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002-ref.html new file mode 100644 index 0000000000..874284de99 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Bidi reordering of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> rb { margin: 0 5px; } </style> +<p> + <ruby> + <rb>base1</rb><rb>base2</rb> + <rt>text1</rt><rt>text2</rt> + <rb>base4</rb><rb>base3</rb> + <rt>text4</rt><rt>text3</rt> + </ruby> + <ruby> + <rb>base7</rb><rb>base8</rb> + <rt>text7</rt><rt>text8</rt> + <rb>base6</rb><rb>base5</rb> + <rt>text6</rt><rt>text5</rt> + </ruby> +</p> +<p style="text-align: right"> + <ruby> + <rb>base5</rb><rb>base6</rb> + <rt>text5</rt><rt>text6</rt> + <rb>base8</rb><rb>base7</rb> + <rt>text8</rt><rt>text7</rt> + </ruby> + <ruby> + <rb>base3</rb><rb>base4</rb> + <rt>text3</rt><rt>text4</rt> + <rb>base2</rb><rb>base1</rb> + <rt>text2</rt><rt>text1</rt> + </ruby> +</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-002.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002.html new file mode 100644 index 0000000000..d6692a333a --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Bidi reordering of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi"> +<link rel="match" href="ruby-bidi-002-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> rb { margin: 0 5px; } </style> +<p> + <ruby> + <rb>base1</rb><rb>base2</rb> + <rtc dir="rtl"> + <rt>text1</rt><rt>text2</rt> + </rtc> + <rbc dir="rtl"> + <rb>base3</rb><rb>base4</rb> + </rbc> + <rt>text3</rt><rt>text4</rt> + </ruby> + <ruby dir="rtl"> + <rb>base5</rb><rb>base6</rb> + <rt>text5</rt><rt>text6</rt> + <rbc dir="ltr"> + <rb>base7</rb><rb>base8</rb> + </rbc> + <rt>text7</rt><rt>text8</rt> + </ruby> +</p> +<p dir="rtl"> + <ruby> + <rb>base1</rb><rb>base2</rb> + <rtc dir="ltr"> + <rt>text1</rt><rt>text2</rt> + </rtc> + <rbc dir="ltr"> + <rb>base3</rb><rb>base4</rb> + </rbc> + <rt>text3</rt><rt>text4</rt> + </ruby> + <ruby dir="ltr"> + <rb>base5</rb><rb>base6</rb> + <rt>text5</rt><rt>text6</rt> + <rbc dir="rtl"> + <rb>base7</rb><rb>base8</rb> + </rbc> + <rt>text7</rt><rt>text8</rt> + </ruby> +</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003-ref.html new file mode 100644 index 0000000000..ec00293d86 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Bidirectional text inside ruby content box</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<body dir="rtl" style="font-size: 64px"> +<ruby><div>ืื12ื</div><rt><div>ืabืื</div></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-003.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003.html new file mode 100644 index 0000000000..2510408ec2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Bidirectional text inside ruby content box</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi"> +<link rel="match" href="ruby-bidi-003-ref.html"> +<body dir="rtl" style="font-size: 64px"> +<ruby>ืื12ื<rt>ืabืื</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004-ref.html new file mode 100644 index 0000000000..58ebff482c --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Ruby reference</title> +<style> +div { font-size: 50px; } +rb, rt, span { unicode-bidi: isolate; } +</style> +<p>All three examples should look the same:</p> + +<div> + <p> + <ruby dir=rtl>۱ ۲ ۳<rt>1 2 3</rt></ruby> + </p> + + <p> + <ruby dir=rtl>۱ ۲ ۳<rt>1 2 3</rt></ruby> + </p> + + <p> + <ruby dir=rtl>۱ ۲ ۳<rt>1 2 3</rt></ruby> + </p> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-004.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004.html new file mode 100644 index 0000000000..9cfe65059d --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Ruby test: dir=rtl on rb and rt elements</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi"> +<link rel="match" href="ruby-bidi-004-ref.html"> +<style> +div { font-size: 50px; } +rb, rt, span { unicode-bidi: isolate; } +</style> +<p>All three examples should look the same:</p> + +<div> + <p> + <ruby dir=rtl>۱ ۲ ۳<rt>1 2 3</rt></ruby> + </p> + + <p> + <ruby><span dir=rtl>۱ ۲ ۳</span><rt dir=rtl>1 2 3</rt></ruby> + </p> + + <p> + <ruby><rb dir=rtl>۱ ۲ ۳</rb><rt dir=rtl>1 2 3</rt></ruby> + </p> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001-ref.html new file mode 100644 index 0000000000..8d836fe23c --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<body class="large"> + + <p>|<ruby><rbc><rb>a</rb><rb><span> </span></rb><rb>b</rb></rbc + ><rtc pseudo><rt>c</rt><rt pseudo><span> </span></rt><rt>d</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>e</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>g</rb></rbc><rtc><rt>h</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>i</rb><rb><span> <span>j</span> + </span></rb></rbc><rtc pseudo><rt>k</rt></rtc><rbc><rb><span> <span>l</span> + </span></rb></rbc><rbc><rb>m</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>n</rb></rbc + ><rtc><rt>o</rt></rtc><rtc><rt>p</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>q</rb></rbc><rtc pseudo><rt>r</rt></rtc + ><rtc><rt>s</rt></rtc><rtc pseudo><rt>t</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>u</rb></rbc><rbc><rb><span> <span>v</span> + <span>w</span> </span></rb></rbc><rtc><rt>x</rt></rtc><rbc><rb><span> + <span>y</span> </span></rb><rb>z</rb></rbc></ruby>|</p> + + <p>|<span> </span><ruby><rbc><rb>a</rb><rb><span> </span></rb><rb>b</rb></rbc + ><rtc pseudo><rt>c</rt><rt pseudo><span> </span></rt><rt>d</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>e</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>g</rb></rbc><rtc><rt>h</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>i</rb></rbc></ruby><span> <span>j</span> + </span><ruby><rbc></rbc><rtc pseudo><rt>k</rt></rtc></ruby><span> <span>l</span> + </span><ruby><rbc><rb>m</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>n</rb></rbc + ><rtc><rt>o</rt></rtc><rtc><rt>p</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>q</rb></rbc><rtc pseudo><rt>r</rt></rtc + ><rtc><rt>s</rt></rtc><rtc pseudo><rt>t</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>u</rb></rbc></ruby><span> <span>v</span> + <span>w</span> </span><ruby><rbc></rbc><rtc><rt>x</rt></rtc></ruby><span> + <span>y</span> </span><ruby><rbc><rb>z</rb></rbc></ruby><span> </span>|</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001.html new file mode 100644 index 0000000000..ac58d4d43a --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="stylesheet" href="support/ruby-common.css"> +<link rel="match" href="ruby-box-generation-001-ref.html"> +<body class="large"> + + <!-- + The tests are written in this way: + there are five different elements may appear in a ruby container: rb, rt, + rbc, rtc, and inline content. + + In each test file, there are two parts: all elements are wrapped inside a + <ruby> in one part, they are directly contained by a <p> in the other part. + + In each part, all permutations of pairs of two adjacent elements are + presented, so there are 5*5+1=26 elements. + + The five test files share the same structure, but with different element + type order. + --> + + <p>|<ruby> + <rb>a</rb> <rb>b</rb> + <rt>c</rt> <rt>d</rt> + <rb>e</rb> <rbc><rb>f</rb></rbc> + <rb>g</rb> <rtc><rt>h</rt></rtc> + <rb>i</rb> <span>j</span> + <rt>k</rt> <span>l</span> + <rbc><rb>m</rb></rbc> <rbc><rb>n</rb></rbc> + <rtc><rt>o</rt></rtc> <rtc><rt>p</rt></rtc> + <rbc><rb>q</rb></rbc> <rt>r</rt> + <rtc><rt>s</rt></rtc> <rt>t</rt> + <rbc><rb>u</rb></rbc> <span>v</span> + <span>w</span> <rtc><rt>x</rt></rtc> + <span>y</span> <rb>z</rb> + </ruby>|</p> + + <p>| <rb>a</rb> <rb>b</rb> + <rt>c</rt> <rt>d</rt> + <rb>e</rb> <rbc><rb>f</rb></rbc> + <rb>g</rb> <rtc><rt>h</rt></rtc> + <rb>i</rb> <span>j</span> + <rt>k</rt> <span>l</span> + <rbc><rb>m</rb></rbc> <rbc><rb>n</rb></rbc> + <rtc><rt>o</rt></rtc> <rtc><rt>p</rt></rtc> + <rbc><rb>q</rb></rbc> <rt>r</rt> + <rtc><rt>s</rt></rtc> <rt>t</rt> + <rbc><rb>u</rb></rbc> <span>v</span> + <span>w</span> <rtc><rt>x</rt></rtc> + <span>y</span> <rb>z</rb> |</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002-ref.html new file mode 100644 index 0000000000..730ab787d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<body class="large"> + + <p>|<ruby><rbc></rbc + ><rtc pseudo><rt>a</rt><rt pseudo><span> </span></rt><rt>b</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>c</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>d</rb></rbc + ><rtc pseudo><rt>e</rt></rtc><rtc><rt>f</rt></rtc + ><rtc pseudo><rt>g</rt></rtc><rbc><rb><span> h + </span></rb></rbc><rtc pseudo><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>j</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>k</rb></rbc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>l</rb></rbc + ><rtc><rt>m</rt></rtc><rtc><rt>n</rt></rtc><rbc><rb><span> + o p + </span></rb></rbc><rtc><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>r</rb></rbc><rbc><rb><span> + s </span></rb></rbc><rbc><rb>t</rb></rbc + ><rtc><rt>u</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb><rb><span> + </span></rb><rb>w</rb><rb><span> x + </span></rb><rb>y</rb></rbc><rtc pseudo><rt>z</rt></rtc></ruby>|</p> + + <p>|<span> </span><ruby><rbc></rbc + ><rtc pseudo><rt>a</rt><rt pseudo><span> </span></rt><rt>b</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>c</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>d</rb></rbc + ><rtc pseudo><rt>e</rt></rtc><rtc><rt>f</rt></rtc + ><rtc pseudo><rt>g</rt></rtc></ruby><span> h + </span><ruby><rbc></rbc><rtc pseudo><rt>i</rt></rtc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>j</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>k</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>l</rb></rbc + ><rtc><rt>m</rt></rtc><rtc><rt>n</rt></rtc></ruby><span> + o p + </span><ruby><rbc></rbc><rtc><rt>q</rt></rtc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>r</rb></rbc></ruby><span> + s </span><ruby><rbc><rb>t</rb></rbc + ><rtc><rt>u</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb><rb><span> + </span></rb><rb>w</rb></rbc></ruby><span> x + </span><ruby><rbc><rb>y</rb></rbc><rtc pseudo><rt>z</rt></rtc></ruby><span> </span>|</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002.html new file mode 100644 index 0000000000..e09ecf1eb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="stylesheet" href="support/ruby-common.css"> +<link rel="match" href="ruby-box-generation-002-ref.html"> +<body class="large"> + + <!-- + The tests are written in this way: + there are five different elements may appear in a ruby container: rb, rt, + rbc, rtc, and inline content. + + In each test file, there are two parts: all elements are wrapped inside a + <ruby> in one part, they are directly contained by a <p> in the other part. + + In each part, all permutations of pairs of two adjacent elements are + presented, so there are 5*5+1=26 elements. + + The five test files share the same structure, but with different element + type order. + --> + + <p>|<ruby> + <rt>a</rt> <rt>b</rt> + <rbc><rb>c</rb></rbc> <rbc><rb>d</rb></rbc> + <rt>e</rt> <rtc><rt>f</rt></rtc> + <rt>g</rt> <span>h</span> + <rt>i</rt> <rb>j</rb> + <rbc><rb>k</rb></rbc> <rb>l</rb> + <rtc><rt>m</rt></rtc> <rtc><rt>n</rt></rtc> + <span>o</span> <span>p</span> + <rtc><rt>q</rt></rtc> <rbc><rb>r</rb></rbc> + <span>s</span> <rbc><rb>t</rb></rbc> + <rtc><rt>u</rt></rtc> <rb>v</rb> + <rb>w</rb> <span>x</span> + <rb>y</rb> <rt>z</rt> + </ruby>|</p> + + <p>| <rt>a</rt> <rt>b</rt> + <rbc><rb>c</rb></rbc> <rbc><rb>d</rb></rbc> + <rt>e</rt> <rtc><rt>f</rt></rtc> + <rt>g</rt> <span>h</span> + <rt>i</rt> <rb>j</rb> + <rbc><rb>k</rb></rbc> <rb>l</rb> + <rtc><rt>m</rt></rtc> <rtc><rt>n</rt></rtc> + <span>o</span> <span>p</span> + <rtc><rt>q</rt></rtc> <rbc><rb>r</rb></rbc> + <span>s</span> <rbc><rb>t</rb></rbc> + <rtc><rt>u</rt></rtc> <rb>v</rb> + <rb>w</rb> <span>x</span> + <rb>y</rb> <rt>z</rt> |</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003-ref.html new file mode 100644 index 0000000000..e4c92a498b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<body class="large"> + + <p>|<ruby><rbc><rb>a</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>b</rb></rbc + ><rtc><rt>c</rt></rtc><rtc><rt>d</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>e</rb></rbc><rbc><rb><span> <span>f</span> + </span></rb></rbc><rbc><rb>g</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>i</rb></rbc><rtc pseudo><rt>j</rt></rtc + ><rtc><rt>k</rt></rtc><rtc pseudo><rt>l</rt></rtc><rbc><rb><span> + <span>m</span> <span>n</span> + </span></rb><rb>o</rb><rb><span> </span></rb><rb>p</rb><rb><span> + <span>q</span> </span></rb></rbc><rtc><rt>r</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>s</rb></rbc><rtc><rt>t</rt></rtc><rbc><rb><span> + <span>u</span> </span></rb></rbc><rtc pseudo><rt>v</rt><rt pseudo><span> + </span></rt><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc + ><rtc pseudo><rt>y</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>z</rb></rbc + ></ruby>|</p> + + <p>|<span> </span><ruby><rbc><rb>a</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>b</rb></rbc + ><rtc><rt>c</rt></rtc><rtc><rt>d</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>e</rb></rbc></ruby><span> <span>f</span> + </span><ruby><rbc><rb>g</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>i</rb></rbc><rtc pseudo><rt>j</rt></rtc + ><rtc><rt>k</rt></rtc><rtc pseudo><rt>l</rt></rtc></ruby><span> + <span>m</span> <span>n</span> + </span><ruby><rbc><rb>o</rb><rb><span> </span></rb><rb>p</rb></rbc></ruby><span> + <span>q</span> </span><ruby><rbc></rbc><rtc><rt>r</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>s</rb></rbc><rtc><rt>t</rt></rtc></ruby><span> + <span>u</span> </span><ruby><rbc></rbc><rtc pseudo><rt>v</rt><rt pseudo><span> + </span><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc + ><rtc pseudo><rt>y</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>z</rb></rbc></ruby + ><span> </span>|</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003.html new file mode 100644 index 0000000000..6b975afdfb --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="stylesheet" href="support/ruby-common.css"> +<link rel="match" href="ruby-box-generation-003-ref.html"> +<body class="large"> + + <!-- + The tests are written in this way: + there are five different elements may appear in a ruby container: rb, rt, + rbc, rtc, and inline content. + + In each test file, there are two parts: all elements are wrapped inside a + <ruby> in one part, they are directly contained by a <p> in the other part. + + In each part, all permutations of pairs of two adjacent elements are + presented, so there are 5*5+1=26 elements. + + The five test files share the same structure, but with different element + type order. + --> + + <p>|<ruby> + <rbc><rb>a</rb></rbc> <rbc><rb>b</rb></rbc> + <rtc><rt>c</rt></rtc> <rtc><rt>d</rt></rtc> + <rbc><rb>e</rb></rbc> <span>f</span> + <rbc><rb>g</rb></rbc> <rb>h</rb> + <rbc><rb>i</rb></rbc> <rt>j</rt> + <rtc><rt>k</rt></rtc> <rt>l</rt> + <span>m</span> <span>n</span> + <rb>o</rb> <rb>p</rb> + <span>q</span> <rtc><rt>r</rt></rtc> + <rb>s</rb> <rtc><rt>t</rt></rtc> + <span>u</span> <rt>v</rt> + <rt>w</rt> <rb>x</rb> + <rt>y</rt> <rbc><rb>z</rb></rbc> + </ruby>|</p> + + <p>| <rbc><rb>a</rb></rbc> <rbc><rb>b</rb></rbc> + <rtc><rt>c</rt></rtc> <rtc><rt>d</rt></rtc> + <rbc><rb>e</rb></rbc> <span>f</span> + <rbc><rb>g</rb></rbc> <rb>h</rb> + <rbc><rb>i</rb></rbc> <rt>j</rt> + <rtc><rt>k</rt></rtc> <rt>l</rt> + <span>m</span> <span>n</span> + <rb>o</rb> <rb>p</rb> + <span>q</span> <rtc><rt>r</rt></rtc> + <rb>s</rb> <rtc><rt>t</rt></rtc> + <span>u</span> <rt>v</rt> + <rt>w</rt> <rb>x</rb> + <rt>y</rt> <rbc><rb>z</rb></rbc> |</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004-ref.html new file mode 100644 index 0000000000..7a27622cac --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<body class="large"> + + <p>|<ruby><rbc></rbc + ><rtc><rt>a</rt></rtc><rtc><rt>b</rt></rtc><rbc><rb><span> + <span>c</span> <span>d</span> + </span></rb></rbc><rtc><rt>e</rt></rtc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc + ><rtc><rt>g</rt></rtc><rtc pseudo><rt>h</rt></rtc + ><rtc><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>j</rb></rbc><rbc><rb><span> + <span>k</span> </span></rb></rbc><rbc><rb>l</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>m</rb><rb><span> </span></rb><rb>n</rb></rbc + ><rtc pseudo><rt>o</rt><rt pseudo><span> </span></rt><rt>p</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>q</rb><rb><span> <span>r</span> + </span></rb></rbc><rtc pseudo><rt>s</rt></rtc><rbc><rb><span> <span>t</span> + </span></rb></rbc><rbc><rb>u</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>w</rb></rbc><rtc pseudo><rt>x</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>y</rb></rbc><rtc><rt>z</rt></rtc + ></ruby>|</p> + + <p>|<span> </span><ruby><rbc></rbc + ><rtc><rt>a</rt></rtc><rtc><rt>b</rt></rtc></ruby><span> + <span>c</span> <span>d</span> + </span><ruby><rbc></rbc><rtc><rt>e</rt></rtc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc + ><rtc><rt>g</rt></rtc><rtc pseudo><rt>h</rt></rtc + ><rtc><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>j</rb></rbc></ruby><span> + <span>k</span> </span><ruby><rbc><rb>l</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>m</rb><rb><span> </span></rb><rb>n</rb></rbc + ><rtc pseudo><rt>o</rt><rt pseudo><span> </span></rt><rt>p</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>q</rb></rbc></ruby><span> <span>r</span> + </span><ruby><rbc></rbc><rtc pseudo><rt>s</rt></rtc></ruby><span> <span>t</span> + </span><ruby><rbc><rb>u</rb></rbc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>v</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>w</rb></rbc><rtc pseudo><rt>x</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>y</rb></rbc><rtc><rt>z</rt></rtc></ruby + ><span> </span>|</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004.html new file mode 100644 index 0000000000..0f6ed72d71 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="stylesheet" href="support/ruby-common.css"> +<link rel="match" href="ruby-box-generation-004-ref.html"> +<body class="large"> + + <!-- + The tests are written in this way: + there are five different elements may appear in a ruby container: rb, rt, + rbc, rtc, and inline content. + + In each test file, there are two parts: all elements are wrapped inside a + <ruby> in one part, they are directly contained by a <p> in the other part. + + In each part, all permutations of pairs of two adjacent elements are + presented, so there are 5*5+1=26 elements. + + The five test files share the same structure, but with different element + type order. + --> + + <p>|<ruby> + <rtc><rt>a</rt></rtc> <rtc><rt>b</rt></rtc> + <span>c</span> <span>d</span> + <rtc><rt>e</rt></rtc> <rb>f</rb> + <rtc><rt>g</rt></rtc> <rt>h</rt> + <rtc><rt>i</rt></rtc> <rbc><rb>j</rb></rbc> + <span>k</span> <rbc><rb>l</rb></rbc> + <rb>m</rb> <rb>n</rb> + <rt>o</rt> <rt>p</rt> + <rb>q</rb> <span>r</span> + <rt>s</rt> <span>t</span> + <rb>u</rb> <rbc><rb>v</rb></rbc> + <rbc><rb>w</rb></rbc> <rt>x</rt> + <rbc><rb>y</rb></rbc> <rtc><rt>z</rt></rtc> + </ruby>|</p> + + <p>| <rtc><rt>a</rt></rtc> <rtc><rt>b</rt></rtc> + <span>c</span> <span>d</span> + <rtc><rt>e</rt></rtc> <rb>f</rb> + <rtc><rt>g</rt></rtc> <rt>h</rt> + <rtc><rt>i</rt></rtc> <rbc><rb>j</rb></rbc> + <span>k</span> <rbc><rb>l</rb></rbc> + <rb>m</rb> <rb>n</rb> + <rt>o</rt> <rt>p</rt> + <rb>q</rb> <span>r</span> + <rt>s</rt> <span>t</span> + <rb>u</rb> <rbc><rb>v</rb></rbc> + <rbc><rb>w</rb></rbc> <rt>x</rt> + <rbc><rb>y</rb></rbc> <rtc><rt>z</rt></rtc> |</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005-ref.html new file mode 100644 index 0000000000..55ba7b2c73 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<body class="large"> + + <p>|<ruby><rbc><rb><span><span>a</span> <span>b</span> + </span></rb><rb>c</rb><rb><span> </span></rb><rb>d</rb><rb><span> + <span>e</span> </span></rb></rbc><rtc pseudo><rt>f</rt></rtc><rbc><rb><span> + <span>g</span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span> + <span>i</span> </span></rb></rbc><rtc><rt>j</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>k</rb></rbc><rtc><rt>l</rt></rtc + ><rtc pseudo><rt>m</rt><rt pseudo><span> </span></rt><rt>n</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>o</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>p</rb></rbc + ><rtc pseudo><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>r</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>s</rb></rbc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>t</rb></rbc + ><rtc pseudo><rt>u</rt></rtc><rtc><rt>v</rt></rtc + ><rtc><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc + ><rtc><rt>y</rt></rtc><rbc><rb><span> <span>z</span></span></rb></rbc + ></ruby>|</p> + + <p>|<span> <span>a</span> <span>b</span> + </span><ruby + ><rbc><rb>c</rb><rb><span> </span></rb><rb>d</rb></rbc></ruby><span> + <span>e</span> </span><ruby><rbc></rbc><rtc pseudo><rt>f</rt></rtc></ruby><span> + <span>g</span> </span><ruby><rbc><rb>h</rb></rbc></ruby><span> + <span>i</span> </span><ruby><rbc></rbc><rtc><rt>j</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>k</rb></rbc><rtc><rt>l</rt></rtc + ><rtc pseudo><rt>m</rt><rt pseudo><span> </span></rt><rt>n</rt></rtc><rbc><rb><span> + </span></rb></rbc><rbc><rb>o</rb></rbc + ><rbc><rb><span> </span></rb></rbc><rbc><rb>p</rb></rbc + ><rtc pseudo><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>r</rb></rbc><rbc><rb><span> + </span></rb></rbc><rbc><rb>s</rb></rbc><rbc><rb><span> </span></rb></rbc + ><rbc><rb>t</rb></rbc + ><rtc pseudo><rt>u</rt></rtc><rtc><rt>v</rt></rtc + ><rtc><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc + ><rtc><rt>y</rt></rtc></ruby><span> <span>z</span> </span>|</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005.html new file mode 100644 index 0000000000..c86b697bf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for pseudo ruby box generation</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="stylesheet" href="support/ruby-common.css"> +<link rel="match" href="ruby-box-generation-005-ref.html"> +<body class="large"> + + <p>|<ruby> + <span>a</span> <span>b</span> + <rb>c</rb> <rb>d</rb> + <span>e</span> <rt>f</rt> + <span>g</span> <rbc><rb>h</rb></rbc> + <span>i</span> <rtc><rt>j</rt></rtc> + <rb>k</rb> <rtc><rt>l</rt></rtc> + <rt>m</rt> <rt>n</rt> + <rbc><rb>o</rb></rbc> <rbc><rb>p</rb></rbc> + <rt>q</rt> <rb>r</rb> + <rbc><rb>s</rb></rbc> <rb>t</rb> + <rt>u</rt> <rtc><rt>v</rt></rtc> + <rtc><rt>w</rt></rtc> <rbc><rb>x</rb></rbc> + <rtc><rt>y</rt></rtc> <span>z</span> + </ruby>|</p> + + <p>| <span>a</span> <span>b</span> + <rb>c</rb> <rb>d</rb> + <span>e</span> <rt>f</rt> + <span>g</span> <rbc><rb>h</rb></rbc> + <span>i</span> <rtc><rt>j</rt></rtc> + <rb>k</rb> <rtc><rt>l</rt></rtc> + <rt>m</rt> <rt>n</rt> + <rbc><rb>o</rb></rbc> <rbc><rb>p</rb></rbc> + <rt>q</rt> <rb>r</rb> + <rbc><rb>s</rb></rbc> <rb>t</rb> + <rt>u</rt> <rtc><rt>v</rt></rtc> + <rtc><rt>w</rt></rtc> <rbc><rb>x</rb></rbc> + <rtc><rt>y</rt></rtc> <span>z</span> |</p> + +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-model-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001-ref.html new file mode 100644 index 0000000000..8ddca2fc5b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001-ref.html @@ -0,0 +1,81 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS test reference</title> + +<style> +.r { display: ruby; } +.rbc { display: ruby-base-container; } +.rb { display: ruby-base; } +.rtc { display: ruby-text-container; } +.rt { display: ruby-text; } + +.r { font: 50px/1 monospace; } + +.rb { background: pink; } +.rt { background: orange; } +</style> + +<p>Test passes if, in each of the base/annotations pairs below, there is no gap between the pink box of the base and the orange box of the annotation.</p> + +<span class=r> + <span class="rbc pv"> + <span class=rb>b1</span> + </span> + <span class="rtc pv"> + <span class=rt>a1</span> + </span> +</span> + +<span class=r> + <span class="rbc ph"> + <span class=rb>b2</span> + </span> + <span class="rtc ph"> + <span class=rt>a2</span> + </span> +</span> + +<span class=r> + <span class="rbc bv"> + <span class=rb>b3</span> + </span> + <span class="rtc bv"> + <span class=rt>a3</span> + </span> +</span> + +<span class=r> + <span class="rbc bh"> + <span class=rb>b4</span> + </span> + <span class="rtc bh"> + <span class=rt>a4</span> + </span> +</span> + +<span class=r> + <span class="rbc mv"> + <span class=rb>b5</span> + </span> + <span class="rtc mv"> + <span class=rt>a5</span> + </span> +</span> + +<span class=r> + <span class="rbc mh"> + <span class=rb>b6</span> + </span> + <span class="rtc mh"> + <span class=rt>a6</span> + </span> +</span> + +<span class=r> + <span class="rbc ph pv mh mv bh bv"> + <span class=rb>b7</span> + </span> + <span class="rtc ph pv mh mv bh bv"> + <span class=rt>a7</span> + </span> +</span> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-model-001.html b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001.html new file mode 100644 index 0000000000..1fa2befaf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001.html @@ -0,0 +1,94 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Ruby test: no m/b/p/ effect on base/annotation containers</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-style"> +<link rel="match" href="ruby-box-model-001-ref.html"> +<meta name=assert content="the content box of base (resp annotation) container boxes should be tightly rapping around their content, and stacked up without gap. Margins/Borders/Padding on the base (resp annotation) container boxes do not apply."> + +<style> +.r { display: ruby; } +.rbc { display: ruby-base-container; } +.rb { display: ruby-base; } +.rtc { display: ruby-text-container; } +.rt { display: ruby-text; } + +.pv { padding-top: 100px; padding-bottom: 100px; } +.ph { padding-left: 100px; padding-right: 100px; } +.bv, .bh { border-style: solid; border-color: transparent; } +.bv { border-top-width: 100px; border-bottom-width: 100px; } +.bh { border-left-width: 100px; border-right-width: 100px; } +.mv { margin-top: 100px; margin-bottom: 100px; } +.mh { margin-left: 100px; margin-right: 100px; } + +.r { font: 50px/1 monospace; } + +.rb { background: pink; } +.rt { background: orange; } +</style> + +<p>Test passes if, in each of the base/annotations pairs below, there is no gap between the pink box of the base and the orange box of the annotation.</p> + +<span class=r> + <span class="rbc pv"> + <span class=rb>b1</span> + </span> + <span class="rtc pv"> + <span class=rt>a1</span> + </span> +</span> + +<span class=r> + <span class="rbc ph"> + <span class=rb>b2</span> + </span> + <span class="rtc ph"> + <span class=rt>a2</span> + </span> +</span> + +<span class=r> + <span class="rbc bv"> + <span class=rb>b3</span> + </span> + <span class="rtc bv"> + <span class=rt>a3</span> + </span> +</span> + +<span class=r> + <span class="rbc bh"> + <span class=rb>b4</span> + </span> + <span class="rtc bh"> + <span class=rt>a4</span> + </span> +</span> + +<span class=r> + <span class="rbc mv"> + <span class=rb>b5</span> + </span> + <span class="rtc mv"> + <span class=rt>a5</span> + </span> +</span> + +<span class=r> + <span class="rbc mh"> + <span class=rb>b6</span> + </span> + <span class="rtc mh"> + <span class=rt>a6</span> + </span> +</span> + +<span class=r> + <span class="rbc ph pv mh mv bh bv"> + <span class=rb>b7</span> + </span> + <span class="rtc ph pv mh mv bh bv"> + <span class=rt>a7</span> + </span> +</span> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001-ref.html new file mode 100644 index 0000000000..0a09924c65 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> + +<p>One space should exist between 'a' and 'b':</p> + +<p>a<rbc><rb></rb> <rb></rb></rbc>b</p> +<p>a<ruby><rb></rb> <rb></rb></ruby>b</p> +<p>a<ruby><rbc></rbc> <rbc></rbc></ruby>b</p> +<p>a<rtc><rt></rt> <rt></rt></rtc>b</p> +<p>a<ruby><rt></rt> <rt></rt></ruby>b</p> + +<p>a<rbc><rb></rb> <rb></rb></rbc>b</p> +<p>a<ruby><rb></rb> <rb></rb></ruby>b</p> +<p>a<ruby><rbc></rbc> <rbc></rbc></ruby>b</p> +<p>a<rtc><rt></rt> <rt></rt></rtc>b</p> +<p>a<ruby><rt></rt> <rt></rt></ruby>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001.html new file mode 100644 index 0000000000..be1c5ce500 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-insertion-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-insertion.js"></script> +<p>One space should exist between 'a' and 'b':</p> + +<!-- leading white space --> +<!-- => inter-base white space --> +<p>a<rbc data-insert="start" data-tag="rb"> <rb></rb></rbc>b</p> +<p>a<ruby data-insert="start" data-tag="rb"> <rb></rb></ruby>b</p> +<!-- => inter-segment white space --> +<p>a<ruby data-insert="start" data-tag="rbc"> <rbc></rbc></ruby>b</p> +<!-- => inter-annotation white space --> +<p>a<rtc data-insert="start" data-tag="rt"> <rt></rt></rtc>b</p> +<p>a<ruby data-insert="start" data-tag="rt"> <rt></rt></ruby>b</p> + +<!-- trailing white space --> +<!-- => inter-base white space --> +<p>a<rbc data-insert="end" data-tag="rb"><rb></rb> </rbc>b</p> +<p>a<ruby data-insert="end" data-tag="rb"><rb></rb> </ruby>b</p> +<!-- => inter-segment white space --> +<p>a<ruby data-insert="end" data-tag="rbc"><rbc></rbc> </ruby>b</p> +<!-- => inter-annotation white space --> +<p>a<rtc data-insert="end" data-tag="rt"><rt></rt> </rtc>b</p> +<p>a<ruby data-insert="end" data-tag="rt"><rt></rt> </ruby>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002-ref.html new file mode 100644 index 0000000000..cd85db944e --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> + +<p>One space should exist between 'a' and 'b':</p> + +<p>a<rb></rb><span></span> <rt></rt>b</p> +<p>a<rb></rb> <span></span><rt></rt>b</p> +<p>a<rb></rb> <rb></rb><rt></rt>b</p> +<p>a<rt></rt><rb></rb> <rb></rb>b</p> +<p>a<rbc></rbc> <rbc></rbc><rt></rt>b</p> +<p>a<rb></rb><rt></rt> <rt></rt>b</p> +<p>a<rt></rt> <rt></rt><rb></rb>b</p> + +<p>a<rb></rb> <rb></rb>b</p> +<p>a<rbc></rbc> <rbc></rbc>b</p> +<p>a<rt></rt> <rt></rt>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002.html new file mode 100644 index 0000000000..c2a12a0419 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-insertion-002-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-insertion.js"></script> +<p>One space should exist between 'a' and 'b':</p> + +<!-- inter-level white space --> +<!-- => normal white space --> +<p>a<rb data-insert="after" data-tag="span"></rb> <rt></rt>b</p> +<p>a<rb></rb> <rt data-insert="before" data-tag="span"></rt>b</p> +<!-- => inter-base white space --> +<p>a<rb></rb> <rt data-insert="before" data-tag="rb"></rt>b</p> +<p>a<rt data-insert="after" data-tag="rb"></rt> <rb></rb>b</p> +<!-- => inter-segment white space --> +<p>a<rbc></rbc> <rt data-insert="before" data-tag="rbc"></rt>b</p> +<!-- => inter-annotation white space --> +<p>a<rb data-insert="after" data-tag="rt"></rb> <rt></rt>b</p> +<p>a<rt></rt> <rb data-insert="before" data-tag="rt"></rb>b</p> + +<!-- insert white space --> +<!-- inter-base white space --> +<p>a<rb data-insert="after" data-text=" "></rb><rb></rb>b</p> +<!-- inter-segment white space --> +<p>a<rbc data-insert="after" data-text=" "></rbc><rbc></rbc>b</p> +<!-- inter-annotation white space --> +<p>a<rt data-insert="after" data-text=" "></rt><rt></rt>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003-ref.html new file mode 100644 index 0000000000..ef71525479 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p>No space should exist between 'a' and 'b':</p> + +<p><span>a</span><rb></rb> <rt></rt>b</p> +<p>a<rb></rb> <rt></rt><span>b</span></p> +<p>a<rb></rb> <rt></rt><rb></rb>b</p> +<p>a<rbc></rbc> <rt></rt><rb></rb>b</p> +<p>a<rt></rt><rb></rb> <rt></rt>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003.html new file mode 100644 index 0000000000..68984b5568 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-insertion-003-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-insertion.js"></script> +<p>No space should exist between 'a' and 'b':</p> + +<!-- inter-level white space --> +<!-- <= normal white space --> +<p><span data-insert="after" data-tag="rb">a</span> <rt></rt>b</p> +<p>a<rb></rb> <span data-insert="before" data-tag="rt">b</span></p> +<!-- <= inter-base white space --> +<p>a<rb></rb> <rb data-insert="before" data-tag="rt"></rb>b</p> +<!-- <= inter-segment white space --> +<p>a<rbc></rbc> <rb data-insert="before" data-tag="rt"></rb>b</p> +<!-- <= inter-annotation white space --> +<p>a<rt data-insert="after" data-tag="rb"></rt> <rt></rt>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004-ref.html new file mode 100644 index 0000000000..9c8120ee3f --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p>No space should exist between 'a' and 'b':</p> + +<p>a<ruby> <rb></rb></ruby>b</p> +<p>a<rbc> <rb></rb></rbc>b</p> +<p>a<rtc> <rt></rt></rtc>b</p> +<p>a<ruby><rb></rb> </ruby>b</p> +<p>a<rbc><rb></rb> </rbc>b</p> +<p>a<rtc><rt></rt> </rtc>b</p> +<p>a<rb></rb> <rt></rt>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004.html new file mode 100644 index 0000000000..9b3c36e3ac --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-insertion-004-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-insertion.js"></script> +<p>No space should exist between 'a' and 'b':</p> + +<!-- insert white space --> +<!-- leading white space --> +<p>a<ruby data-insert="start" data-text=" "><rb></rb></ruby>b</p> +<p>a<rbc data-insert="start" data-text=" "><rb></rb></rbc>b</p> +<p>a<rtc data-insert="start" data-text=" "><rt></rt></rtc>b</p> +<!-- trailing white space --> +<p>a<ruby data-insert="end" data-text=" "><rb></rb></ruby>b</p> +<p>a<rbc data-insert="end" data-text=" "><rb></rb></rbc>b</p> +<p>a<rtc data-insert="end" data-text=" "><rt></rt></rtc>b</p> +<!-- inter-level white space --> +<p>a<rb data-insert="after" data-text=" "></rb><rt></rt>b</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html new file mode 100644 index 0000000000..03e5cabe55 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p> + +<p><rb></rb><span></span><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> +<p><rb></rb><rt></rt><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> +<p><rb>a</rb><rt>x</rt><rb>b</rb><rt>y</rt></p> +<p><rbc><span>a</span><rb></rb>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p> +<p><rb>a</rb><rb></rb><rb>b</rb><rtc><span>x</span><rt></rt>y</rtc></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html new file mode 100644 index 0000000000..a684d665c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic insertion of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-insertion-005-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-insertion.js"></script> +<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p> + +<!-- split --> +<!-- pseudo ruby --> +<p><rb data-insert="after" data-tag="span"></rb><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> +<!-- pseudo ruby base container --> +<p><rb data-insert="after" data-tag="rt"></rb><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> +<!-- pseudo ruby text container --> +<p><rb>a</rb><rt data-insert="after" data-tag="rb" data-text="b">x</rt><rt>y</rt></p> +<!-- pseudo ruby base --> +<p><rbc><span data-insert="after" data-tag="rb">a</span>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p> +<!-- pseudo ruby text --> +<p><rb>a</rb><rb></rb><rb>b</rb><rtc><span data-insert="after" data-tag="rt">x</span>y</rtc></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001-ref.html new file mode 100644 index 0000000000..23beda2898 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic removal of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p>No space should exist between 'a' and 'b':</p> + +<p>a<ruby> <rb></rb></ruby>b</p> +<p>a<ruby><rb></rb> </ruby>b</p> +<p>a<ruby><rb></rb> <rt></rt></ruby>b</p> + +<p>a<ruby> <rbc></rbc></ruby>b</p> +<p>a<ruby><rbc></rbc> </ruby>b</p> +<p>a<rbc></rbc> <rtc></rtc>b</p> + +<p><rb>a</rb><rb>b</rb><rtc> <rt>x</rt></rtc></p> +<p><rb>a</rb><rb>b</rb><rtc><rt>x</rt> </rtc></p> +<p><rb>a</rb><rb>b</rb> <rt>x</rt></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001.html new file mode 100644 index 0000000000..090ea43c79 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic removal of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-removal-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-removal.js"></script> +<p>No space should exist between 'a' and 'b':</p> + +<!-- inter-base white space --> +<!-- => leading white space --> +<p>a<ruby><rb class="remove"></rb> <rb></rb></ruby>b</p> +<!-- => trailing white space --> +<p>a<ruby><rb></rb> <rb class="remove"></rb></ruby>b</p> +<!-- => inter-level white space --> +<p>a<ruby><rb></rb> <rb class="remove"></rb><rt></rt></ruby>b</p> + +<!-- inter-segment white space --> +<!-- => leading white space --> +<p>a<ruby><rbc class="remove"></rbc> <rbc></rbc></ruby>b</p> +<!-- => trailing white space --> +<p>a<ruby><rbc></rbc> <rbc class="remove"></rbc></ruby>b</p> +<!-- => inter-level white space --> +<p>a<rbc></rbc> <rbc class="remove"></rbc><rtc></rtc>b</p> + +<!-- inter-annotation white space --> +<!-- => leading white space --> +<p><rb>a</rb><rb>b</rb><rtc><rt class="remove"></rt> <rt>x</rt></rtc></p> +<!-- => trailing white space --> +<p><rb>a</rb><rb>b</rb><rtc><rt>x</rt> <rt class="remove"></rt></rtc></p> +<!-- => inter-level white space --> +<p><rb>a</rb><rb>b</rb><rt class="remove"></rt> <rt>x</rt></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002-ref.html new file mode 100644 index 0000000000..f9d2fd7240 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic removal of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p>One space should exist between 'a' and 'b':</p> + +<p>a <rt></rt>b</p> +<p>a<rb></rb> b</p> +<p>a<rb></rb> <rb></rb>b</p> +<p>a<rbc></rbc> <rbc></rbc>b</p> +<p><rb>a</rb> <rb>b</rb><rt>x</rt> <rt>y</rt></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002.html new file mode 100644 index 0000000000..76846e547b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic removal of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-removal-002-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-removal.js"></script> +<p>One space should exist between 'a' and 'b':</p> + +<!-- inter-level white space --> +<!-- => normal white space --> +<p>a<rb class="remove"></rb> <rt></rt>b</p> +<p>a<rb></rb> <rt class="remove"></rt>b</p> +<!-- => inter-base white space --> +<p>a<rb></rb> <rt class="remove"></rt><rb></rb>b</p> +<!-- => inter-segment white space --> +<p>a<rbc></rbc> <rtc class="remove"></rtc><rbc></rbc>b</p> +<!-- => inter-annotation white space --> +<p><rb>a</rb> <rb>b</rb><rt>x</rt><rb class="remove"></rb> <rt>y</rt></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html new file mode 100644 index 0000000000..0067c014f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic removal of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p> + + +<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> +<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> +<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> + +<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> +<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p> + +<p>'ab' should be paried with 'xy':</p> + +<p><rbc>ab</rbc><rt>xy</rt></p> +<p><rb>ab</rb><rtc style="letter-spacing: 1px">xy</rtc></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html new file mode 100644 index 0000000000..d35b2b968d --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for dynamic removal of ruby frames</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-dynamic-removal-003-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<script src="support/ruby-dynamic-removal.js"></script> +<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p> + +<!-- merge --> +<!-- pseudo ruby --> +<p><rb>a</rb><span class="remove"></span><rb>b</rb><rt>x</rt><rt>y</rt></p> +<!-- pseudo ruby base container --> +<p><rb>a</rb><rt class="remove"></rt><rb>b</rb><rt>x</rt><rt>y</rt></p> +<!-- pseudo ruby text container --> +<p><rb>a</rb><rb>b</rb><rt>x</rt><rb class="remove"></rb><rt>y</rt></p> + +<!-- white space removal --> +<!-- inter-base white space --> +<p><rb class="remove-after">a</rb> <rb>b</rb><rt>x</rt><rt>y</rt></p> +<!-- inter-annotation white space --> +<p><rb>a</rb><rb>b</rb><rt class="remove-after">x</rt> <rt>y</rt></p> + +<p>'ab' should be paried with 'xy':</p> + +<!-- merge --> +<!-- pseudo ruby base --> +<p><rbc>a<rb class="remove"></rb>b</rbc><rt>xy</rt></p> +<!-- pseudo ruby text --> +<!-- letter-spacing is added here to avoid fuzzy on Windows. See bug 1111891 --> +<p><rb>ab</rb><rtc style="letter-spacing: 1px">x<rt class="remove"></rt>y</rtc></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001-ref.html new file mode 100644 index 0000000000..245a366172 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for float handling in ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby div { + width: 10px; height: 10px; + background-color: grey; + margin: 2px; + } + .left { float: left; } + .right { float: right; } +</style> +<div><ruby><rb><div class="left"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div> +<div><ruby><rb><div class="left"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div> +<div><ruby><rb><div class="right"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div> +<div><ruby><rb><div class="right"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001.html b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001.html new file mode 100644 index 0000000000..5cb56e88ac --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for float handling in ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context"> +<link rel="match" href="ruby-float-handling-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + ruby div { + width: 10px; height: 10px; + background-color: grey; + margin: 2px; + } + .left { float: left; } + .right { float: right; } +</style> +<div><ruby><rb>HELLO WORLD</rb><rt><div class="left"></div>hello world</rt></ruby></div> +<div><ruby><rb>HELLO WORLD</rb><rt>hello<div class="left"></div> world</rt></ruby></div> +<div><ruby><rb>HELLO WORLD</rb><rt><div class="right"></div>hello world</rt></ruby></div> +<div><ruby><rb>HELLO WORLD</rb><rt>hello<div class="right"></div> world</rt></ruby></div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001-ref.html new file mode 100644 index 0000000000..770f264682 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001.html new file mode 100644 index 0000000000..93569e549b --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002-ref.html new file mode 100644 index 0000000000..41533ee76b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002-ref.html @@ -0,0 +1,42 @@ +<!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> + body { + /* Use a sans-serif font to avoid fuzzy pixels where e.g. the + letter "a" bottom-right serif might overlap the table border: */ + font: 16px sans-serif; + } + .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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002.html new file mode 100644 index 0000000000..4616d50146 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002.html @@ -0,0 +1,44 @@ +<!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> + body { + /* Use a sans-serif font to avoid fuzzy pixels where e.g. the + letter "a" bottom-right serif might overlap the table border: */ + font: 16px sans-serif; + } + .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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003-ref.html new file mode 100644 index 0000000000..c8041eb5c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003.html new file mode 100644 index 0000000000..4d1a85f9d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004-ref.html new file mode 100644 index 0000000000..e1042d14c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004.html new file mode 100644 index 0000000000..7d34371219 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005-ref.html new file mode 100644 index 0000000000..4b2d66e2e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005.html new file mode 100644 index 0000000000..595c704ab2 --- /dev/null +++ b/testing/web-platform/tests/css/css-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/ruby-common.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/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001-ref.html new file mode 100644 index 0000000000..1d9fbb344f --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Intra-level whitespace pairing</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p><ruby> + <rb>a</rb><rb pseudo><span> </span></rb><rb>b</rb> + <rt>x</rt><rt pseudo><span> </span></rt><rt>y</rt> +</ruby></p> +<p><ruby> + <rb>a</rb><rb pseudo><span> </span></rb><rb>b</rb> + <rt>x</rt><rt></rt><rt>y</rt> +</ruby></p> +<p><ruby> + <rb>a</rb><rb pseudo></rb><rb>b</rb> + <rt>x</rt><rt pseudo><span> </span></rt><rt>y</rt> +</ruby></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001.html new file mode 100644 index 0000000000..4fceda1fb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Intra-level whitespace pairing</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing"> +<link rel="match" href="ruby-intra-level-whitespace-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<p><ruby> + <rb>a</rb> <rb>b</rb> + <rt>x</rt> <rt>y</rt> +</ruby></p> +<p><ruby> + <rb>a</rb> <rb>b</rb> + <rt>x</rt><rt>y</rt> +</ruby></p> +<p><ruby> + <rb>a</rb><rb>b</rb> + <rt>x</rt> <rt>y</rt> +</ruby></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002-ref.html new file mode 100644 index 0000000000..c5949dbeb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Intra-level whitespace pairing</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + body { font-family: monospace; } + .container { border: 1px solid blue; margin: 20px; } +</style> +<style id="style"></style> +<span id="ref1">12345</span> <span id="ref2">12345 67890</span> +<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt><rt>54321</rt></ruby></div> +<div class="container"><ruby><rb>12345</rb><rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div> +<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div> +<script type="text/javascript"> + var ref2 = document.getElementById('ref2'); + var style = document.getElementById('style'); + var width2 = ref2.getBoundingClientRect().width + 'px'; + // This is the same as the script in the corresponding + // testcase, except that here we skip the intermediate + // size and jump straight to the final size. + style.textContent = '.container { width: ' + width2 + '; }'; +</script> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002.html new file mode 100644 index 0000000000..67aab53bfb --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Intra-level whitespace pairing</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing"> +<link rel="match" href="ruby-intra-level-whitespace-002-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + body { font-family: monospace; } + .container { border: 1px solid blue; margin: 20px; } +</style> +<style id="style"></style> +<span id="ref1">12345</span> <span id="ref2">12345 67890</span> +<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt><rt>54321</rt></ruby></div> +<div class="container"><ruby><rb>12345</rb><rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div> +<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div> +<script type="text/javascript"> + var ref1 = document.getElementById('ref1'); + var ref2 = document.getElementById('ref2'); + var style = document.getElementById('style'); + var width1 = ref1.getBoundingClientRect().width + 'px'; + var width2 = ref2.getBoundingClientRect().width + 'px'; + // It changes the width of the containers to test incremental + // layout with intra-level whitespace columns being pushed and + // pulled up across a line-break. + style.textContent = '.container { width: ' + width1 + '; }'; + document.body.offsetHeight; // force reflow + style.textContent = '.container { width: ' + width2 + '; }'; + document.body.offsetHeight; // force reflow +</script> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003-ref.html new file mode 100644 index 0000000000..d1df82371c --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Intra-level whitespace pairing</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +|<ruby> + <rbc><rb>before</rb><rb>base</rb><rb> </rb></rbc> + <rtc><rt> </rt><rt>text</rt><rt>after</rt></rtc> +</ruby>| diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003.html new file mode 100644 index 0000000000..716f2e3f0b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Intra-level whitespace pairing</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing"> +<link rel="match" href="ruby-intra-level-whitespace-003-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + rbc::before { + display: ruby-base; + content: "before"; + } + rbc::after { + display: ruby-base; + content: " "; + } + rtc::before { + display: ruby-text; + content: " "; + } + rtc::after { + display: ruby-text; + content: "after"; + } +</style> +<!-- This test ensures that we don't treat all-whitespace + ::before/::after content as intra-level whitespace --> +|<ruby> + <rbc><rb>base</rb></rbc> + <rtc><rt>text</rt></rtc> +</ruby>| diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001-ref.html new file mode 100644 index 0000000000..9d2889f811 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Intrinsic ISize calculation of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> + div { + display: inline-block; + border: 1px solid black; + font-kerning: none; /* disable kerning, because in the reference file + it might occur across <span> boundaries */ + } + span { + white-space: nowrap; + } +</style> +<div style="width: min-content"> + <span>ABC</span><span>DEF</span> +</div> +<div style="width: max-content"> + <span>ABC</span><span>DEF</span> +</div> +<br> + +<div style="width: min-content"> + XYZ<span>ABC</span><span>DEF</span>XYZ +</div> +<div style="width: max-content"> + XYZ<span>ABC</span><span>DEF</span>XYZ +</div> +<br> + +<div style="width: min-content"> + <span>ใใ</span><span>ใใ</span> +</div> +<div style="width: max-content"> + <span>ใใ</span><span>ใใ</span> +</div> +<br> + +<div style="width: min-content"> + ใ<span>ใใ</span><span>ใใ</span>ใ +</div> +<div style="width: max-content"> + ใ<span>ใใ</span><span>ใใ</span>ใ +</div> +<br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001.html new file mode 100644 index 0000000000..84f48e2fc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Intrinsic ISize calculation of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#line-breaks"> +<link rel="match" href="ruby-intrinsic-isize-001-ref.html"> +<style> + div { + display: inline-block; + border: 1px solid black; + font-kerning: none; /* disable kerning, because in the reference file + it might occur across <span> boundaries */ + } +</style> +<div style="width: min-content"> + <ruby><rb>ABC<rb>DEF</ruby> +</div> +<div style="width: max-content"> + <ruby><rb>ABC<rb>DEF</ruby> +</div> +<br> + +<div style="width: min-content"> + XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ +</div> +<div style="width: max-content"> + XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ +</div> +<br> + +<div style="width: min-content"> + <ruby><rb>ใใ<rb>ใใ</ruby> +</div> +<div style="width: max-content"> + <ruby><rb>ใใ<rb>ใใ</ruby> +</div> +<br> + +<div style="width: min-content"> + ใ<ruby><rb>ใใ<rb>ใใ</ruby>ใ +</div> +<div style="width: max-content"> + ใ<ruby><rb>ใใ<rb>ใใ</ruby>ใ +</div> +<br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002-ref.html new file mode 100644 index 0000000000..d71de26a25 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Intrinsic ISize calculation of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> + div { + display: inline-block; + border: 1px solid black; + } +</style> +<p>No line break should happen in any block, and the content should just fit in the block.</p> + +<div> + ABC DEF +</div> +<div> + XYZ ABCDEF XYZ +</div> + +<div> + ใใ ใใ +</div> +<div> + ใ ใใใใ ใ +</div> +<br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002.html new file mode 100644 index 0000000000..741d41bec5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Intrinsic ISize calculation of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#line-breaks"> +<link rel="match" href="ruby-intrinsic-isize-002-ref.html"> +<style> + div { + display: inline-block; + border: 1px solid black; + } +</style> +<p>No line break should happen in any block, and the content should just fit in the block.</p> + +<div> + <ruby><rb>ABC</rb> <rb>DEF</rb></ruby> +</div> +<div> + XYZ <ruby><rb>ABC</rb><rb>DEF</rb></ruby> XYZ +</div> + +<div> + <ruby><rb>ใใ</rb> <rb>ใใ</rb></ruby> +</div> +<div> + ใ <ruby><rb>ใใ</rb><rb>ใใ</rb></ruby> ใ +</div> +<br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003-ref.html new file mode 100644 index 0000000000..01523b4a85 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="utf-8"> +<title>Intrinsic ISize calculation of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<style> + .ruby { + border-left: 5px solid blue; + border-right: 10px solid blue; + padding: 0 20px 0 10px; + margin: 0 10px 0 20px; + } + div { + display: inline-block; + border: 1px solid black; + font-kerning: none; /* disable kerning, because in the reference file + it might occur across <span> boundaries */ + } + .ruby > span { + white-space: nowrap; + } +</style> + +<div style="width: min-content"> + <span class="ruby"><span>ABC</span><span>DEF</span></span> +</div> +<div style="width: max-content"> + <span class="ruby"><span>ABC</span><span>DEF</span></span> +</div> +<br> + +<div style="width: min-content"> + XYZ<span class="ruby"><span>ABC</span><span>DEF</span></span>XYZ +</div> +<div style="width: max-content"> + XYZ<span class="ruby"><span>ABC</span><span>DEF</span></span>XYZ +</div> +<br> + +<div style="width: min-content"> + <span class="ruby"><span>ใใ</span><span>ใใ</span></span> +</div> +<div style="width: max-content"> + <span class="ruby"><span>ใใ</span><span>ใใ</span></span> +</div> +<br> + +<div style="width: min-content"> + ใ<span class="ruby"><span>ใใ</span><span>ใใ</span></span>ใ +</div> +<div style="width: max-content"> + ใ<span class="ruby"><span>ใใ</span><span>ใใ</span></span>ใ +</div> +<br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003.html new file mode 100644 index 0000000000..c67033f69a --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="utf-8"> +<title>Intrinsic ISize calculation of ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#line-breaks"> +<link rel="match" href="ruby-intrinsic-isize-003-ref.html"> +<style> + ruby { + border-left: 5px solid blue; + border-right: 10px solid blue; + padding: 0 20px 0 10px; + margin: 0 10px 0 20px; + } + div { + display: inline-block; + border: 1px solid black; + font-kerning: none; /* disable kerning, because in the reference file + it might occur across <span> boundaries */ + } +</style> + +<div style="width: min-content"> + <ruby><rb>ABC<rb>DEF</ruby> +</div> +<div style="width: max-content"> + <ruby><rb>ABC<rb>DEF</ruby> +</div> +<br> + +<div style="width: min-content"> + XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ +</div> +<div style="width: max-content"> + XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ +</div> +<br> + +<div style="width: min-content"> + <ruby><rb>ใใ<rb>ใใ</ruby> +</div> +<div style="width: max-content"> + <ruby><rb>ใใ<rb>ใใ</ruby> +</div> +<br> + +<div style="width: min-content"> + ใ<ruby><rb>ใใ<rb>ใใ</ruby>ใ +</div> +<div style="width: max-content"> + ใ<ruby><rb>ใใ<rb>ใใ</ruby>ใ +</div> +<br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-001-ref.html new file mode 100644 index 0000000000..eaec889713 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Justification with ruby span</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + body { line-height: 3; } +</style> +<div style="width: 200px; height: 100px; text-align-last: justify; overflow: auto;"><ruby> + <rb>a</rb><rb>b</rb> +</ruby></div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-001.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-001.html new file mode 100644 index 0000000000..edef72874b --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Justification with ruby span</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#base-annotation-pairing"> +<link rel="match" href="ruby-justification-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + body { line-height: 3; } +</style> +<div style="width: 200px; height: 100px; text-align-last: justify; overflow: auto;"><ruby> + <rb>a</rb><rb>b</rb> + <rtc><div style="width: 100px;"></div></rtc> +</ruby></div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-002-ref.html new file mode 100644 index 0000000000..c61dae5c62 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-002-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Justification with ruby span</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + div { + ruby-position: under; + width: 300px; height: 100px; + text-align-last: justify; + overflow: auto; + text-decoration: underline; + } +</style> +<div><rb>ไปฎ</rb><rb>ๅ</rb><rt>ใ</rt><rt>ใช</rt></div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-002.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-002.html new file mode 100644 index 0000000000..979987c028 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Justification with ruby span</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#base-annotation-pairing"> +<link rel="match" href="ruby-justification-002-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + div { + ruby-position: under; + width: 300px; height: 100px; + text-align-last: justify; + overflow: auto; + text-decoration: underline; + } +</style> +<div> + <rb>ไปฎ</rb><rb>ๅ</rb> + <rt>ใ</rt><rt>ใช</rt> + <!-- --> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001-ref.html new file mode 100644 index 0000000000..c0655a5310 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for lang-specific default stylesheet for ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<body style="font: 200%/normal Ahem !important"> +<p><ruby><rb>base x x<rt style="ruby-align: space-around; font-size: 50%">text x x</ruby></p> +<p><ruby><rb>base x x<rt style="ruby-align: space-around; font-size: 50%">text x x</ruby></p> +<p><ruby><rb>base x x<rt style="ruby-align: center; font-size: 50%">text x x</ruby></p> +<p><ruby><rb>base x x<rt style="ruby-align: center; font-size: 30%">text x x</ruby></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001.html b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001.html new file mode 100644 index 0000000000..3206514f0d --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for lang-specific default stylesheet for ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#default-stylesheet"> +<link rel="match" href="ruby-lang-specific-style-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<body style="font: 200%/normal Ahem !important"> +<p lang="en"><ruby><rb>base x x<rt>text x x</ruby></p> +<p lang="ja"><ruby><rb>base x x<rt>text x x</ruby></p> +<p lang="zh-CN"><ruby><rb>base x x<rt>text x x</ruby></p> +<p lang="zh-TW"><ruby><rb>base x x<rt>text x x</ruby></p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html new file mode 100644 index 0000000000..7c89ee60e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html @@ -0,0 +1,179 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Ruby Reference: ruby content w. layout-internal 'display' values</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} + +input { + width: 20px; + -webkit-appearance: none; + border: 1px solid black; + background: white; +} + +.thg { display: table-header-group; } +.trg { display: table-row-group; } +.tfg { display: table-footer-group; } +.tr { display: table-row; } +.tc { display: table-cell; } +.tcg { display: table-column-group; } +.tco { display: table-column; } +.tca { display: table-caption; } +.t { display: table; } + +.rb { display: ruby-base; } +.rt { display: ruby-text; } +.rbc { display: ruby-base-container; } +.rtc { display: ruby-text-container; } + +.x { background: red} + </style> +</head> +<body> + +<ruby><rb><span>a<span><input class="thg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="thg"><input class="thg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="thg">b</div><input class="thg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="thg">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="trg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="trg"><input class="trg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="trg">b</div><input class="trg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="trg">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="tfg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="tfg"><input class="tfg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tfg">b</div><input class="tfg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tfg">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="tr"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="tr"><input class="tr"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tr">b</div><input class="tr"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tr">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="tc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="tc"><input class="tc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tc">b</div><input class="tc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tc">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="tcg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="tcg"><input class="tcg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tcg">b</div><input class="tcg"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tcg">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="tco"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="tco"><input class="tco"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tco">b</div><input class="tco"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tco">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="tca"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="tca"><input class="tca"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tca">b</div><input class="tca"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="tca">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="t"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="t"><input class="t"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="t">b</div><input class="t"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="t">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="rb"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="rb"><input class="rb"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rb">b</div><input class="rb"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rb">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="rt"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="rt"><input class="rt"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rt">b</div><input class="rt"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rt">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="rbc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="rbc"><input class="rbc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rbc">b</div><input class="rbc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rbc">b</div></span>c</span></rb></ruby> + +<ruby><rb><span>a<span><input class="rtc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><input class="rtc"><input class="rtc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rtc">b</div><input class="rtc"></span>b</span></rb></ruby> +<ruby><rb><span>a<span><div class="rtc">b</div></span>c</span></rb></ruby> + +<br><hr> + +<!-- --> + +<ruby><rb><span><input class="thg"></span>b</rb></ruby> +<ruby><rb><span><input class="thg"><input class="thg"></span>b</rb></ruby> +<ruby><rb><span><div class="thg">b</div><input class="thg"></span>b</rb></ruby> +<ruby><rb><span><div class="thg">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="trg"></span>b</rb></ruby> +<ruby><rb><span><input class="trg"><input class="trg"></span>b</rb></ruby> +<ruby><rb><span><div class="trg">b</div><input class="trg"></span>b</rb></ruby> +<ruby><rb><span><div class="trg">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="tfg"></span>b</rb></ruby> +<ruby><rb><span><input class="tfg"><input class="tfg"></span>b</rb></ruby> +<ruby><rb><span><div class="tfg">b</div><input class="tfg"></span>b</rb></ruby> +<ruby><rb><span><div class="tfg">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="tr"></span>b</rb></ruby> +<ruby><rb><span><input class="tr"><input class="tr"></span>b</rb></ruby> +<ruby><rb><span><div class="tr">b</div><input class="tr"></span>b</rb></ruby> +<ruby><rb><span><div class="tr">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="tc"></span>b</rb></ruby> +<ruby><rb><span><input class="tc"><input class="tc"></span>b</rb></ruby> +<ruby><rb><span><div class="tc">b</div><input class="tc"></span>b</rb></ruby> +<ruby><rb><span><div class="tc">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="tcg"></span>b</rb></ruby> +<ruby><rb><span><input class="tcg"><input class="tcg"></span>b</rb></ruby> +<ruby><rb><span><div class="tcg">b</div><input class="tcg"></span>b</rb></ruby> +<ruby><rb><span><div class="tcg">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="tco"></span>b</rb></ruby> +<ruby><rb><span><input class="tco"><input class="tco"></span>b</rb></ruby> +<ruby><rb><span><div class="tco">b</div><input class="tco"></span>b</rb></ruby> +<ruby><rb><span><div class="tco">b</div></span>c</rb></ruby> + +<!-- bug NNNNNN +<ruby><rb><span><input class="tca"></span>b</rb></ruby> +<ruby><rb><span><input class="tca"><input class="tca"></span>b</rb></ruby> +<ruby><rb><span><div class="tca">b</div><input class="tca"></span>b</rb></ruby> +<ruby><rb><span><div class="tca">b</div></span>c</rb></ruby> +--> + +<ruby><rb><span><input class="t"></span>b</rb></ruby> +<ruby><rb><span><input class="t"><input class="t"></span>b</rb></ruby> +<ruby><rb><span><div class="t">b</div><input class="t"></span>b</rb></ruby> +<ruby><rb><span><div class="t">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="rb"></span>b</rb></ruby> +<ruby><rb><span><input class="rb"><input class="rb"></span>b</rb></ruby> +<ruby><rb><span><div class="rb">b</div><input class="rb"></span>b</rb></ruby> +<ruby><rb><span><div class="rb">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="rt"></span>b</rb></ruby> +<ruby><rb><span><input class="rt"><input class="rt"></span>b</rb></ruby> +<ruby><rb><span><div class="rt">b</div><input class="rt"></span>b</rb></ruby> +<ruby><rb><span><div class="rt">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="rbc"></span>b</rb></ruby> +<ruby><rb><span><input class="rbc"><input class="rbc"></span>b</rb></ruby> +<ruby><rb><span><div class="rbc">b</div><input class="rbc"></span>b</rb></ruby> +<ruby><rb><span><div class="rbc">b</div></span>c</rb></ruby> + +<ruby><rb><span><input class="rtc"></span>b</rb></ruby> +<ruby><rb><span><input class="rtc"><input class="rtc"></span>b</rb></ruby> +<ruby><rb><span><div class="rtc">b</div><input class="rtc"></span>b</rb></ruby> +<ruby><rb><span><div class="rtc">b</div></span>c</rb></ruby> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html new file mode 100644 index 0000000000..cfd271233e --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html @@ -0,0 +1,181 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Ruby Test: ruby content w. layout-internal 'display' values</title> + <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> + <link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="match" href="ruby-layout-internal-boxes-ref.html"> + <style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} + +input { + width: 20px; + -webkit-appearance: none; + border: 1px solid black; + background: white; +} + +.thg { display: table-header-group; } +.trg { display: table-row-group; } +.tfg { display: table-footer-group; } +.tr { display: table-row; } +.tc { display: table-cell; } +.tcg { display: table-column-group; } +.tco { display: table-column; } +.tca { display: table-caption; } +.t { display: table; } + +.rb { display: ruby-base; } +.rt { display: ruby-text; } +.rbc { display: ruby-base-container; } +.rtc { display: ruby-text-container; } + + </style> +</head> +<body> + +<ruby><rb><span>a<input class="thg">b</span></rb></ruby> +<ruby><rb><span>a<input class="thg"><input class="thg">b</span></rb></ruby> +<ruby><rb><span>a<div class="thg">b</div><input class="thg">b</span></rb></ruby> +<ruby><rb><span>a<div class="thg">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="trg">b</span></rb></ruby> +<ruby><rb><span>a<input class="trg"><input class="trg">b</span></rb></ruby> +<ruby><rb><span>a<div class="trg">b</div><input class="trg">b</span></rb></ruby> +<ruby><rb><span>a<div class="trg">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="tfg">b</span></rb></ruby> +<ruby><rb><span>a<input class="tfg"><input class="tfg">b</span></rb></ruby> +<ruby><rb><span>a<div class="tfg">b</div><input class="tfg">b</span></rb></ruby> +<ruby><rb><span>a<div class="tfg">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="tr">b</span></rb></ruby> +<ruby><rb><span>a<input class="tr"><input class="tr">b</span></rb></ruby> +<ruby><rb><span>a<div class="tr">b</div><input class="tr">b</span></rb></ruby> +<ruby><rb><span>a<div class="tr">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="tc">b</span></rb></ruby> +<ruby><rb><span>a<input class="tc"><input class="tc">b</span></rb></ruby> +<ruby><rb><span>a<div class="tc">b</div><input class="tc">b</span></rb></ruby> +<ruby><rb><span>a<div class="tc">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="tcg">b</span></rb></ruby> +<ruby><rb><span>a<input class="tcg"><input class="tcg">b</span></rb></ruby> +<ruby><rb><span>a<div class="tcg">b</div><input class="tcg">b</span></rb></ruby> +<ruby><rb><span>a<div class="tcg">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="tco">b</span></rb></ruby> +<ruby><rb><span>a<input class="tco"><input class="tco">b</span></rb></ruby> +<ruby><rb><span>a<div class="tco">b</div><input class="tco">b</span></rb></ruby> +<ruby><rb><span>a<div class="tco">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="tca">b</span></rb></ruby> +<ruby><rb><span>a<input class="tca"><input class="tca">b</span></rb></ruby> +<ruby><rb><span>a<div class="tca">b</div><input class="tca">b</span></rb></ruby> +<ruby><rb><span>a<div class="tca">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="t">b</span></rb></ruby> +<ruby><rb><span>a<input class="t"><input class="t">b</span></rb></ruby> +<ruby><rb><span>a<div class="t">b</div><input class="t">b</span></rb></ruby> +<ruby><rb><span>a<div class="t">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="rb">b</span></rb></ruby> +<ruby><rb><span>a<input class="rb"><input class="rb">b</span></rb></ruby> +<ruby><rb><span>a<div class="rb">b</div><input class="rb">b</span></rb></ruby> +<ruby><rb><span>a<div class="rb">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="rt">b</span></rb></ruby> +<ruby><rb><span>a<input class="rt"><input class="rt">b</span></rb></ruby> +<ruby><rb><span>a<div class="rt">b</div><input class="rt">b</span></rb></ruby> +<ruby><rb><span>a<div class="rt">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="rbc">b</span></rb></ruby> +<ruby><rb><span>a<input class="rbc"><input class="rbc">b</span></rb></ruby> +<ruby><rb><span>a<div class="rbc">b</div><input class="rbc">b</span></rb></ruby> +<ruby><rb><span>a<div class="rbc">b</div>c</span></rb></ruby> + +<ruby><rb><span>a<input class="rtc">b</span></rb></ruby> +<ruby><rb><span>a<input class="rtc"><input class="rtc">b</span></rb></ruby> +<ruby><rb><span>a<div class="rtc">b</div><input class="rtc">b</span></rb></ruby> +<ruby><rb><span>a<div class="rtc">b</div>c</span></rb></ruby> + +<br><hr> + +<!-- same as above but without the SPAN wrapper --> + +<ruby><rb><input class="thg">b</rb></ruby> +<ruby><rb><input class="thg"><input class="thg">b</rb></ruby> +<ruby><rb><div class="thg">b</div><input class="thg">b</rb></ruby> +<ruby><rb><div class="thg">b</div>c</rb></ruby> + +<ruby><rb><input class="trg">b</rb></ruby> +<ruby><rb><input class="trg"><input class="trg">b</rb></ruby> +<ruby><rb><div class="trg">b</div><input class="trg">b</rb></ruby> +<ruby><rb><div class="trg">b</div>c</rb></ruby> + +<ruby><rb><input class="tfg">b</rb></ruby> +<ruby><rb><input class="tfg"><input class="tfg">b</rb></ruby> +<ruby><rb><div class="tfg">b</div><input class="tfg">b</rb></ruby> +<ruby><rb><div class="tfg">b</div>c</rb></ruby> + +<ruby><rb><input class="tr">b</rb></ruby> +<ruby><rb><input class="tr"><input class="tr">b</rb></ruby> +<ruby><rb><div class="tr">b</div><input class="tr">b</rb></ruby> +<ruby><rb><div class="tr">b</div>c</rb></ruby> + +<ruby><rb><input class="tc">b</rb></ruby> +<ruby><rb><input class="tc"><input class="tc">b</rb></ruby> +<ruby><rb><div class="tc">b</div><input class="tc">b</rb></ruby> +<ruby><rb><div class="tc">b</div>c</rb></ruby> + +<ruby><rb><input class="tcg">b</rb></ruby> +<ruby><rb><input class="tcg"><input class="tcg">b</rb></ruby> +<ruby><rb><div class="tcg">b</div><input class="tcg">b</rb></ruby> +<ruby><rb><div class="tcg">b</div>c</rb></ruby> + +<ruby><rb><input class="tco">b</rb></ruby> +<ruby><rb><input class="tco"><input class="tco">b</rb></ruby> +<ruby><rb><div class="tco">b</div><input class="tco">b</rb></ruby> +<ruby><rb><div class="tco">b</div>c</rb></ruby> + +<!-- FIXME after https://bugzilla.mozilla.org/show_bug.cgi?id=1510299 +<ruby><rb><input class="tca">b</rb></ruby> +<ruby><rb><input class="tca"><input class="tca">b</rb></ruby> +<ruby><rb><div class="tca">b</div><input class="tca">b</rb></ruby> +<ruby><rb><div class="tca">b</div>c</rb></ruby> +--> + +<ruby><rb><input class="t">b</rb></ruby> +<ruby><rb><input class="t"><input class="t">b</rb></ruby> +<ruby><rb><div class="t">b</div><input class="t">b</rb></ruby> +<ruby><rb><div class="t">b</div>c</rb></ruby> + +<ruby><rb><input class="rb">b</rb></ruby> +<ruby><rb><input class="rb"><input class="rb">b</rb></ruby> +<ruby><rb><div class="rb">b</div><input class="rb">b</rb></ruby> +<ruby><rb><div class="rb">b</div>c</rb></ruby> + +<ruby><rb><input class="rt">b</rb></ruby> +<ruby><rb><input class="rt"><input class="rt">b</rb></ruby> +<ruby><rb><div class="rt">b</div><input class="rt">b</rb></ruby> +<ruby><rb><div class="rt">b</div>c</rb></ruby> + +<ruby><rb><input class="rbc">b</rb></ruby> +<ruby><rb><input class="rbc"><input class="rbc">b</rb></ruby> +<ruby><rb><div class="rbc">b</div><input class="rbc">b</rb></ruby> +<ruby><rb><div class="rbc">b</div>c</rb></ruby> + +<ruby><rb><input class="rtc">b</rb></ruby> +<ruby><rb><input class="rtc"><input class="rtc">b</rb></ruby> +<ruby><rb><div class="rtc">b</div><input class="rtc">b</rb></ruby> +<ruby><rb><div class="rtc">b</div>c</rb></ruby> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001-ref.html new file mode 100644 index 0000000000..1cd43b8001 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for ruby line break suppression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<ruby>ab</ruby><br> +<rbc>ab</rbc><br> +<rtc>ab</rtc><br> +<rb>ab</rb><br> +<rt>ab</rt> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001.html new file mode 100644 index 0000000000..11d4d40d43 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for ruby line break suppression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-line-break-suppression-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<ruby>a<br>b</ruby><br> +<rbc>a<br>b</rbc><br> +<rtc>a<br>b</rtc><br> +<rb>a<br>b</rb><br> +<rt>a<br>b</rt> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002-ref.html new file mode 100644 index 0000000000..8281ea1d74 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for ruby line break suppression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<div style="width: 1em; border: 1px solid"> + <ruby>aaaaaaaaaabbbbbbbbbb</ruby><br> + <rbc>aaaaaaaaaabbbbbbbbbb</rbc><br> + <rtc>aaaaaaaaaabbbbbbbbbb</rtc><br> + <rb>aaaaaaaaaabbbbbbbbbb</rb><br> + <rt>aaaaaaaaaabbbbbbbbbb</rt><br> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002.html new file mode 100644 index 0000000000..394b9c27e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for ruby line break suppression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-line-break-suppression-002-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<div style="width: 1em; border: 1px solid"> + <ruby>aaaaaaaaaa<div></div>bbbbbbbbbb</ruby><br> + <rbc>aaaaaaaaaa<div></div>bbbbbbbbbb</rbc><br> + <rtc>aaaaaaaaaa<div></div>bbbbbbbbbb</rtc><br> + <rb>aaaaaaaaaa<div></div>bbbbbbbbbb</rb><br> + <rt>aaaaaaaaaa<div></div>bbbbbbbbbb</rt><br> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003-ref.html new file mode 100644 index 0000000000..f8b1e168e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for ruby line break suppression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<ruby><span>a +b</span></ruby><br> +<rbc><span>a +b</span></rbc><br> +<rtc><span>a +b</span></rtc><br> +<rb><span>a +b</span></rb><br> +<rt><span>a +b</span></rt><br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003.html new file mode 100644 index 0000000000..dadfd562a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test for ruby line break suppression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-line-break-suppression-003-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + span { white-space: pre; } +</style> +<ruby><span>a +b</span></ruby><br> +<rbc><span>a +b</span></rbc><br> +<rtc><span>a +b</span></rtc><br> +<rb><span>a +b</span></rb><br> +<rt><span>a +b</span></rt><br> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004-ref.html new file mode 100644 index 0000000000..5aa5582957 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Line break suppression on whitespaces wrapped but not contained in ruby boxes</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<span style="white-space: pre"><rb>a</rb><rb> +</rb><rb>b</rb></span> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004.html new file mode 100644 index 0000000000..0314237f07 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Line break suppression on whitespaces wrapped but not contained in ruby boxes</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-line-break-suppression-004-ref.html"> +<span style="white-space: pre"><rb>a</rb> +<rb>b</rb></span> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005-ref.html new file mode 100644 index 0000000000..c40780e37d --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Line break suppression with soft hyphen</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<body style="width: 1px"> +x<ruby>a</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005.html new file mode 100644 index 0000000000..10d6690b3d --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Line break suppression with soft hyphen</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"> +<link rel="match" href="ruby-line-break-suppression-005-ref.html"> +<body style="width: 1px"> +x<ruby>a­</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001-ref.html new file mode 100644 index 0000000000..1f3031c59a --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Meet the specification for line breaking between ruby bases</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + body { line-height: 3; font-kerning: none; } + span { white-space: nowrap; } +</style> +<div style="width: .5em; border: 1px solid silver;"> + <span>ใ</span><span>ใช</span><span>ใซ</span><span>ใ</span><span>่ชฐ</span><span>๏ผ</span><span>ใ</span><span>ใ</span><span>็ง</span><span>ใงใ</span><span>ใ</span> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001.html new file mode 100644 index 0000000000..b6b4d861e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Meet the specification for line breaking between ruby bases</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#break-between"> +<link rel="match" href="ruby-line-breaking-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + body { line-height: 3; font-kerning: none; } +</style> +<div style="width: .5em; border: 1px solid silver;"> + <ruby> + <rb>ใ<rb>ใช<rb>ใซ<rb>ใ<rb>่ชฐ<rb>๏ผ<rb>ใ<rb>ใ<rb>็ง<rb>ใงใ<rb>ใ</rb> + <!-- Check if ruby text containers are skipped from the text run --> + <rtc><rt> + </ruby> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002-ref.html new file mode 100644 index 0000000000..08510f7fb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Line breaking between ruby and preceeding open bracket</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<div style="width: 5em; border: 1px solid silver;"> + ใฎใ<span style="font-family: Ahem; padding: 0 10rem;">X</span>ใ +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002.html new file mode 100644 index 0000000000..dddf41f930 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Line breaking between ruby and preceeding open bracket</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#break-between"> +<link rel="match" href="ruby-line-breaking-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/ruby-common.css"> +<div style="width: 5em; border: 1px solid silver;"> + ใฎใ<ruby style="font-family: Ahem;">X<rt style="font-size: 0;"><div style="width: 21rem"></div></ruby>ใ +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003-ref.html new file mode 100644 index 0000000000..4f3cecb27c --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Dynamic break point change in ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + #test { + border: 1px solid; + text-align: center; + width: 2.5em; + } +</style> +<div id="test"> + <p>ไธไบไธๅไบๅ
ญไธๅ
ซ</p> + <p>ไธไบไธๅไบๅ
ญไธๅ
ซ</p> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003.html new file mode 100644 index 0000000000..27348d0cf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>Dynamic break point change in ruby</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#break-between"> +<link rel="match" href="ruby-line-breaking-003-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> + #test { + border: 1px solid; + text-align: center; + } +</style> +<div id="test"> + <p><ruby><rb>ไธ<rb>ไบ<rb>ไธ<rb>ๅ<rb>ไบ<rb>ๅ
ญ<rb>ไธ<rb>ๅ
ซ</ruby></p> + <p><ruby><rbc>ไธ</rbc><rbc>ไบ</rbc><rbc>ไธ</rbc><rbc>ๅ</rbc><rbc>ไบ</rbc><rbc>ๅ
ญ</rbc><rbc>ไธ</rbc><rbc>ๅ
ซ</rbc></ruby></p> +</div> +<script> + let div = document.getElementById("test"); + document.body.offsetHeight; + test.style.width = "2.5em"; + document.body.offsetHeight; + test.style.width = "4.5em"; + document.body.offsetHeight; + test.style.width = "2.5em"; +</script> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-no-transform-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-no-transform-ref.html new file mode 100644 index 0000000000..56afd9366f --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-no-transform-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby should not support transform</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<ruby> + <rbc><rb>a</rb><rb>b</rb></rbc> + <rtc><rt>A</rt><rt>B</rt></rtc> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-no-transform.html b/testing/web-platform/tests/css/css-ruby/ruby-no-transform.html new file mode 100644 index 0000000000..1cdd4f3bbf --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-no-transform.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby should not support transform</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> +<link rel="match" href="ruby-no-transform-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> +ruby, rbc, rb, rtc, rt { + transform: translateX(50px); +} +</style> +<ruby> + <rbc><rb>a</rb><rb>b</rb></rbc> + <rtc><rt>A</rt><rt>B</rt></rtc> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-position-alternate.html b/testing/web-platform/tests/css/css-ruby/ruby-position-alternate.html new file mode 100644 index 0000000000..e2e10d9be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-position-alternate.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-ruby/#rubypos"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + +<p> + <ruby id="a1"> + base + <rtc><rt>annotation1</rt></rtc> + <rtc><rt>annotation2</rt></rtc> + <rtc><rt>annotation3</rt></rtc> + </ruby> +</p> + +<script> +for (const value of ['', 'alternate', 'alternate over', 'over alternate']) { + test(() => { + const a1 = document.querySelector('#a1'); + a1.style.rubyPosition = value; + const [rt1, rt2, rt3] = a1.querySelectorAll('rt'); + assert_rt_is_over(rt1, a1); + assert_rt_is_under(rt2, a1); + assert_rt_is_over(rt3, a1); + a1.style.rubyPosition = ''; + }, `ruby-position "${value}" alternate from over`); +} + +for (const value of ['alternate under', 'under alternate']) { + test(() => { + const a1 = document.querySelector('#a1'); + a1.style.rubyPosition = value; + const [rt1, rt2, rt3] = a1.querySelectorAll('rt'); + assert_rt_is_under(rt1, a1); + assert_rt_is_over(rt2, a1); + assert_rt_is_under(rt3, a1); + a1.style.rubyPosition = ''; + }, `ruby-position "${value}" alternate from under`); +} + +test(() => { + const a1 = document.querySelector('#a1'); + const [rtc1, rtc2] = a1.querySelectorAll('rtc'); + const [rt1, rt2, rt3] = a1.querySelectorAll('rt'); + + rtc1.style.rubyPosition = 'under'; + assert_rt_is_under(rt1, a1); + assert_rt_is_over(rt2, a1); + assert_rt_is_under(rt3, a1); + + rtc1.style.rubyPosition = 'over'; + assert_rt_is_over(rt1, a1); + assert_rt_is_under(rt2, a1); + assert_rt_is_over(rt3, a1); + + rtc1.style.rubyPosition = 'alternate'; + rtc2.style.rubyPosition = 'under'; + assert_rt_is_over(rt1, a1); + assert_rt_is_under(rt2, a1); + assert_rt_is_over(rt3, a1); + + rtc1.style.rubyPosition = ''; + rtc2.style.rubyPosition = ''; +}, 'ruby-position alternate from previous ruby text container'); + +function assert_rt_is_over(rt, ruby) { + assert_true(rt.getBoundingClientRect().top < ruby.getBoundingClientRect().top); +} + +function assert_rt_is_under(rt, ruby) { + assert_true(rt.getBoundingClientRect().bottom > ruby.getBoundingClientRect().bottom); +} + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-position.html b/testing/web-platform/tests/css/css-ruby/ruby-position.html new file mode 100644 index 0000000000..014c524044 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-position.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-ruby/#rubypos"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + +<p><ruby id="o1" style="ruby-position: over">base<rt>annotation</rt></ruby></p> +<p><ruby id="o2" style="ruby-position: over">base<rt style="ruby-position: under">annotation</rt></ruby></p> +<p><ruby id="o3" style="ruby-position: under">base<rtc style="ruby-position: over"><rt style="ruby-position: under">annotation</rt></rtc></ruby></p> + +<p><ruby id="u1" style="ruby-position: under">base<rt>annotation</rt></ruby></p> +<p><ruby id="u2" style="ruby-position: under">base<rt style="ruby-position: over">annotation</rt></ruby></p> +<p><ruby id="u3" style="ruby-position: over">base<rtc style="ruby-position: under"><rt style="ruby-position: over">annotation</rt></rtc></ruby></p> + +<script> +test(() => { + const o1 = document.querySelector('#o1'); + assert_true(o1.querySelector('rt').getBoundingClientRect().top <= o1.getBoundingClientRect().top); +}, 'ruby-position:over on <ruby> works'); + +test(() => { + const o2 = document.querySelector('#o2'); + assert_true(o2.querySelector('rt').getBoundingClientRect().top <= o2.getBoundingClientRect().top); +}, 'ruby-position:under on <rt> should not work'); + +test(() => { + const o3 = document.querySelector('#o3'); + assert_true(o3.querySelector('rt').getBoundingClientRect().top <= o3.getBoundingClientRect().top); +}, 'ruby-position:over on <rtc> works'); + +test(() => { + const u1 = document.querySelector('#u1'); + assert_true(u1.querySelector('rt').getBoundingClientRect().bottom >= u1.getBoundingClientRect().bottom); +}, 'ruby-position:under on <ruby> works'); + +test(() => { + const u2 = document.querySelector('#u2'); + assert_true(u2.querySelector('rt').getBoundingClientRect().bottom >= u2.getBoundingClientRect().bottom); +}, 'ruby-position:over on <rt> should not work'); + +test(() => { + const u3 = document.querySelector('#u3'); + assert_true(u3.querySelector('rt').getBoundingClientRect().bottom >= u3.getBoundingClientRect().bottom); +}, 'ruby-position:under on <rtc> works'); + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-noruby.html b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-noruby.html new file mode 100644 index 0000000000..eda07deddb --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-noruby.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html style="overflow:hidden;"> +<head> +<title>CSS Test: Ruby Base Frames Reflowed</title> +<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/"> +<meta name="assert" content="Test checks that ruby bases are reflowed."> +<meta charset="UTF-8"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> +body { line-height: 3; } +</style> +</head> +<body> +ๆฐๅนน็ท +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-opaqueruby.html b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-opaqueruby.html new file mode 100644 index 0000000000..77feb2e6b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-opaqueruby.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html style="overflow:hidden;"> +<head> +<title>CSS Test: Ruby Text Frames Visible</title> +<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/"> +<link rel="mismatch" href="ruby-reflow-001-noruby.html"> +<meta name="assert" content="Test checks that ruby text is rendered."> +<meta charset="UTF-8"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> +body { line-height: 3; } +</style> +</head> +<body> +<ruby> + <rbc><rb>ๆฐ</rb><rb>ๅนน</rb><rb>็ท</rb></rbc> + <rtc><rt>ใใ</rt><rt>ใใ</rt><rt>ใใ</rt></rtc> +</ruby> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-transparentruby.html b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-transparentruby.html new file mode 100644 index 0000000000..008c5250bc --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-transparentruby.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html style="overflow:hidden;"> +<head> +<title>CSS Test: Ruby Base Frames Reflowed</title> +<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/"> +<link rel="match" href="ruby-reflow-001-noruby.html"> +<meta name="assert" content="Test checks that ruby bases are reflowed."> +<meta charset="UTF-8"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> +body { line-height: 3; } +rtc { color: transparent; } +</style> +</head> +<body> +<ruby> + <rbc><rb>ๆฐ</rb><rb>ๅนน</rb><rb>็ท</rb></rbc> + <rtc><rt>ใใ</rt><rt>ใใ</rt><rt>ใใ</rt></rtc> +</ruby> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-span-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-span-001-ref.html new file mode 100644 index 0000000000..3bf873453c --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-span-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby span</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<ruby><rb>The Ruby Base</rb><rtc><rt>span</rt></rtc></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-span-001.html b/testing/web-platform/tests/css/css-ruby/ruby-span-001.html new file mode 100644 index 0000000000..e7b19667aa --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-span-001.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby span</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing"> +<link rel="match" href="ruby-span-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<ruby><rb>The Ruby Base</rb><rtc>span</rtc></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-collapse-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse-ref.html new file mode 100644 index 0000000000..6cbcc7807f --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>CSS Reference: visibility: collapse hides ruby annotations</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<style> + body { line-height: 5; } + rt { font-size: 80%; } +</style> +<ruby> + <rb>ๆ</rb><rb>่ซ</rb><rb>่จ</rb> + <rt>ใใ</rt><rt>ใกใ
ใ</rt><rt>ใ</rt> +</ruby><br> +<ruby> + <rb>ๆ</rb><rb>่ซ</rb><rb>่จ</rb> + <rt>ใใ</rt><rt style="opacity: 0">ใกใ
ใ</rt><rt>ใ</rt> +</ruby><br> +<ruby> + <rb>ๆ</rb><rb>่ซ</rb><rb>่จ</rb> + <rt>ใใ</rt><rt></rt><rt>ใ</rt> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-collapse.html b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse.html new file mode 100644 index 0000000000..5bb01aab02 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="ja"> +<meta charset="UTF-8"> +<title>CSS Test: visibility: collapse hides ruby annotations</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#hiding"> +<link rel="match" href="ruby-text-collapse-ref.html"> +<style> + body { line-height: 5; } + rt { font-size: 80%; } +</style> +<ruby> + <rb>ๆ</rb><rb>่ซ</rb><rb>่จ</rb> + <rt>ใใ</rt><rt>ใกใ
ใ</rt><rt>ใ</rt> +</ruby><br> +<ruby> + <rb>ๆ</rb><rb>่ซ</rb><rb>่จ</rb> + <rt>ใใ</rt><rt style="visibility: hidden">ใกใ
ใ</rt><rt>ใ</rt> +</ruby><br> +<ruby> + <rb>ๆ</rb><rb>่ซ</rb><rb>่จ</rb> + <rt>ใใ</rt><rt style="visibility: collapse">ใกใ
ใ</rt><rt>ใ</rt> +</ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001-ref.html new file mode 100644 index 0000000000..db4f23c886 --- /dev/null +++ b/testing/web-platform/tests/css/css-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="/fonts/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/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001a.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001a.html new file mode 100644 index 0000000000..bdb87e29b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-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="/fonts/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/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001b.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001b.html new file mode 100644 index 0000000000..8aed0146b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-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="/fonts/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/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002-ref.html new file mode 100644 index 0000000000..1bb4386e7a --- /dev/null +++ b/testing/web-platform/tests/css/css-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="/fonts/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/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002a.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002a.html new file mode 100644 index 0000000000..6c95c169e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-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="/fonts/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/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002b.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002b.html new file mode 100644 index 0000000000..ed7dabb026 --- /dev/null +++ b/testing/web-platform/tests/css/css-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="/fonts/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/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001-ref.html new file mode 100644 index 0000000000..04fa59e6ba --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby whitespace handling</title> +<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> +body { line-height: 5em; } +</style> + +<p> + <ruby><rbc><rb><span> </span></rb><rb><span> </span></rb><rb>Base three</rb></rbc + ><rtc><rt><span> </span></rt><rt><span> </span></rt><rt>Text three</rt></rtc + ><rtc><rt></rt></rtc + ><rbc><rb><span> </span></rb></rbc + ><rbc><rb>Segment two</rb></rbc + ><rtc><rt></rt></rtc></ruby> +</p> + +<p> + <ruby><rbc><rb>Base one</rb><rb><span> </span></rb><rb>Base three</rb></rbc + ><rtc pseudo><rt>Text one</rt><rt pseudo><span> </span></rt><rt>Text three</rt></rtc></ruby> +</p> + +<p> + <ruby><rbc><rb>Segment one</rb></rbc + ><rbc><rb><span> </span></rb></rbc + ><rbc><rb><span> </span></rb><rb><span> </span></rb><rb>Base three</rb></rbc + ><rtc><rt><span> </span></rt><rt><span> </span></rt><rt>Text three</rt></rtc + ><rbc><rb><span> </span></rb></rbc + ><rbc><rb>Base one</rb><rb><span> </span></rb><rb>Base three</rb></rbc + ><rtc><rt>Text one</rt><rt></rt><rt>Text two/three</rt></rtc></ruby> +</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001.html new file mode 100644 index 0000000000..9072a8e684 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby whitespace handling</title> +<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#white-space"> +<link rel="match" href="ruby-whitespace-001-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> +<style> +body { line-height: 5em; } +</style> + +<p> + <ruby> + <rbc> <rb> </rb> <rb>Base three</rb> </rbc> + <rtc> <rt> </rt> <rt>Text three</rt> </rtc> <rtc><rt></rt></rtc> + <rbc><rb>Segment two</rb></rbc><rtc><rt></rt></rtc> + </ruby> +</p> + +<p> + <ruby> + <rb>Base one</rb> <rb>Base three</rb> + <rt>Text one</rt> <rt>Text three</rt> + </ruby> +</p> + +<p> + <rb>Segment one</rb> <rbc> <rb> </rb> <rb>Base three</rb> </rbc + > <rtc><rt> </rt> <rt>Text three</rt></rtc> + + <rb>Base one</rb> <rb>Base three</rb> <rt>Text one</rt><rt>Text two/three</rt> +</p> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002-ref.html new file mode 100644 index 0000000000..2b22891738 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby whitespace handling</title> +<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="stylesheet" href="support/ruby-common.css"> + +<!-- Unclear how this should render. See http://lists.w3.org/Archives/Public/www-style/2014Jul/0620.html //--> +abcd<ruby><rbc><rb><span> BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby> + +abcd<ruby><rbc><rb><span>BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby> + +abcd<ruby><rbc><rb><span> BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby> + +<ruby><rbc></rbc></ruby> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002.html new file mode 100644 index 0000000000..98ed789133 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Ruby whitespace handling</title> +<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#white-space"> +<link rel="match" href="ruby-whitespace-002-ref.html"> +<link rel="stylesheet" href="support/ruby-common.css"> + +abcd<rbc> BASE</rbc><rt>TEXT</rt> + +abcd<rbc> <span>BASE</span></rbc><rt>TEXT</rt> + +abcd<rbc><span> BASE</span></rbc><rt>TEXT</rt> + +<rbc> </rbc> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001-ref.html new file mode 100644 index 0000000000..c041e3f993 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="float: left; width: 50px; height: 50px; background: green;"></div> +<div style="display: inline-block;"><ruby>base<rt>annotation</rt></ruby></div> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001.html new file mode 100644 index 0000000000..a49c1b255f --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>A float is positioned correctly with ruby.</title> +<link rel="match" href="ruby-with-floats-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/"> +<div style="float: left; width: 50px; height: 50px; background: green;"></div> +<ruby>base<rt>annotation</rt></ruby> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002-ref.html new file mode 100644 index 0000000000..aa07f344e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div style="float: left; width: 50px; height: 20px; background: green;"></div> +<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div> +<div style="display: inline-block;"><ruby>base<rt>annotation</rt></ruby></div> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002.html new file mode 100644 index 0000000000..190089d334 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>A ruby annotation doesn't intersect with any floats.</title> +<link rel="match" href="ruby-with-floats-002-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/"> +<div style="float: left; width: 50px; height: 20px; background: green;"></div> +<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div> +<ruby>base<rt>annotation</rt></ruby> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003-ref.html new file mode 100644 index 0000000000..110e16eeec --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div style="float: left; width: 50px; height: 20px; background: green;"></div> +<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div> +<div style="display: inline-block;"><ruby style="ruby-position: under;">base<rt>annotation</rt></ruby></div> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003.html new file mode 100644 index 0000000000..4fd7524315 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>A ruby annotation doesn't intersect with any floats.</title> +<link rel="match" href="ruby-with-floats-003-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-ruby-1/"> +<div style="float: left; width: 50px; height: 20px; background: green;"></div> +<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div> +<ruby style="ruby-position: under;">base<rt>annotation</rt></ruby> +</div> diff --git a/testing/web-platform/tests/css/css-ruby/support/ruby-common.css b/testing/web-platform/tests/css/css-ruby/support/ruby-common.css new file mode 100644 index 0000000000..cf83123281 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/support/ruby-common.css @@ -0,0 +1,18 @@ +rbc { + display: ruby-base-container; + unicode-bidi: isolate; +} +[pseudo] { + font-size: inherit; + line-height: inherit; +} +[pseudo] > rt { + font-size: 50%; +} +[pseudo] > rt[pseudo] { + font-size: inherit; +} + +.large { + font-size: 200%; +} diff --git a/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-insertion.js b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-insertion.js new file mode 100644 index 0000000000..0bf6cd9697 --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-insertion.js @@ -0,0 +1,42 @@ +window.onload = function() { + // Force a reflow before any changes. + document.body.clientWidth; + + var elems = document.querySelectorAll('[data-insert]'); + Array.from(elems).forEach(function(e) { + var parent, ref; + switch (e.dataset.insert) { + case 'start': + parent = e; + ref = e.firstChild; + break; + + case 'end': + parent = e; + ref = null; + break; + + case 'before': + parent = e.parentNode; + ref = e; + break; + + case 'after': + parent = e.parentNode; + ref = e.nextSibling; + break; + } + + var elem, textnode; + if ('text' in e.dataset) { + textnode = document.createTextNode(e.dataset.text); + } + if ('tag' in e.dataset) { + elem = document.createElement(e.dataset.tag); + if (textnode) { + elem.appendChild(textnode); + } + } + parent.insertBefore(elem ? elem : textnode, ref); + }); +}; diff --git a/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-removal.js b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-removal.js new file mode 100644 index 0000000000..c703e7601e --- /dev/null +++ b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-removal.js @@ -0,0 +1,14 @@ +function getElements(className) { + return Array.from(document.getElementsByClassName(className)); +} +window.onload = function() { + // Force a reflow before any changes. + document.body.clientWidth; + + getElements('remove').forEach(function(e) { + e.remove(); + }); + getElements('remove-after').forEach(function(e) { + e.parentNode.removeChild(e.nextSibling); + }); +}; |