mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision b'421155a1c8752a36b465e62f466b18f821190e08'
This commit is contained in:
WPT Sync Bot
parent
871cefc926
commit
fd56698ec7
722 changed files with 19686 additions and 8130 deletions
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: unicode-bidi: plaintext and paragraphs with strong directionality</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#bidi-linebox">
|
||||
<link rel="match" href="reference/bidi-lines-001-ref.html">
|
||||
<meta name=assert content="with unicode-bidi: plaintext, lines from bidi paragraphs with strong directionality use that direction">
|
||||
<style>
|
||||
div {
|
||||
font-size: 2em;
|
||||
width: 10em;
|
||||
white-space: pre;
|
||||
text-align: start;
|
||||
unicode-bidi: plaintext;
|
||||
border: solid; padding: 0 0.5ch;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>This test passes if all instances of “français” are left aligned, and all instances of “فارسی” are right aligned within the box below.
|
||||
|
||||
<div>français
|
||||
فارسی
|
||||
français
|
||||
فارسی
|
||||
français
|
||||
فارسی</div>
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: unicode-bidi: plaintext and neutral paragraphs</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#bidi-linebox">
|
||||
<link rel="match" href="reference/bidi-lines-002-ref.html">
|
||||
<meta name=assert content="with unicode-bidi: plaintext, bidi paragraphs only containing weak / neutral characters take their directionality from the previous paragraph if any, or the containing block otherwise.">
|
||||
<style>
|
||||
div {
|
||||
direction: rtl;
|
||||
unicode-bidi: plaintext;
|
||||
text-align: start;
|
||||
font-size: 2em;
|
||||
width: 10em;
|
||||
border: solid; padding: 0 0.5ch;
|
||||
}
|
||||
.l { color: blue; }
|
||||
.r { color: orange; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if within the box below, the two blue “!” are on the left, and the three orange ones are on the right.
|
||||
|
||||
<div>
|
||||
<span class=r>!</span><br>
|
||||
<span class=l>!</span> Hello<br>
|
||||
<span class=l>!</span><br>
|
||||
<span class=r>!</span> سلام<br>
|
||||
<span class=r>!</span><br>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: Interaction between tabs and bidi</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="help" href="http://unicode.org/reports/tr9/#L1">
|
||||
<link rel="match" href="reference/bidi-tab-001-ref.html">
|
||||
<meta name=assert content="with unicode-bidi: plaintext, lines from bidi paragraphs with strong directionality use that direction">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
white-space: pre;
|
||||
width: 10ch;
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
span {
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if the two boxes are identical.
|
||||
|
||||
<div dir=ltr><span dir=ltr>	0</span></div>
|
||||
<div dir=rtl><span dir=rtl>	0</span></div>
|
||||
<div dir=ltr><span dir=rtl>	0</span></div>
|
||||
<div dir=rtl><span dir=ltr>	0</span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div dir=ltr><span dir=ltr>	0</span></div>
|
||||
<div dir=rtl><span dir=rtl>	0</span></div>
|
||||
<div dir=ltr><span dir=ltrl>	0</span></div>
|
||||
<div dir=rtl><span dir=rtl>	0</span></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: unicode-bidi: plaintext and paragraphs with strong directionality</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
section {
|
||||
text-align: start;
|
||||
font-size: 2em;
|
||||
border: solid;
|
||||
padding: 0 0.5ch;
|
||||
width: 10em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if all instances of “français” are left aligned, and all instances of “فارسی” are right aligned within the box below.
|
||||
|
||||
<section>
|
||||
<div dir=ltr>français</div>
|
||||
<div dir=rtl>فارسی</div>
|
||||
<div dir=ltr>français</div>
|
||||
<div dir=rtl>فارسی</div>
|
||||
<div dir=ltr>français</div>
|
||||
<div dir=rtl>فارسی</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: unicode-bidi: plaintext and neutral paragraphs</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
section {
|
||||
text-align: start;
|
||||
font-size: 2em;
|
||||
border: solid;
|
||||
padding: 0 0.5ch;
|
||||
width: 10em;
|
||||
}
|
||||
.l { color: blue; }
|
||||
.r { color: orange; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if within the box below, the two blue “!” are on the left, and the three orange ones are on the right.
|
||||
|
||||
<section>
|
||||
<div dir=rtl><span class=r>!</span></div>
|
||||
<div dir=ltr><span class=l>!</span> Hello</div>
|
||||
<div dir=ltr><span class=l>!</span></div>
|
||||
<div dir=rtl><span class=r>!</span> سلام</div>
|
||||
<div dir=rtl><span class=r>!</span></div>
|
||||
</section>
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: Interaction between tabs and bidi</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
white-space: pre;
|
||||
width: 10ch;
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
span {
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if the two boxes are identical.
|
||||
|
||||
<div dir=ltr><span dir=ltr>	0</span></div>
|
||||
<div dir=rtl><span dir=rtl>	0</span></div>
|
||||
<div dir=ltr><span dir=ltrl>	0</span></div>
|
||||
<div dir=rtl><span dir=rtl>	0</span></div>
|
||||
|
||||
<br>
|
||||
|
||||
<div dir=ltr><span dir=ltr>	0</span></div>
|
||||
<div dir=rtl><span dir=rtl>	0</span></div>
|
||||
<div dir=ltr><span dir=ltrl>	0</span></div>
|
||||
<div dir=rtl><span dir=rtl>	0</span></div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Dutch</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-001-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-001-alt-ref.html">
|
||||
<meta name="assert" content="Language specific rules must be taken into account">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 5ch;
|
||||
hyphens: auto;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=nl class=test>cafeetje</div>
|
||||
<hr>
|
||||
<div lang=nl>café‐<br>tje</div>
|
||||
<hr>
|
||||
<div lang=nl>café-<br>tje</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Hungarian</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-002-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-002-alt-ref.html">
|
||||
<meta name="assert" content="Language specific rules must be taken into account">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 5ch;
|
||||
hyphens: auto;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=hu class=test>Összeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz‐<br>szeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz-<br>szeg</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-003-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-003-alt-ref.html">
|
||||
<meta name="assert" content="Language specific rules must be taken into account">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 3ch;
|
||||
hyphens: auto;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>tú’àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú‐<br>àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú-<br>àn</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-alt-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-alt-2-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-alt-3-ref.html">
|
||||
<meta name="assert" content="Language specific rules must be taken into account">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 8ch;
|
||||
hyphens: auto;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>àizēng‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Uyghur</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-005-ref.html">
|
||||
<meta name="assert" content="Language specific rules must be taken into account">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 4ch;
|
||||
hyphens: auto;
|
||||
color: blue;
|
||||
}
|
||||
section { max-width: 20em; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text and orange text are identical (except for the color).
|
||||
<section dir=rtl lang=ug>
|
||||
<div class=test>داميدى</div>
|
||||
<div>دامي‍ـ<br>‍دى</div>
|
||||
<section>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Dutch</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-001-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-001-alt-ref.html">
|
||||
<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
|
||||
<meta name="flags" content="should">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 5ch;
|
||||
hyphens: manual;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=nl class=test>cafee­tje</div>
|
||||
<hr>
|
||||
<div lang=nl>café‐<br>tje</div>
|
||||
<hr>
|
||||
<div lang=nl>café-<br>tje</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Hungarian</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-002-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-002-alt-ref.html">
|
||||
<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
|
||||
<meta name="flags" content="should">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 5ch;
|
||||
hyphens: manual;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=hu class=test>Ös­szeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz‐<br>szeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz-<br>szeg</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-003-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-003-alt-ref.html">
|
||||
<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
|
||||
<meta name="flags" content="should">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 3ch;
|
||||
hyphens: manual;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>tú­’àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú‐<br>àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú-<br>àn</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-alt-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-alt-2-ref.html">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-004-alt-3-ref.html">
|
||||
<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
|
||||
<meta name="flags" content="should">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 8ch;
|
||||
hyphens: manual;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>àizēng­‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Uyghur</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<link rel="match" href="reference/hyphens-i18n-auto-005-ref.html">
|
||||
<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens (and the correct character must be used)">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
width: 4ch;
|
||||
hyphens: manual;
|
||||
color: blue;
|
||||
}
|
||||
section { max-width: 20em; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text and orange text are identical (except for the color).
|
||||
<section dir=rtl lang=ug>
|
||||
<div class=test>دامي­دى</div>
|
||||
<div>دامي‍ـ<br>‍دى</div>
|
||||
<section>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Dutch</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=nl class=test>café-<br>tje</div>
|
||||
<hr>
|
||||
<div lang=nl>café‐<br>tje</div>
|
||||
<hr>
|
||||
<div lang=nl>café-<br>tje</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Dutch</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=nl class=test>café‐<br>tje</div>
|
||||
<hr>
|
||||
<div lang=nl>café‐<br>tje</div>
|
||||
<hr>
|
||||
<div lang=nl>café-<br>tje</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Hungarian</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=hu class=test>Ösz-<br>szeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz‐<br>szeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz-<br>szeg</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Hungarian</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=hu class=test>Ösz‐<br>szeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz‐<br>szeg</div>
|
||||
<hr>
|
||||
<div lang=hu>Ösz-<br>szeg</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<meta name="assert" content="Language specific rules must be taken into account">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>tú-<br>àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú‐<br>àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú-<br>àn</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||
<meta name="assert" content="Language specific rules must be taken into account">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>tú‐<br>àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú‐<br>àn</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>tú-<br>àn</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>àizēng‐<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>àizēng-<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>àizēng-<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
|
||||
<div lang=zh-Latn-pinyin class=test>àizēng‐<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div>
|
||||
<hr>
|
||||
<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: language specific hyphenation—Uyghur</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
color: orange;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
section { max-width: 20em; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the blue text and orange text are identical (except for the color).
|
||||
<section dir=rtl lang=ug>
|
||||
<div class=test>دامي‍ـ<br>‍دى</div>
|
||||
<div>دامي‍ـ<br>‍دى</div>
|
||||
<section>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>text-justify:inter-character and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
|
||||
<link rel='match' href='reference/letter-spacing-ligatures-001-ref.html'>
|
||||
<meta name=flags content="should">
|
||||
<meta name="assert" content="When the effective spacing between two characters is not zero (due to either justification […]), user agents should not apply optional ligatures">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'mplus';
|
||||
src: url('/fonts/mplus-1p-regular.woff');
|
||||
}
|
||||
div {
|
||||
font-size: 2em;
|
||||
font-family: mplus;
|
||||
width: 12ch;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
text-justify: inter-character;
|
||||
font-kerning: none;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
text-justify: auto;
|
||||
}
|
||||
.ref { color: blue; font-variant-ligatures: none; }
|
||||
.noref { color: orange; }
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one, not the orange one.
|
||||
<div>office</div>
|
||||
<div class=ref>office</div>
|
||||
<div class=noref>o<span>ffi</span>ce</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>letter spacing and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
|
||||
<link rel='match' href='reference/letter-spacing-ligatures-002-ref.html'>
|
||||
<meta name=flags content="should">
|
||||
<meta name="assert" content="When the effective spacing between two characters is not zero (due to […] letter spacing), user agents should not apply optional ligatures">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'mplus';
|
||||
src: url('/fonts/mplus-1p-regular.woff');
|
||||
}
|
||||
div {
|
||||
font-size: 2em;
|
||||
font-family: mplus;
|
||||
width: 12ch;
|
||||
letter-spacing: 20px;
|
||||
font-kerning: none;
|
||||
}
|
||||
i {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.ref {
|
||||
color: blue;
|
||||
letter-spacing: 0;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one.
|
||||
<div>office</div>
|
||||
<div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>text-justify:inter-character and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
|
||||
<link rel='match' href='reference/letter-spacing-ligatures-003-ref.html'>
|
||||
<meta name=flags content="should">
|
||||
<meta name="assert" content="When the effective spacing between two characters is not zero (due to either justification […]), user agents should not apply optional ligatures, but they do need to apply mandatory ones.">
|
||||
<style>
|
||||
div {
|
||||
font-size: 2em;
|
||||
width: 12ch;
|
||||
}
|
||||
.test {
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
text-justify: inter-character;
|
||||
}
|
||||
span { float: right; }
|
||||
.ref { color: blue; }
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one.
|
||||
<div lang=km class=test>សាហា</div>
|
||||
<div lang=km class=ref>សា<span>ហា</span></div>
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>letter spacing and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
|
||||
<link rel='match' href='reference/letter-spacing-ligatures-004-ref.html'>
|
||||
<meta name=flags content="should">
|
||||
<meta name="assert" content="When the effective spacing between two characters is not zero (due to […] letter spacing), user agents should not apply optional ligatures, but they must apply ones">
|
||||
<style>
|
||||
div {
|
||||
font-size: 2em;
|
||||
width: 12ch;
|
||||
font-kerning: none;
|
||||
}
|
||||
.test {
|
||||
letter-spacing: 20px;
|
||||
}
|
||||
span {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.ref {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one.
|
||||
<div lang=km class=test>សាហា</div>
|
||||
<div lang=km class=ref>សា<span></span>ហា</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>text-justify:inter-character and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'mplus';
|
||||
src: url('/fonts/mplus-1p-regular.woff');
|
||||
}
|
||||
div {
|
||||
font-size: 2em;
|
||||
font-family: mplus;
|
||||
width: 12ch;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
text-justify: inter-character;
|
||||
font-variant-ligatures: none;
|
||||
font-kerning: none;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
text-justify: auto;
|
||||
}
|
||||
.ref { color: blue;}
|
||||
.noref { color: orange; font-variant-ligatures: initial;}
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one, not the orange one.
|
||||
<div>office</div>
|
||||
<div class=ref>office</div>
|
||||
<div class=noref>o<span>ffi</span>ce</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>letter spacing and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'mplus';
|
||||
src: url('/fonts/mplus-1p-regular.woff');
|
||||
}
|
||||
div {
|
||||
font-size: 2em;
|
||||
font-family: mplus;
|
||||
width: 12ch;
|
||||
font-variant-ligatures: none;
|
||||
letter-spacing: 0;
|
||||
font-kerning: none;
|
||||
}
|
||||
i {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.ref {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one.
|
||||
<div>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
|
||||
<div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>text-justify:inter-character and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
div {
|
||||
font-size: 2em;
|
||||
width: 12ch;
|
||||
}
|
||||
span { float: right; }
|
||||
.ref { color: blue; }
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one.
|
||||
<div lang=km>សា<span>ហា</span></div>
|
||||
<div lang=km class=ref>សា<span>ហា</span></div>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>letter spacing and ligatures</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
div {
|
||||
font-size: 2em;
|
||||
width: 12ch;
|
||||
font-kerning: none;
|
||||
}
|
||||
span {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.ref {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the black text looks like the blue one.
|
||||
<div lang=km>សា<span></span>ហា</div>
|
||||
<div lang=km class=ref>សា<span></span>ហា</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: Simple line breaking test</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="match" href="reference/line-reabking-022.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<meta name="flags" content="ahem" >
|
||||
<meta name=assert content="Any Unicode character with the the BK and NL line breaking class must be treated as forced line breaks">
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
color: transparent; /* No interested in the rendering of the characters with BK an ML line breaking classes themselves, merely in their effects on line breaking. */
|
||||
}
|
||||
span { color: green; }
|
||||
.red {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
height: 6em;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is no red.
|
||||
|
||||
<div class=red></div>
|
||||
|
||||
<div>
|
||||
<span>1</span><span>2</span><span>3</span>
<span>4</span>
<span>5</span>…<span>6</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Javanese)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="mismatch" href="reference/line-breaking-023-ref.html">
|
||||
<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
section {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<section>
|
||||
<div class=test lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
|
||||
|
||||
<div class=ref lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Khmer)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="mismatch" href="reference/line-breaking-024-ref.html">
|
||||
<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
|
||||
|
||||
<div class=ref lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Lao)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="mismatch" href="reference/line-breaking-025-ref.html">
|
||||
<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
|
||||
|
||||
<div class=ref lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Thai)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="mismatch" href="reference/line-breaking-026-ref.html">
|
||||
<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
|
||||
|
||||
<div class=ref lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Burmese)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="mismatch" href="reference/line-breaking-027-ref.html">
|
||||
<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
|
||||
<style>
|
||||
div {
|
||||
border-right: 5em solid;
|
||||
width: 7em;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
|
||||
|
||||
<div class=ref lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Javanese)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
color: blue;
|
||||
white-space: pre;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
|
||||
|
||||
<div class=ref lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Khmer)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
white-space: pre;
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
|
||||
|
||||
<div class=ref lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Lao)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
white-space: pre;
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
<div class=test lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
|
||||
|
||||
<div class=ref lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Thai)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
border-right: 6em solid;
|
||||
width: 6em;
|
||||
}
|
||||
.test {
|
||||
white-space: pre;
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
|
||||
|
||||
<div class=ref lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: fallback line breaking (Burmese)</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
border-right: 5em solid;
|
||||
width: 7em;
|
||||
}
|
||||
.test {
|
||||
white-space: pre;
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
white-space: pre;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
|
||||
|
||||
|
||||
<div class=test lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
|
||||
|
||||
<div class=ref lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: Simple line breaking test</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
width: 1em;
|
||||
height: 6em;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="'overflow-wrap: anywhere' allows to break after the first character of the inline-block it applies to">
|
||||
<meta name="assert" content="'overflow-wrap: anywhere' allows to break before the first character of the inline-block it applies to">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div, span {
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: getComputedStyle().textJustify distribute</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-justify">
|
||||
<meta name="assert" content="text-justify: distribute computed value (or is parse-time aliased with) 'inter-character'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("text-justify", "distribute", "inter-character");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: text-align - computed value for match-parent on the root element</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-text-align-match-parent">
|
||||
<meta name="assert" content="'text-align: match-parent' on the root element with 'direction: rtl' should compute to 'start'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
html {
|
||||
text-align: match-parent;
|
||||
direction: rtl;
|
||||
}
|
||||
#log {
|
||||
direction: ltr;
|
||||
text-align: start;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(document.documentElement).textAlign, 'start');
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text 3 tests: match parent on text-align-last</title>
|
||||
<link rel="author" title="Florian RIvoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
section {
|
||||
font-family: monospace;
|
||||
width: 3ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two “2” are vertically aligned.
|
||||
<section>
|
||||
<div>1 2<br> 2</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text 3 tests: match parent on text-align-last</title>
|
||||
<link rel="author" title="Florian RIvoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
|
||||
<meta name="assert" content="Check that setting text-align to match parent has the correct effect on text-align-last (even if text-align-all is overridden).">
|
||||
<link rel="match" href="text-align-match-parent-05-ref.html">
|
||||
<style>
|
||||
section {
|
||||
font-family: monospace;
|
||||
width: 3ch;
|
||||
}
|
||||
div {
|
||||
text-align: match-parent;
|
||||
text-align-all: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two “2” are vertically aligned.
|
||||
<section dir=rtl>
|
||||
<div dir=ltr>1 2 2</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html dir="rtl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text: text-align: match-parent on root, ignoring body propagation</title>
|
||||
<link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
|
||||
<link rel="author" title="Florian RIvoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
|
||||
<meta name="assert" content="Text checks that
|
||||
text-align: match-parent on a root element with dir=ltr is
|
||||
equivalent to text-align: start (not a physical left or right),
|
||||
inheriting as a logical value">
|
||||
<link rel="match" href="text-align-match-parent-root-ltr-ref.html">
|
||||
<style type="text/css">
|
||||
html { text-align: match-parent; }
|
||||
</style>
|
||||
</head>
|
||||
<body dir=ltr>
|
||||
<p>This line should be aligned left</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
.group {
|
||||
inline-size: min-content;
|
||||
}
|
||||
|
||||
.group-align-left {
|
||||
/* Only the one that matches the inline axis will apply */
|
||||
margin-bottom: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.group-align-right {
|
||||
/* Only the one that matches the inline axis will apply */
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.group-align-center {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.group-align-start {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.group-align-end {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.text-container {
|
||||
inline-size: 200px;
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
const simpleTestString = `ABCDEFGHIJKLO
|
||||
AAAAAAAA
|
||||
AAAA
|
||||
AA
|
||||
A`;
|
||||
|
||||
function generateSimpleTest({ textGroupAlign, textAlign, direction, writingMode }) {
|
||||
if (!direction)
|
||||
direction = "ltr";
|
||||
if (!writingMode)
|
||||
writingMode = "horizontal-tb";
|
||||
|
||||
const container = document.createElement("div");
|
||||
container.textContent = simpleTestString;
|
||||
container.style = `text-group-align: ${textGroupAlign}; text-align: ${textAlign}; direction: ${direction}; writing-mode: ${writingMode}`;
|
||||
container.classList.add("text-container", "pre");
|
||||
document.body.append(container);
|
||||
}
|
||||
|
||||
function generateSimpleReference({ textGroupAlign, textAlign, direction, writingMode }) {
|
||||
if (!direction)
|
||||
direction = "ltr";
|
||||
if (!writingMode)
|
||||
writingMode = "horizontal-tb";
|
||||
|
||||
const container = document.createElement("div");
|
||||
container.classList.add("text-container", "pre");
|
||||
container.style = `text-align: ${textAlign}; direction: ${direction}; writing-mode: ${writingMode}`;
|
||||
|
||||
const group = document.createElement("div");
|
||||
group.textContent = simpleTestString;
|
||||
group.classList.add("group", `group-align-${textGroupAlign}`);
|
||||
container.append(group);
|
||||
|
||||
document.body.append(container);
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: center</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "center", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: center</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "center", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: center</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-center-vlr-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "center", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: center</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-center-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "center", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: end</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "end", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: end</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "end", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: end</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-end-vlr-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "end", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: end</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-end-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "end", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: left</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "left", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: left</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "left", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: left</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-left-vlr-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "left", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: left</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-left-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "left", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: right</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "right", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: right</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "right", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: right</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-right-vlr-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "right", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: right</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-right-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "right", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: start</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "start", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference: text-group-align: start</title>
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<link rel="stylesheet" href="support/fake-group-align.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleReference({ textGroupAlign: "start", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: start</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-start-vlr-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "start", writingMode: "vertical-lr", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>text-group-align: start</title>
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
|
||||
<link rel="match" href="text-group-align-start-ref.html">
|
||||
<link rel="stylesheet" href="support/test-helpers.css">
|
||||
<body>
|
||||
<script src="support/test-helpers.js"></script>
|
||||
<script>
|
||||
for (let direction of ["ltr", "rtl"]) {
|
||||
for (let textAlign of ["start", "end", "left", "right", "center"]) {
|
||||
generateSimpleTest({ textGroupAlign: "start", direction, textAlign });
|
||||
}
|
||||
document.body.append(document.createElement("br"));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>break-all Ethiopic word breaking</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
div {
|
||||
color: blue;
|
||||
white-space: pre;
|
||||
}
|
||||
.ref {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p> Test passes if the blue and orange text are identical.
|
||||
|
||||
<div lang=am>በ፡
|
||||
በ፡
|
||||
በ፡
|
||||
በ</div>
|
||||
<div lang=am class=ref>በ፡
|
||||
በ፡
|
||||
በ፡
|
||||
በ</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>Normal Ethiopic word breaking</title>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
div {
|
||||
color: blue;
|
||||
white-space: pre;
|
||||
}
|
||||
.ref {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p> Test passes if the blue and orange text are identical.
|
||||
|
||||
<div lang=am>ተወልዱ፡
|
||||
ኵሉ፡
|
||||
ሰብእ፡
|
||||
ግዑዛን፡
|
||||
ወዕሩያን፡
|
||||
በማዕረግ፡
|
||||
ወብሕግ።</div>
|
||||
<div lang=am class=ref>ተወልዱ፡
|
||||
ኵሉ፡
|
||||
ሰብእ፡
|
||||
ግዑዛን፡
|
||||
ወዕሩያን፡
|
||||
በማዕረግ፡
|
||||
ወብሕግ።</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>break-all Ethiopic word breaking</title>
|
||||
<meta name="assert" content="word-break: break-all means Ethiopid words break according to the older rules (letter by letter).
|
||||
Nevertheless, the breaking prohibition before the Ethiopic word space (U+1361)
|
||||
which belongs the the BA line breaking class,
|
||||
is honored.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ethiopic-ref.html'>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
div {
|
||||
width: 0;
|
||||
color: blue;
|
||||
word-break: break-all;
|
||||
}
|
||||
.ref {
|
||||
color: orange;
|
||||
width: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p> Test passes if the blue and orange text are identical.
|
||||
|
||||
<div lang=am>በ፡በ፡በ፡በ</div>
|
||||
<div lang=am class=ref>በ፡
|
||||
በ፡
|
||||
በ፡
|
||||
በ</div>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/word-break-break-all-010-ref.html">
|
||||
<meta name="assert" content="'word-break: break-all' allows to break after the first character of the inline-block it applies to">
|
||||
<meta name="assert" content="'word-break: break-all' allows to break before the first character of the inline-block it applies to">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div, span {
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<meta charset="utf-8">
|
||||
<title>Normal Ethiopic word breaking</title>
|
||||
<meta name="assert" content="word-break: normal means Ethiopid words break according to their customary rules (word by word)">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ethiopic-ref.html'>
|
||||
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
|
||||
<style>
|
||||
div {
|
||||
width: 0;
|
||||
color: blue;
|
||||
}
|
||||
.ref {
|
||||
color: orange;
|
||||
width: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p> Test passes if the blue and orange text are identical.
|
||||
|
||||
<div lang=am>ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡በማዕረግ፡ወብሕግ።</div>
|
||||
<div lang=am class=ref>ተወልዱ፡
|
||||
ኵሉ፡
|
||||
ሰብእ፡
|
||||
ግዑዛን፡
|
||||
ወዕሩያን፡
|
||||
በማዕረግ፡
|
||||
ወብሕግ።</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue