diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/writing-modes-3')
28 files changed, 717 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html new file mode 100644 index 000000000..9fea986c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: border-block and border-inline logical properties in different writing modes</title> +<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> +<style> +#body tr td:nth-child(2) div { + writing-mode: horizontal-tb; +} +#body tr td:nth-child(3) div { + writing-mode: horizontal-tb; +} +#body tr td:nth-child(4) div { + writing-mode: vertical-rl; +} +#body tr td:nth-child(5) div { + writing-mode: vertical-rl; +} +#body tr td:nth-child(6) div { + writing-mode: vertical-lr; +} +#body tr td:nth-child(7) div { + writing-mode: vertical-lr; +} +#body tr td:nth-child(8) div { + writing-mode: sideways-lr; +} +#body tr td:nth-child(9) div { + writing-mode: sideways-lr; +} + + +#body tr td:nth-child(2n+2) div { + direction: ltr; +} +#body tr td:nth-child(2n+3) div { + direction: rtl; +} + + +td { + padding: 5px; + font-size: 13px; + background-color: silver; + width: 70px; + height: 70px; +} + + +.top { + border-bottom: 2px dotted blue; + border-top: 2px dotted orange; +} +.right { + border-left: 2px dotted blue; + border-right: 2px dotted orange; +} + +.bottom { + border-top: 2px dotted blue; + border-bottom: 2px dotted orange; +} +.left { + border-right: 2px dotted blue; + border-left: 2px dotted orange; +} +</style> +</head> +<body> +<p> + Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell. +</p> +<table> +<thead> + <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr> + <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr> +</thead> +<tbody id=body> + <tr id=block-start><th>block-start</th> <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr> + <tr id=block-end><th>block-end</th> <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr> + <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr> + <tr id=inline-end><th>inline-end</th> <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr> +</tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html new file mode 100644 index 000000000..76f3149bf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>CSS Test: border-block and border-inline logical properties in different writing modes</title> +<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical"> +<link rel="match" href="logical-physical-mapping-001-ref.html"> +<style> +#block-start div.outer div { + border-block-start: dotted 2px orange; +} +#block-end div.outer div { + border-block-end: dotted 2px orange; +} +#inline-start div.outer div { + border-inline-start: dotted 2px orange; +} +#inline-end div.outer div { + border-inline-end: dotted 2px orange; +} + +#body tr td:nth-child(2) div { + writing-mode: horizontal-tb; +} +#body tr td:nth-child(3) div { + writing-mode: horizontal-tb; +} +#body tr td:nth-child(4) div { + writing-mode: vertical-rl; +} +#body tr td:nth-child(5) div { + writing-mode: vertical-rl; +} +#body tr td:nth-child(6) div { + writing-mode: vertical-lr; +} +#body tr td:nth-child(7) div { + writing-mode: vertical-lr; +} +#body tr td:nth-child(8) div { + writing-mode: sideways-lr; +} +#body tr td:nth-child(9) div { + writing-mode: sideways-lr; +} + + +#body tr td:nth-child(2n+2) div { + direction: ltr; +} +#body tr td:nth-child(2n+3) div { + direction: rtl; +} + + +td { + padding: 5px; + font-size: 13px; + background-color: silver; + width: 70px; + height: 70px; +} + + +.top { + border-bottom: 2px dotted blue; +} +.right { + border-left: 2px dotted blue; +} + +.bottom { + border-top: 2px dotted blue; +} +.left { + border-right: 2px dotted blue; +} +</style> +</head> +<body> +<p> + Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell. +</p> +<table> +<thead> + <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr> + <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr> +</thead> +<tbody id=body> + <tr id=block-start><th>block-start</th> <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr> + <tr id=block-end><th>block-end</th> <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr> + <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr> + <tr id=inline-end><th>inline-end</th> <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr> +</tbody> +</table> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list new file mode 100644 index 000000000..5b10baf15 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list @@ -0,0 +1,18 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +default-preferences pref(layout.css.text-combine-upright.enabled,true) + +== text-combine-upright-break-inside-001.html text-combine-upright-break-inside-001.html +== text-combine-upright-break-inside-001a.html text-combine-upright-break-inside-001a.html +== text-combine-upright-compression-001.html text-combine-upright-compression-001.html +== text-combine-upright-compression-002.html text-combine-upright-compression-002.html +== text-combine-upright-compression-003.html text-combine-upright-compression-003.html +== text-combine-upright-compression-004.html text-combine-upright-compression-004.html +== text-combine-upright-compression-005.html text-combine-upright-compression-005.html +== text-combine-upright-compression-005a.html text-combine-upright-compression-005a.html +== text-combine-upright-compression-006.html text-combine-upright-compression-006.html +== text-combine-upright-compression-006a.html text-combine-upright-compression-006a.html +== text-combine-upright-compression-007.html text-combine-upright-compression-007.html + +== text-orientation-upright-directionality-001.html text-orientation-upright-directionality-001.html + +== logical-physical-mapping-001.html logical-physical-mapping-001.html diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list new file mode 100644 index 000000000..bc8158275 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list @@ -0,0 +1,17 @@ +default-preferences pref(layout.css.text-combine-upright.enabled,true) + +== text-combine-upright-break-inside-001.html text-combine-upright-break-inside-001-ref.html +== text-combine-upright-break-inside-001a.html text-combine-upright-break-inside-001-ref.html +== text-combine-upright-compression-001.html text-combine-upright-compression-001-ref.html +== text-combine-upright-compression-002.html text-combine-upright-compression-002-ref.html +== text-combine-upright-compression-003.html text-combine-upright-compression-003-ref.html +== text-combine-upright-compression-004.html text-combine-upright-compression-004-ref.html +== text-combine-upright-compression-005.html text-combine-upright-compression-005-ref.html +== text-combine-upright-compression-005a.html text-combine-upright-compression-005-ref.html +== text-combine-upright-compression-006.html text-combine-upright-compression-006-ref.html +== text-combine-upright-compression-006a.html text-combine-upright-compression-006-ref.html +== text-combine-upright-compression-007.html text-combine-upright-compression-007-ref.html + +== text-orientation-upright-directionality-001.html text-orientation-upright-directionality-001-ref.html + +== logical-physical-mapping-001.html logical-physical-mapping-001-ref.html diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf b/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf Binary files differnew file mode 100644 index 000000000..06b1d3c02 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css b/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css new file mode 100644 index 000000000..0117e215e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css @@ -0,0 +1,11 @@ +.tcy { + text-combine-upright: all; +} +.fake-tcy { + display: inline-block; + writing-mode: horizontal-tb; + width: 1em; + height: 1em; + text-align: center; + line-height: 1em; +} diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css b/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css new file mode 100644 index 000000000..4f15976cc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css @@ -0,0 +1,7 @@ +@font-face { + font-family: WidthTest; + src: url(WidthTest-Regular.otf); +} +.test { + font: 72px/1 WidthTest; +} diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html new file mode 100644 index 000000000..9c6745667 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright, no line break</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { height: 3em; margin: 0 5em; } +.tcy, .fake-tcy { color: transparent; } +</style> +</head> +<body> +<p>Test passes if the two columns are identical.</p> +<div class="test"> + <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p> + <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html new file mode 100644 index 000000000..5248c076d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, whitespace inside tcy with insufficient line space</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout"> +<link rel="match" href="text-combine-upright-break-inside-001-ref.html"> +<meta name="assert" content="line should never be broken inside text-combine-upright text node"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { height: 3em; margin: 0 5em; } +.tcy, .fake-tcy { color: transparent; } +</style> +</head> +<body> +<p>Test passes if the two columns are identical.</p> +<div class="test"> + <p>XXXXX<span class="tcy">X X</span>XXXXX</p> + <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html new file mode 100644 index 000000000..d4c4bd649 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, white-space: pre with new line</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout"> +<link rel="match" href="text-combine-upright-break-inside-001-ref.html"> +<meta name="assert" content="line should never be broken inside text-combine-upright text node"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { height: 3em; margin: 0 5em; } +.tcy { white-space: pre; } +.tcy, .fake-tcy { color: transparent; } +</style> +</head> +<body> +<p>Test passes if the two columns are identical.</p> +<div class="test"> + <p>XXXXX<span class="tcy">X +X</span>XXXXX</p> + <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html new file mode 100644 index 000000000..b1971474e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright, no compression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical zeros in the blocks below.</p> +<div class="test"> + <p><span class="fake-tcy">0</span></p> + <p><span class="fake-tcy">0</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html new file mode 100644 index 000000000..304431bda --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, no compression</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression"> +<link rel="match" href="text-combine-upright-compression-001-ref.html"> +<meta name="assert" content="text-combine-upright with character not wider than 1em should not trigger compression."> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical zeros in the blocks below.</p> +<div class="test"> + <p><span class="tcy">0</span></p> + <p><span class="fake-tcy">0</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html new file mode 100644 index 000000000..dd05022c0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright, compression of two characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="fake-tcy">22</span></p> + <p><span class="fake-tcy">22</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html new file mode 100644 index 000000000..2be48da2d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, compression of two characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression"> +<link rel="match" href="text-combine-upright-compression-002-ref.html"> +<meta name="assert" content="text-combine-upright should try applying 'hwid' feature if the width is wider than 1em"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="tcy">00</span></p> + <p><span class="fake-tcy">22</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html new file mode 100644 index 000000000..6c6ea736f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright, compression of three characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="fake-tcy">333</span></p> + <p><span class="fake-tcy">333</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html new file mode 100644 index 000000000..5b22fb365 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, compression of three characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression"> +<link rel="match" href="text-combine-upright-compression-003-ref.html"> +<meta name="assert" content="text-combine-upright should try applying 'twid' feature if the width is wider than 1em"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="tcy">000</span></p> + <p><span class="fake-tcy">333</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html new file mode 100644 index 000000000..cb6aa0035 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright, compression of four characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="fake-tcy">4444</span></p> + <p><span class="fake-tcy">4444</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html new file mode 100644 index 000000000..c6bcb0232 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, compression of four characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression"> +<link rel="match" href="text-combine-upright-compression-004-ref.html"> +<meta name="assert" content="text-combine-upright should try applying 'qwid' feature if the width is wider than 1em"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="tcy">0000</span></p> + <p><span class="fake-tcy">4444</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html new file mode 100644 index 000000000..a158be264 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright, no compression for single full-width character</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="fake-tcy">０</span></p> + <p><span class="fake-tcy">０</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html new file mode 100644 index 000000000..dbcb810ab --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, no compression for single full-width character</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth"> +<link rel="match" href="text-combine-upright-compression-005-ref.html"> +<meta name="assert" content="text-combine-upright should not change a single full-width character"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="tcy">０</span></p> + <p><span class="fake-tcy">０</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html new file mode 100644 index 000000000..918140e83 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, no compression for single character with full-width transform</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth"> +<link rel="match" href="text-combine-upright-compression-005-ref.html"> +<meta name="assert" content="text-combine-upright should not change a single full-width character"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +.tcy { text-transform: full-width; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="tcy">0</span></p> + <p><span class="fake-tcy">０</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html new file mode 100644 index 000000000..8a083f680 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright, compression for two full-width characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="fake-tcy">22</span></p> + <p><span class="fake-tcy">22</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html new file mode 100644 index 000000000..8ba98db9c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, compression for two full-width characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth"> +<link rel="match" href="text-combine-upright-compression-006-ref.html"> +<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="tcy">００</span></p> + <p><span class="fake-tcy">22</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html new file mode 100644 index 000000000..bebda644e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright, compression for two characters with full-width transform</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth"> +<link rel="match" href="text-combine-upright-compression-006-ref.html"> +<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; } +.test > p { border: 1px solid black; } +.tcy { text-transform: full-width; } +</style> +</head> +<body> +<p>Test passes if there are two identical graphs in the blocks below.</p> +<div class="test"> + <p><span class="tcy">00</span></p> + <p><span class="fake-tcy">22</span></p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html new file mode 100644 index 000000000..a0cba009a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Reference: text-combine-upright: all, fit any number of characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; height: 3.5em; } +.test > p { border: 1px solid black; } +</style> +</head> +<body> +<p>Test passes if the contents in the two blocks are identical.</p> +<div class="test"> + <p>一<span class="fake-tcy"></span>十</p> + <p>一<span class="fake-tcy"></span>十</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html new file mode 100644 index 000000000..ca943f311 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8"> +<title>CSS Test: text-combine-upright: all, fit any number of characters</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression"> +<link rel="match" href="text-combine-upright-compression-007-ref.html"> +<meta name="assert" content="text-combine-upright: all should allow any amount of text to be compressed in a 1em square"> +<link rel="stylesheet" href="support/width-test.css"> +<link rel="stylesheet" href="support/tcy.css"> +<style> +.test { writing-mode: vertical-rl; height: 3.5em; } +.test > p { border: 1px solid black; } +.tcy { color: transparent; } +</style> +</head> +<body> +<p>Test passes if the contents in the two blocks are identical.</p> +<div class="test"> + <p>一<span class="tcy">ニ三四五六七八九</span>十</p> + <p>一<span class="fake-tcy"></span>十</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html new file mode 100644 index 000000000..cafd8e8f6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: text-orientation:upright in sideways-* writing modes</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation"> +</head> +<body style="font: 24px sans-serif"> +<p>The two sideways-rl lines should be identical: +<div style="writing-mode:sideways-rl"> + <p>hello العربي world עברית</p> + <p>hello العربي world עברית</p> +</div> +<p>The two sideways-lr lines should be identical: +<div style="writing-mode:sideways-lr"> + <p>hello العربي world עברית</p> + <p>hello العربي world עברית</p> +</div> diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html new file mode 100644 index 000000000..695e489df --- /dev/null +++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: text-orientation:upright in sideways-* writing modes</title> +<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation"> +<link rel="match" href="text-orientation-upright-directionality-001-ref.html"> +<meta name="assert" content="text-orientation has no effect in horizontal typographic modes"> +</head> +<body style="font: 24px sans-serif"> +<p>The two sideways-rl lines should be identical: +<div style="writing-mode:sideways-rl"> + <p>hello العربي world עברית</p> + <p style="text-orientation:upright">hello العربي world עברית</p> +</div> +<p>The two sideways-lr lines should be identical: +<div style="writing-mode:sideways-lr"> + <p>hello العربي world עברית</p> + <p style="text-orientation:upright">hello العربي world עברית</p> +</div> |